PrestaShop 1.7 – Własny szablon (nie) od podstaw [1/2]

PrestaShop 1.7 wraz z wieloma nowościami dostarcza nam też zupełnie nowy sposób tworzenia szablonów. W końcu mamy  porządny szablon domyślny napisany od podstaw wedle zasad sztuki i menadżerem zależności. W tym poradniku opiszę jak zabrać się za tworzenie własnej wersji natywnego szablonu.

Wpis podzieliłem na 2 części, w pierwszej opiszę przygotowanie środowiska i omówienie struktury szablonu, w drugiej podstawy NPM,  pracę z kodem oraz eksport szablonu i instalację w sklepie.

Całość jak zwykle na moim GitHub’ie, celem będzie stworzenie ciemnej wariacji natywnego szablonu „Classic”.

Poradnik ten jest dla początkujących w świecie Presty i Front-end’u ale znających już jakieś podstawy 🙂 Niezbędne minimum jakie musisz znać aby zacząć pracę nad własnym szablonem to:

• NPM i Webpack
• HTML oraz CSS
• Bootsrap 4

GIT oraz Docker może się przydać.

Środowisko pracy

Gdzieś musimy zainstalować nasz sklep PrestaShop abyśmy mogli rozpocząć pracę nad szablonem. Ja do tego celu zawsze korzystam z Docker’a gdyż znacznie przyśpiesza instalację i pozwala łatwo testować kod pod różnymi wersjami Presty.

Można również postawić sobie lokalnie serwer WWW i na nim zainstalować PrestaShop.

Kluczową kwestią jest zainstalowanie NodeJS gdyż potrzebujemy NPM czyli menadżera pakietów z którego będzie korzystali do dostarczania zależności jak jQuery czy Bootstrap do naszego szablonu.

Starter

Twórcy PrestaShop przygotowali dla developerów specjalny szablon startowy tzw. „Starter Theme„. Jest to de facto bardzo prosty szkielet szablonu bez żadnych zależności z podstawowymi templatkami. Jest to polecany punkt startowy dla osób znających dość dobrze PrestaShop jednak ten poradnik jest kierowany dla początkujących, więc pokażę inną drogę która znacznie ułatwi proces i pozwoli szybko nauczyć się pracy z szablonami PS.

Jako bazę pod nasz szablon wykorzystamy domyślną templatkę PS 1.7 o nazwie „Classic”. Jej źródła znajdują się na GitHub’ie projektu. Nie jest to profesjonalne rozwiązanie ale jeśli dopiero zaczynasz polecam Ci właśnie tą drogę 🙂

Struktura katalogów szablonu

Zaczynamy od zalogowania się do panelu PS i dodania szablonu bazowego który będziemy modyfikować, przechodzimy do Wygląd > Szablony > Dodaj nowy szablon.

Możemy stworzyć paczkę zmieniając nazwę domyślnego szablonu w /themes/classic/config/theme.yml na własną i pakując zawartość katalogu /themes/classic/ w paczkę .zip.

Link do szablonu ze źródłami dla leniwych 🙂

classic-dark/
├── assets
│   ├── css
│   └── js
├── config
│   └── theme.yml
├── _dev
│   ├── css
│   ├── img
│   ├── js
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── postcss.config.js
│   └── webpack.config.js
├── modules
│   ├── blockreassurance
│   ├── ...
│   └── ps_viewedproduct
├── plugins
├── preview.png
└── templates
    ├── catalog
    ├── checkout
    ├── cms
    ├── contact.tpl
    ├── customer
    ├── errors
    ├── index.tpl
    ├── layouts
    ├── page.tpl
    └── _partials

Struktura szablonu wygląd mniej-więcej jak powyżej, kolejno:

assets	zawiera wyjściowe zasoby css i js
config	pliki konfiguracyjne, zazwyczaj tylko theme.yml
_dev	kod źródłowy sass oraz js
modules	templatki modułów, możemy zmienić domyślny wygląd modułów jak blok koszyka etc.
plugins	pluginy smarty, opcjonalnie
templates	templatki szablonu, wszystkie widoki

Skoro mamy już gotowe środowisko i wiemy co gdzie się znajduje możemy rozpocząć pracę nad kodem, ale to w drugiej części poradnika 🙂

Dodatkowe informacje:

• https://github.com/PrestaShop/StarterTheme
• http://doc.prestashop.com/display/PS17/Getting+started+with+theme+development