Istnieją dwie różne ścieżki cięcia i kodowania szablonu pod Magento. Pierwsza z nich polega na przygotowaniu backendu i ostylowaniu wynikowego HTML-a. Druga, to jej odwrotność, przygotowanie frontendu na podstawie posiadanych grafik i podpięciu go pod Magento.

W tym artykule skupię się na drugim podejściu, przedstawię na co powinno zwracać się uwagę, tnąc i kodując PSD do Magento. Na samym początku wyeliminujemy kilka potencjalnych problemów, które mogą pojawić się w trakcie implementacji HTML-a do Magento.

1. Magento składa się z templatek

Struktura szablonu Magento opiera na się na wykorzystaniu templatek dla różnych układów podstron. Przykładowo, wśród plików szablonu znajdziemy takie jak:

  • 1column.phtml
  • 2columns-left.phtml
  • 2columns-right.phtml

Odpowiadają one za rozkład głównych sekcji na danej podstronie i są stosowane do zbudowana większości podstron. Jak same nazwy wskazują, w pierwszym przypadku mamy jedno-kolumnowy układ podstrony, w drugim dwu-kolumnowy z sidebarem po lewej, a w trzecim dwu-kolumnowy z sidebarem po prawej. Warto zwrócić na to uwagę i tworzyć identyczne struktury dla takich samych układów, już na etapie cięcia HTML-a. Dobrze jest również pisać CSS-a w taki sposób, aby po zmianie struktury podstrony, cały widok nadal poprawnie się wyświetlał.

2. Tnij i koduj modułowo

Wiele sekcji występujących na jednej podstronie z pewnością wystąpi ponownie na innych. Elementy takie jak header, footer, box produktowy czy breadcrumbsy nie pojawiają się tylko na jednym widoku. Tego typu sekcje powinny móc funkcjonować jako odrębne moduły, tak aby można było je wyświetlić niezależnie od widoku i umiejscowienia. Warto także zaznajomić się z modułowym lub obiektowym podejściem do pisania CSS-a (OOCss, BEM, Smacss, itp.).

3. Magento korzysta z prototype.js zamiast z jQuery

Wszystkie skrypty JavaScript wbudowane domyślnie w Magento oparte są o framework prototype.js. Oczywiście nic nie stoi na przeszkodzie, żeby podczas pisania własnych skryptów korzystać z jQuery. Chcąc jednak to robić, trzeba zapobiec występowaniu konfliktów pomiędzy tymi dwoma bibliotekami.

Za konflikty pomiędzy różnymi bibliotekami JavaScript, odpowiada tylko i wyłącznie jeden element, zmienna $, która wykorzystywana w wielu frameworkach, posiada w nich zdefiniowane inne znaczenie. Aby temu zapobiec, wystarczy korzystać z jej dłuższego odpowiednika, czyli ze zmiennej jQuery.

Bibliotekę jQuery warto też podłączyć do strony przed podłączeniem prototype.js. Wówczas możemy bezpiecznie korzystać z przestrzeni nazw jQuery, a jej skrótowa wersja, czyli $, będzie miała znaczenie zdefiniowane w kolejnej załączonej bibliotece (w tym przypadku w prototype.js).

Na koniec jeszcze jedna ważna uwaga. Jest jeden przypadek, w którym Magento korzysta z biblioteki jQuery, a mianowicie jest to wersja EE, która wykorzystuje tą bibliotekę do operacji na karcie produktu. Warto zwrócić tutaj uwagę na to, czy jQuery nie jest podłączone podwójnie. Może to powodować problemy, zwłaszcza jeśli podpięte będą dwie różne wersje biblioteki.

4. Wykorzystuj skrypty JavaScript wbudowane w core Magento

Magento ma wbudowane kilka przydatnych skryptów JavaScript, które mogą ułatwić nam tworzenie niektórych funkcjonalności. Warto o nich wiedzieć i tym samym unikać korzystania z dodatkowych bibliotek, a tym bardziej z pisania tych skryptów od podstaw.

