Z pojawieniem Prestashop wersji 1.7, w systemie zmieniło się bardzo dużo rzeczy. Pierwsze to, że CMS przeszłą na framework Symfony, co znacznie przyspieszyło i polepszyło działanie systemu.
Niespodzianką też stał w całości przerobiony podstawowy szablon. Wcześniej to był Default Bootstrap a teraz Classic. W poprzednim artykule powiedzieliśmy o jakości podstawowego szablonu oraz możliwości jego wykorzystania.
Nowy szablon Classic zebrany za pomocą dość skomplikowanej technologii dla nie doświadczonego dewelopera. W podstawie tej technologii leży platforma Node.js oraz manager paketowy Webpack. Nie będziemy wchodzić w szczegóły działania tych narzędzi a przeanalizujemy tylko te rzeczy które nam są potrzebni dla kompilacji nowego szablonu.
W tym artykule krok po kroku powiedziemy, jak skompilować js i css w szablonie Classic.
Przypominamy
Kompilacja plików odbywa się lokalnie. Po kompilacji, nowe pliki trzeba za wgrywać na serwer.
1. Pierwsze co nam trzeba zrobić to pobrać pliki źródłowe szablonu
W podstawowej paczce Prestashop niema źródłowych plików. Ich można pobrać z oficjalnego repozytoriumu na GitHub. W tej paczce nas interesuje folder szablonu classic.
2. Dalej nam trzeba zainstalować Node.js.
Trzeba go pobrać z oficjalnej strony. Zainstalować go można bez żadnych utrudnień. Po prostu przy instalacji klikać ‘next’.
3. Następnym krokiem będzie instalacja Webpack
Dla tego Państwu trzeba wejść w Terminal lub Konsole jeżeli pracujecie na Windows.
Wykonać komendę: npm install --global webpack
4. Dalej w konsoli trzeba wejść do folderu z plikami źródłowymi.
Dla tego trzeba wykonać komendę: cd /ścieżka/do/folderu/_dev
5. Kolejny krok to instalacja dodatkowego modułu Extract Text Plugin
Dla tego trzeba wykonać komendę: npm install --save-dev extract-text-webpack-plugin
6. Teraz możemy włączyć Webpack żeby on skompilował i dalej śledził za zmianami plików
Wykonujemy komendę: npm run watch
7. No i prawie wszystko
Teraz można edytować pliki źródłowe w folderze _dev i one automatycznie skompilują się w folder assets.
Linki: