Shoper to jedna z najpopularniejszych platform do e-commerce. Jest dość prosta w obsłudze i przystępna cenowo, co stanowi atrakcję dla użytkowników. Jednak oprócz funkcjonalności i kosztów, ważny jest też wygląd sklepu. Tu jest nieco gorzej. O ile płatne szablony wyglądają całkiem zacnie, to jednak darmowe pozostawiają wiele do życzenia. To jednak nie to samo, co WordPress, dla którego za darmo można zainstalować naprawdę niezłe tematy. Całe szczęście, modyfikacja wyglądu sklepu nie jest bardzo złożona i nawet dość początkujący programista front-endowy powinien sobie z tym poradzić. Warto jednak zawczasu wiedzieć parę rzeczy, aby mieć świadomość, jak ten proces będzie przebiegał.
Co musisz umieć, by modyfikować Shopera?
Szablon Shopera składa się z wielu plików *.tpl oraz *.less i *.css. Wykorzystuje silnik Smarty do odseparowania logiki od prezentacji widoków oraz LESS, czyli jedno z najpopularniejszych (obok SASS-a) rozszerzeń kaskadowych arkuszy stylów CSS. Spokojnie, nie oznacza to bynajmniej, że musisz czuć się zupełnie pewnie w składni Smarty czy w LESS. Wystarczy zupełnie podstawowa znajomość powyższych, by zrozumieć, co się dzieje. Można też potraktować przygotowania do modyfikacji Shopera jako impuls do nauczenia się nowych umiejętności. W przypadku Smarty będzie to nieco trudniejsze, jednak zrozumienie i zaczęcie wdrażania LESS-a naprawdę można zacząć niemalże z marszu, co szczerze polecam. Szybko zrozumiesz, mówiąc językiem reklam, że CSS jeszcze nigdy nie był tak fajny.
Przed rozpoczęciem modyfikacji
Zanim rozpoczniesz modyfikować szablon Shopera, musisz wybrać ten, który będziesz zmieniać i utworzyć jego temat potomny. Potomek wybranego wzorca będzie początkowo utworzony z kopii wszystkich plików swojego rodzica. W każdej chwili będzie też można zresetować całą historię zmian i powrócić do pliku wyjściowego. Bez utworzenia szablonu potomnego nie można w ogóle zacząć edycji plików.
Mając już swój szablon potomny, możemy zacząć modyfikację. Jednak najpierw warto rzucić okiem na wszystkie opcje zaplecza, przy pomocy których dostosowujemy wygląd sklepu. Wiele rzeczy można zmienić z poziomu panelu administracyjnego i nie trzeba (a nawet nie powinno się) kodować ich na sztywno. Szczególnie warto pobawić się chwilę Modułami. Przy ich pomocy łatwo zmienimy i przeorganizujemy wygląd poszczególnych podstron sklepu bez wprowadzania zmian w plikach szablonu.
Warto też zwrócić uwagę na możliwość wprowadzania własnego kodu JavaScript i CSS. Własny CSS wygodniej jednak wprowadzać bezpośrednio do plików szablonu (plik user.css). Jeśli chodzi o JavaScript, to nie ma takiej możliwości. Jeśli już koniecznie musisz, osadź go np. w pliku header.tpl przy użyciu kodu:
<script type="text/javascript">
{literal}
Twój kod JavaScript
{/literal}
</script>Szablon Shopera – edytor online, czy stacjonarny?
Panel Shopera umożliwia modyfikację plików szablonu za pośrednictwem edytora online. Moim zdaniem jest to jednak niewygodne i powolne. Całe szczęście, mamy możliwość połączenia z sewerami Shopera poprzez program obsługujący WebDAV i ściągnięcie szablonu na własny komputer, aby edytować go swoim preferowanym programem. Do synchronizacji plików Shoper zaleca Cyberduck. Teoretycznie można użyć dowolnego programu, pozwalającego na połączenia WebDAV-em, jednak nie udało mi się zaprząc do tej pracy mojego ulubionego WinSCP.
Uwaga na obrazy! Spłaszczanie PNG
Zanim zaczniesz projektować swój zmodyfikowany układ, miej na względzie jedną dziwną (w mojej opinii) cechę. Shoper uparcie spłaszczał ładowane obrazy PNG do plików JPG, co uniemożliwiało dodanie produktów z przeźroczystym tłem. Research w internecie nie daje jednoznacznej odpowiedzi, czy jest to uniwersalna cecha silnika Shopera, funkcja, którą można jakoś wyłączyć w panelu administracyjnym, czy raczej mój błąd przygotowania grafiki. Pewne źródła, jak np. Uniwersytet Shopera, zdają się sugerować, że można dodać zdjęcia produktów na przeźroczystym tle. Inne, jak wpisy na forach, wskazują, że jest to ogólny problem. Tak czy inaczej, przygotowując obrazy standardowo w Photoshopie i zapisując je do sieci w formie plików PNG (zarówno PNG-8 jak i PNG-24) z przeźroczystością, natrafiałem na problem. Warto to wziąć pod uwagę już na etapie konceptualizacji wyglądu sklepu i albo zrobić to tak, by przeźroczystość nie była potrzebna, albo zgłębić temat bardziej. Nie wykluczam, że jest to jednak możliwe, tylko nie dotarłem do właściwego rozwiązania.
Refleksje na koniec
Dalsza praca to już żmudna dłubanina w plikach, modyfikacje arkuszy stylów, nadpisywanie własnych ustawień itp. itd. W moim odczuciu podstawowe szablony Shopera są dość logicznie zorganizowane, jednak da się zauważyć pewną sztywność rozwiązań. Sugeruje to, moim zdaniem, że ewoluowały one wraz z rozwojem technologii internetowych i ich początki sięgają czasu sprzed programowania RWD. Chcąc wdrożyć naprawdę nowoczesny kod, trzeba by w gruncie rzeczy przepisać spore sekcje na nowo, co w przypadku modyfikacji trochę mija się z celem. Jednak, jak wspomniałem, ogólnie jest to na tyle logiczne i uporządkowane, że stosunkowo prosto da się zorientować w logice szablonu.
Reasumując, jeśli zabieracie się właśnie do postawienia sklepu na Shoperze i planujecie modyfikować któryś z dostępnych szablonów, nie wahajcie się. Da się to zrobić i nie taki diabeł straszny. Powodzenia!