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.
Cześć, nie wiedziałem, że prowadzisz bloga 😉 dodaję do ulubionych, będę zaglądał, pozdrawiam
Dzięki 😉 staram się ale ostatnio coś weny brakuje.