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:
Fajny ciekawy no i unikatowy wpis o szablonach presty 1.7 szkoda że nie ma więcej…
Fajny ten wpis, taki niedokończony 😀
No i super początkujący ma w ładny sposób podane od czego zacząć strukturę plików.
Warto przedłużać temat. 😉
Do tej pory pracowałem głównie na Woocommerce, ale widzę gołym okiem, że prasta jest znacznie szybsza.
czy dobrze rozumiem, że Starter Theme mogę używać do celów komercyjnych? Mam tu na myśli tworzenie sklepów dla swoich klientów (jestem webmasterem)
Szkoda że nie ma drugiej części