5 kroków, aby uzyskać efekt crossfade w Magento?

Ostatnim krzykiem mody w dziedzinie warstwy wizualnej sklepów e-commerce jest efekt crossfade dla zdjęć produktów, na stronach kategorii. W kilku prostych krokach, zaimplementujemy takie rozwiązanie dla sklepu opartego o platformę Magento. Co więcej, nie użyjemy w tym celu ani jednej linii JavaScript.

1. Atrybut
W tym tutorialu zakładam, że możemy wykorzystać atrybuty, które dla każdego produktu są już domyślnie dodane przez Magento. Aby wyświetlić dodatkowe zdjęcie na stronie kategorii, wykorzystamy atrybut „Thumbnail”. Edytujmy więc nasze produkty, dodając pożądane zdjęcia do produktów i ustawiając ich typ na Thumbnail:

 

cs-crossfade-w-magento-thumbnail-tutorial-creativestyle

 

 

2. Kopiujemy plik szablonu kategorii
Gdy mamy gotowy do użycia atrybut i ustawione zdjęcia wszystkich produktów – pora wyświetlić je na stronie kategorii. W tym celu, jeśli mamy własną paczkę z szablonem, sprawdzamy czy plik o nazwie list.ptml istnieje w którejkolwiek z następujących lokalizacji:

app/design/frontend/[nazwa_paczki]/[nazwa_szablonu]/template/catalog/product/

app/design/frontend/[nazwa_paczki]/default/template/catalog/product/

Jeśli plik ten był wcześniej edytowany, zapewne go tam znajdziemy. W takim przypadku przechodzimy do kroku 3. Jeśli natomiast nie znaleźliśmy tego pliku w żadnej z powyższych lokalizacji – skopiujemy go do którejś z nich. W tym celu udajemy się do paczki base:

app/design/frontend/base/default/template/catalog/product/ i kopiujemy plik list.phtml

Pamiętając, aby zachować strukturę folderów, finalnie powinniśmy otrzymać następującą strukturę:

app/design/frontend/[nazwa_paczki]/[nazwa_szablonu]/template/catalog/product/list.phtml

lub

app/design/frontend/[nazwa_paczki]/default/template/catalog/product/list.phtml

W pliku tym znajdziemy kod odpowiadający za widok kategorii – zarówno siatki jak i listy.

 

3. Edytujemy szablon kategorii
Otwórzmy skopiowany plik list.phtml w swoim ulubionym edytorze i znajdźmy fragment który wyświetla zdjęcie naszego produktu. W Magento 1.9.0.1, w paczce base dla widoku listy zaczyna się on od linii 50 i wygląda tak:


Kiedy kod już działa, w następnej kolejności edytujemy nieco jego fragment, w celu uporządkowania i dodania do widoku naszych nowych zdjęć zaraz nad obecnymi:

UWAGA! Podany kod jest fragmentem oryginalnego szablonu, rozmiar zdjęć w paczce może się różnić. Dopasuj nowy fragment, do rozmiaru swoich zdjęć.

 

4. Trochę magii – CSS
Zakładam, że wiesz gdzie znaleźć główny plik CSS decydujący o wyglądzie sklepu. Na tym etapie, potrzebujemy dorzucić zaledwie kilka linii na samym końcu pliku:

Teraz tylko wciśnij ctrl+s, commit, push, deploy i cieszymy się pięknym efektem crossfade na stronie kategorii.

 

5. Widok siatki
Skoro strona w widoku listy działa już tak jak chcemy, pozostaje nam zaimplementować to samo rozwiązanie dla widoku siatki. W przypadku oryginalnego szablonu z paczki base kod ten mieści się w linii 95. Zmieniamy więc jeszcze raz następujący fragment:

na:

Powodzenia!

pluswerk