Prestashop przeszła długą drogę aby dzisiaj móc oferować kompletne środowisko do stworzenia sklepu internetowego. Konkretna rewolucja nastąpiła po wprowadzeniu aktualizacji oprogramowanie do wersji 1.7. Oprócz zaktualizowanego interfejsu pojawiło się kilka nowych opcji, w tym motyw potomny i to właśnie on jest bohaterem tego artykułu. Opowiem czym jest child theme, a także jak go zainstalować, oraz wprowadzać zmiany w motywie.
Spis treści
Co to jest motyw potomny (child theme)?
Prestashop podczas jej aktualizacji do wersji 1.7 wprowadziła całkiem nowy sposób pracy nad motywami. Od tej wersji istnieje możliwość posiadania motywu potomnego (tzw. dziecka), a skoro mamy motyw potomny – mamy również motyw nadrzędny (tzw. rodzic). Można rozumieć że motyw potomny jest obiektem motywu nadrzędnego, a co za tym idzie zachowuje taki sam wygląd, dziedziczy jego style, a także javascript. Jego struktura jest znacznie uproszczona, ponieważ nie należy duplikować plików motywu, lecz motyw potomny wskazuje na swojego rodzica przekazując informację, że jest jego rozszerzeniem.
config/theme.yml
preview.png
Należy pamiętać, że aby stworzyć motyw potomny musi się on znajdować w folderze /themes, a także zawierać folder /config, w którym znajduje się plik theme.yml. W pliku tym definiujemy nazwę motywu potomnego, nazwę rodzica, wersję, a także dziedziczenie assetów. W dokumentacji Prestashop podpowiadają, że należy również przygotować plik podglądu motywu, głównie z tego względu aby można było go odróżnić od innych w panelu kontrolnym sklepu (kokpicie).
parent: classic
name: childtheme
display_name: My first child
Theme version: 1.0.0
assets:
use_parent_assets: true
Gdy przygotujesz odpowiednią strukturę folderów, oraz dobrze skonfigurujesz plik w kokpicie powinien się znaleźć nowy motyw. Wybieramy ‘Wybierz ten motyw’. Od tej pory będziemy mogli działać na motywie potomnym, zaś nie powinieneś zobaczyć żadnej różnicy w wyglądzie swojego sklepu.
Do czego służy motyw potomny?
Przed instalacją mógłbyś się zastanawiać po co Ci drugi, ten sam motyw. Tłumaczę i objaśniam. Jeżeli będziesz chciał przebudować swoją stronę internetową, swój motyw, to będziesz musiał wprowadzić zmiany w plikach css, js czy templatkach motywu. Może się zdarzyć, że popełnisz błąd. Możliwe, że nadpiszesz jeden plik drugim, albo popełnisz gafę w swoim kodzie i nie będziesz mógł znaleźć gdzie popełniłeś błąd. Jeśli działałeś na oryginalnym pliku motywu to masz przechlapane. Prawdopodobnie będziesz zmuszony do ponownej instalacji motywu, więc możesz stracić całą pracę, którą wcześniej wykonałeś, a także twój sklep nie będzie mógł w pełni działać przez okres naprawy motywu.
W momencie gdy używasz motywu potomnego i popełnisz błąd podczas edycji jego plików, wystarczy że wyłączysz child theme w kokpicie swojego sklepu internetowego! Strona główna nadal powinna wyglądać tak jak po instalacji głównego motywu, a więc chyba nie najgorzej. Nie musisz się przejmować tym, że wysypałeś sklep.
Jak wprowadzać zmiany w motywie potomnym?
Najważniejszą rzeczą jaką należy pamiętać podczas edycji motywu potomnego jest pamiętanie o tym, że ścieżka do pliku, który chcemy edytować musi być taka sama jak w motywie nadrzędnym. Motyw potomny polega na tym, że nadpisujemy pliki rodzica, stąd też jeśli pomylimy się w ścieżce, możemy nie zauważyć żadnych zmian.
Bardzo standardowy przykład. Chcesz zmienić style swojego motywu, ale nie chcesz ruszać głównego pliku, w folderze rodzica. W takim wypadku odtwarzasz ścieżkę do pliku .css:
themechild/assets/css
W tym folderze tworzysz plik theme.css (lub inny w zależności od tego z jakich plików składa się Twój motyw). W pliku tym dodajesz instrukcje i aktualizujesz go. Wszelkie zmiany zostaną zaktualizowane na stronie sklepu. Pamiętaj tylko o tym aby wyczyścić cache i użyć ctrl+f5.
