W ostatnich miesiącach pojawiła się nowa wersja 1.7 popularnego silnika Prestashop wykorzystywanego w wielu sklepach internetowych. Budowa motywu dla sklepu różni się znacznie w porównaniu do poprzednich wersji Prestashop. Poniżej w kilku punktach przedstawię co nowego w silniku pojawiło się dla deweloperów oraz jak zacząć pracę nad motywem sklepu.
Dokumentacja dewelopera i projektanta motywu
Podobie jak w poprzednich wersjach silnika Prestashop, deweloperzy i projektanci motywu mają dostęp do dokumentacji, która choć niestety obecnie nie jest w całości gotowa, zawiera istotne elementy np. dotyczące zarządzania stylami i skryptami JS. Zwrócić należy uwagę m.in. na priorytety poszczególnych plików, które mają znaczenie na kolejność ładowania, a tym samym na to jakie style nadpiszą inne czy też które skrypty i biblioteki zostaną załadowane wcześniej, a której później. Przykładowo dla głównego pliku CSS motywu theme.css
ustalono priorytet 0, więc w przypadku wykorzystania innych bibliotek używających własnych stylów musimy zadbać, by znalazły się one w theme.css
, ponieważ nie można nadać priorytetu mniejszego niż 0, z drugiej strony często zależy nam, by style innych bibliotek były załadowane przed wczytaniem własnych stylów. Można to osiągnąć odpowiednie konfigurując narzędzie tworzące pliki CSS np. Webpack.
Z kolei plik theme.js
ze skryptami JavaScript używanymi przez motyw wczytywany jest przez Prestashop z priorytetem 50. Podobnie jak w przypadku CSS zadbać należy, by pliki innych bibliotek były ładowane wcześniej. Choć nie jest jasno w dokumentacji to przedstawione, istnieje pewien problem z bibliotekami jQuery i jQuery UI, które są ładowane z priorytetem 90, więc jeśli używane przez nas biblioteki wykorzystują jQuery, należy pamiętać, by miały priorytet wyższy niż 90 np. 100. Definiować to można dla nowego motywu w pliku konfiguracyjnym /nazwa-motywu/config/theme.yml
. Aktualne wartości priorytetów zawsze można sprawdzić w pliku /classes/controller/FrontController.php
znajdującym się w katalogu ze sklepem.
Webpack i zarządzanie kodem źródłowym motywu
Programiści JavaScript i aplikacji webowych obecnie coraz częściej korzystają z narzędzi, które wiele czynności pozwalają zautomatyzować i ułatwić zarządzanie kodem budowanego rozwiązania. Jednym z nich jest coraz popularniejszy Webpack. Co więcej, w startowym motywie dla silnika Prestashop 1.7 dostępnym na GitHub, o którym napiszę poniżej, wykorzystano właśnie Webpack’a. W pliku konfiguracyjnym webpack.config.js
z pewnością warto skonfigurować budowanie jednego pliku CSS / JS z wielu innych oraz minifikowanie takich plików. Zaleca się również w Webpack skonfigurować linter czy też uruchamianie testów jednostkowych.
Startowy motyw dobrym punktem wejściowym
Dostępny na GitHub startowy motyw dla Prestashop 1.7 ułatwia nie tylko sam start pracy nad motywem, ale upraszcza i dostarcza skonfigurowane narzędzie Webpack, a także zawiera szkielet motywu, który modyfikując i rozwijając można przekształcić w niezwykle rozbudowane motywy. Głównym miejscem, w który znajduje się kod nowego motywu, jest katalog /nazwa-motywu/_dev
, w którym znajdują się pliki Stylus (z rozszerzeniem .styl), CSS, JavaScript i inne wymagane przez motyw (np. czcionki). Poza tym pliki Smarty (z rozszerzeniem .tpl) znajdują się w /nazwa-motywu/templates
, natomiast moduły, w tymi zmodyfikowane CSS i JS dla modułów w katalogu /nazwa-motywu/modules
. Liczba plików i złożona struktura startowego motywu wymaga na początku poświęcenia czasu, jednak znajomość szkieletu motywu i posiadanie rozbudowanego szablonu zdecydowanie ułatwia prace w kolejnych etapach budowy motywu, do czego zachęcam 🙂
Gdzie jest footer.tpl?
jak modyfikowac stopkę?
W domyślnym startowym szablonie stopkę można zmienić poprzez edycję pliku ps_contactinfo.tpl z modułu ps_contactinfo.