Do walidacji formularzy możemy użyć wbudowanego w Magento pluginu validation.js. Plugin jest zbudowany w oparciu o bibliotekę prototype.js i posiada naprawdę dużo opcji. W validation.js mamy domyślnie wbudowane ponad 50 różnych metod walidacji. Nic nie stoi na przeszkodzie, żeby dodawać własne metody, do czego zresztą mamy przygotowane odpowiednie funkcje.

Innym pluginem, który możemy znaleźć w Magento jest tooltip.js. Jeśli mamy zamiar obsługiwać tooltipy za pomocą JavaScipt, to lepiej skorzystać z tego rozszerzenia niż np. ładować popularną bibliotekę jQuery UI. Osobiście zachęcam jednak do czysto CSS-owej obsługi tak prostych elementów jak tooltipy.

5. Używaj prostego kodu HTML

Kod HTML w szablonach Magento powinien być tak prosty, jak to tylko możliwe. Przeglądając bazowy szablon Magento, można zauważyć, że bardzo często stosowane są proste tagi HTML, o których większość z nas zapomina:

  • <button>
  • <del>
  • <small>

Przyznam, że sam zapominam często o takich tagach jak <del> lub <small> i zamiast nich, nadużywam pasującego wszędzie tagu <span>. Wszystkie tagi mają jednak swoje przeznaczenie, dlatego warto się z nimi zapoznać i co najważniejsze stosować je w praktyce.

6. Zwracaj uwagę na elementy niewidoczne na pierwszy rzut oka

Często mając przygotowaną grafikę w PSD, tniemy ją, kodujemy i stylujemy nie zwracając uwagi na to, jak ostatecznie będzie to działać. Oczywiście na etapie przygotowywania frontendu, nie jesteśmy w stanie przewidzieć wszystkich zachowań. Jeśli jednak już na począku wiemy, że kodujemy sklep internetowy, to niektóre funkcjonalności powinny być stosunkowo łatwe do przewidzenia. Oto przykłady:

  • Produkty w sklepie mają swoje stałe ceny, które z pewnością są przedstawione na grafikach. Czasami jednak, przy standardowych cenach, pojawiają się ceny dodatkowe (rabatowe, przed rabatowe lub ceny od do (w przypadku produktów z różnymi wariantami)).
  • Karta produktu często zaprojektowana jest pod produkt prosty (ma cenę i button dodawania do koszyka). W rzeczywistości jednak w sklepie występują też produkty konfigurowalne, z opcją wyboru wariantu, którą gdzieś trzeba umieścić.

Zwracając uwagę na takie szczegóły, można uniknąć wielu poprawek, które mogą wystapić po podpięciu Magento.

7. Korzystaj z Task Runner-ów

Proces cięcia i kodowania PSD do Magento, warto oddzielić od procesu podpinania HTML-a pod Magento. Zwłaszcza jeśli prace są wykonywane w tym samym czasie i może dojść do konfliktów lub nadpisywania plików. W takim przypadku warto zaznajomić się z tzw. Task Runner-ami, takimi jak Grunt lub Gulp.

Mając wydzielony folder w projekcie, w którym tniemy i kodujemy PSD (lub też wykonujemy poprawki), często musimy przenosić pliki CSS, JS oraz obrazki do docelowych folderów templatki Magento. Proces ten można zautomatyzować wykorzystując wspomniane Task Runner-y. Skrypty nie tylko mogą za nas przenosić pliki do odpowiednich folderów, ale scalać je i minimalizować, a także tworzyć do nich mapy.

To tylko kilka najważniejszych zasad, które powinien znać każdy, kto chce bezboleśnie przejść przez proces cięcia i kodowania PSD do Magento. Chcących poszerzyć swoją wiedzę z Magento od strony frontendowej, zachęcam do zapoznania się z dokumentacją przygotowaną dla frontend developerów, dostępną na oficjalnej stronie Magento.

Potrzebujesz rady dotyczącej Magento? Napisz do nas.