PrestaShop 1.7 jak zrobić nowy Motyw Theme PrestaShop

PrestaShop 1.7 jak zrobić nowy Motyw Theme PrestaShop

PrestaShop 1.7 domyślnie dostarczana jest z jednym Motywem (ang. Theme) Classic. Tworząc sklep PrestaShop 1.7 możesz wykorzystać motyw podstawowy PrestaShop 1.7 w całości lub też dokonać w nim zmian. Pamiętaj jednakże, iż podczas aktualizacji PrestaShop 1.7, może się okazać, że Twoje zmiany zostały zastąpione standardowymi ustawieniami PrestaShop 1.7.

Jeżeli nie chcesz korzystać z Motywu (theme) PrestaShop 1.7, możesz kupić nowy motyw lub zrobić własny – bezpłatny dla Ciebie motyw PrestaShop 1.7. Wystarczy nieco wiedzy i wysiłku ;).

Możesz także u mnie zamówić motyw PrestaShop 1.7 – www.gddm.com.pl 794 553 153 biuro (at) gddm.com.pl – serdecznie zapraszam do kontaktu.
A może potrzebujesz nowy sklep PrestaShop 1.7 lub upgrade z PS 1.5/1.6 do PrestaShop 1.7? Hmm, jakiś moduł PrestaShop 1.7 jest Tobie potrzebny?
Serdecznie zapraszam: 794 553 153 biuro (at) gddm.com.pl . Pomagam także w optymalizacji działania PrestaShop oraz naprawiam błędy w PrestaShop :).

1. Instalacja PrestaShop 1.7

Na początek zainstaluj na serwerze PrestaShop 1.7. Jest to dziecinnie proste, ale należy zwrócić na wymagania dotyczące serwera oraz PHP – zalecane PHP 7. Szczegóły znajdziesz w moim szkoleniu: Jak zainstalować PrestaShop na serwerze.

2. Tryb developerski PrestaShop 1.7

Aby pracować jako programista z PrestaShop 1.7, powinieneś/aś dostać się do tzw. trybu developerskiego.

Przed włączeniem trybu programisty należy wyłączyć pamięć podręczną Smarty i CCC (Combine, Compress and Cache). Smarty Cache jest wyłączana w programie BackOffice / Parametry zaawansowane / Wydajność / Smarty.

PrestaShop 1.7 jak zrobić nowy Motyw Theme PrestaShop

Tryb developerski PrestaShop włącza się następująco:

  • Przejść do katalogów [rооt_prestаshоp] / config /. [root_prestashop] - katalogi główne Prestshop
  • Otwórz plik define.inc.php
  • W pliku define.inc.php znajdź linię define ('_PS_MODE_DEV_', false)
  • Zastąp wiersz define ('_PS_MODE_DEV_', false), definiując ('_PS_MODE_DEV_', true)

Zapisz zmiany w pliku, aby zastosować je dla Twojej PrestaShop 1.7.

2. Przygotowywanie plików bazowych Motywu PrestaShop 1.7

Wejdź z poziomu CMD - uprawnienia głównego admina, do katalogu z Motywami w PrestaShop 1.7:

cd themes

Przekopiuj pliki projektu Motywu Startowego PrestaShop 1.7 z github:

Jak widzisz, przekopiowałem pliki projektu Motywu Startowego PrestaShop 1.7 z github tworząc własny motyw o nazwie: dgtheme.

Wejdź do katalogu projektu:

cd dgtheme

Teraz wszystko jest gotowe do instalacji.

Najpierw zainstaluj Composer, przejdź w CMD do katalogu głównego sklonowanego repozytorium PrestaShop 1.7 i uruchom polecenie:

composer install

Teraz z katalogu themes Twojej PrestaShop 1.7 ma dwa Motywy: Motyw Startowy oraz Classic. Z każdego z nich możesz wykonać Twój własny, unikalny, wspaniały Motyw PrestaShop 1.7. Jednakże w przypadku motywu Classic PrestaShop 1.7, zalecam zrobienie jego kopii z nową nazwą katalogu, u mnie dgclassic.

Początek pracy z motywem prawie zawsze zaczyna się od dokonania zmian (lub stworzenia go) w pliku theme.yml, gdzie należy w przypadku motywu wzorowanego na classic dokonać zamiany nazwy motywu na własną nazwę, w moim przypadku dgclassic.

Ale zanim zajmiemy się zrobieniem nowego w pełni funkcjonalnego motywu PrestaShop 1.7, zainstalujmy jeszcze odpowiednie środowisko produkcyjne, które ułatwi zabawę z motywami PrestaShop 1.7. Najpierw upewnij się, że /config/theme.yml jest ignorowany przez git (zobacz plik .gitignore).

Motyw Starter PrestaSHop 1.7, zawiera pliki developerskie w folderze _dev. Aby rozwijać motyw Twojej PrestaShop 1.7 zainstaluj zależności przy użyciu npm:

cd _dev && npm install

Mam nadzieję, że znasz choćby podstawy obsługi środowiska node.js? Jeżeli nie skorzystaj z mojego poradnika:

Aplikacje nodejs express

Twój motyw PrestaShop 1.7 zapewne będzie wykorzystywał zdjęcia, dlatego utwórz w folderze _dev katalog img.

Pracując z arkuszami stylów i plików javascript, wygodnym będzie skorzystanie z modułu watch. Będzie on czuwał na zmianami w motywie PrestaSHop i pomoże aktualizować wersję produkcyjną używaną przez PrestaShop 1.7.

npm run watch

Twórcy PrestaShop 1.7 zalecają rozpoczęcie od usunięcia wszystkich istniejących stylów.

Na tym kończę pierwszą część kursu: Jak zrobić nowy Motyw Theme w PrestaShop 1.7 kurs bezpłatny, zapraszam do kolejnej części poranika.

Powodzenia w budowaniu motywu PrestaShop 1.7: Jak zrobić nowy Motyw Theme w PrestaShop 1.7 kurs bezpłatny.

 

Zobacz w menu podobne artykuły do: PrestaShop 1.7 jak zrobić nowy Motyw Theme PrestaShop

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym