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

Druga część mojego poradnika poświęconego podstawom tworzenia szablonów dla PrestaShop w wersji 1.7. W części tej podstawy NPM,  praca z kodem oraz eksport szablonu.

Skoro mamy już przygotowane środowisko testowe oraz nasz szablon bazowy możemy rozpocząć pracę.

Praca z NPM

Jak pisałem w poprzednim wpisie, pliki źródłowe styli CSS i JS znajdują się w katalogu _dev, przechodzimy więc do tego katalogu w terminalu i wpisujemy

$ npm install

Spowoduje to zainstalowanie wszystkich zależności do _dev/node_modules z pliku package.json:

"autoprefixer": "^6.7.7",
"babel-loader": "^5.3.2",
"bootstrap": "4.0.0-alpha.5",
"bootstrap-touchspin": "^3.1.1",
"bourbon": "^4.2.6",
"css-loader": "^0.27.3",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"flexibility": "^1.0.5",
"jquery": "^2.1.4",
"material-design-icons": "^2.1.3",
"node-sass": "^4.5.0",
"notosans-fontface": "~1.0.1",
"postcss-flexibility": "^1.0.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.0",
"tether": "^1.1.1",
"velocity-animate": "^1.2.3",
"webpack": "^2.2.1",
"webpack-sources": "^0.1.0"

Aby dodać do projektu kolejną zależność wpisujemy:

$ npm install <nazwa_pakietu>

Po tym możemy uruchomić webpacka’a z parametrem watch dzięki czemu będzie on obserwował zmiany w plikach źródłowych i komplikował je w razie potrzeby do katalogu assets:

$ npm run watch

Nasz entry point dla CSS to plik _dev/css/theme.scss, od niego powinniśmy rozpocząć pracę nad wyglądem szablonu. Dla JS plik wejściowy to _dev/js/theme.js. Możemy je edytować, importować kolejne pliki itd. Wszystkie zmiany będą śledzone i pliki na bieżąco kompilowane do  katalogu assets.

Szablony w PrestaShop 1.7 jak i w poprzednich wersjach korzystają z silnika SMARTY, wszystkie pliki .tpl z widokami poszczególnych stron znajdują się w katalogu templates.

W przypadku edycja plików .tpl warto zadbać o wyłączone cache w PrestaShop oraz włącznie wymuszenia kompilacji plików tpl. Można to zrobić w panelu w zakładce Zaawansowane > Wydajność. W przeciwnym razie po zmianie w plikach .tpl możemy nie widzieć zmian w sklepie gdyż będą one ładowane z cache.

Eksport szablonu

W przeciwieństwie do poprzednich wersji w PrestaShop 1.7 export szablonu nie wymaga żadnych dodatkowych kroków, wystarczy spakować katalog do archiwum .zip i mamy gotową paczkę do instalacji w panelu sklepu.

Wszystkie informacje odnośnie szablonu znajdują się w pliku config/theme.yml. Można tam zdefiniować kompatybilność, hooki, moduły, formaty zdjęć itd.

Przed eksportem warto rozważyć minifikację plików CSS i JS przy pomocy narzędzi webpack’a oraz usunięcie z paczki katalogu _dev ze źródłami ale to już kwestia indywidualnych potrzeb.

Drugą opcję eksportu jest panel PrestaShop, w zakładce Wygląd > Szablony również można wyeksportować szablon do gotowej paczki .zip.

2 myśli do „PrestaShop 1.7 – Własny szablon (nie) od podstaw [2/2]”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *