Opis narzędzia

Najłatwiej zobrazować to na przykładzie budowli stworzonej z klocków. Szablony standardowe, które obecnie tworzymy w oparciu o narzędzie Composer są taką budowlą, na którą składają się poszczególne komponenty (klocki). Każdy z tych komponentów posiada swoje unikalne właściwości i odpowiada za wyświetlanie poszczególnych elementów na sklepie. Mamy zatem elementy odpowiedzialne za stronę główną, koszyk, listę towarów czy też każdą inną sekcję, którą możecie zauważyć na sklepie. Część z tych komponentów jest ze sobą połączona i od siebie zależna.

Co zatem daje nam Composer?

Daje nam możliwość modyfikacji tych elementów, zarówno pod kątem ich położenia, widoczności, rodzaju szablonu z którego są one pobierane czy też samego kodu, który znajduje się wewnątrz nich. Jak widać trochę tych możliwości jest, zatem przejdźmy do praktyki.

Zacznijmy od przejścia do narzędzia Composer, który znajduje się w MODERACJA > Wygląd sklepu > Composer. Jeżeli jesteś tu pierwszy raz to zauważysz listę szablonów Standard, które posłużą Ci jako baza do Twojego projektu.

W zakładce “Opublikowane“ zobaczymy te szablony, które są opublikowane na sklepach. W tym oknie możesz w szybki sposób opublikować dany szablon na wybranym sklepie i języku

Celem edycji wybierzemy przykładowo szablon Standard 4v3.

Zatem z listy po lewej stronie, używamy przycisku Stwórz nowy zablon i z listy wybieramy Standard 4v3, a następnie Wybierz wzór i Podaj dane kompozycji (wpisujemy nazwę projektu).

W przypadku gdy posiadasz już swój projekt, należy nacisnąć przycisk Edytuj, który jest widoczny na liście dostępnych szablonów własnych. Pojawiło się menu edycji kompozycji. Na pierwszy rzut oka może się wydać skomplikowane, ale obsługa jest prosta i przyjemna.

Na górze (sekcja Edytowana strona) zobaczysz rodzaj strony, której elementy chcesz edytować. Obecnie domyślnie jest to karta towaru, lecz obok mamy też stronę główną czy też listę produktów. Jeśli zastanawiasz się gdzie znajduje się reszta podstron to znajdziesz je w sekcji Wybierz stronę (lista rozwijana). Oprócz tego na górze masz do dyspozycji jeszcze inne ciekawe:

Układ - komponenty dołączone np do nagłówka / stopki, różnego rodzaju biblioteki i kody JS, z których korzystają elementy obsługiwane w różnych podstronach.

Komponenty styli - w tym miejscu jest kilka komponentów wydzielonych ze stylami np slidera.

Pliki - dostęp do plików wykorzystywanych przez szablon

Ustawienia - zmienimy tutaj nazwę szablonu ale i dodamy kolejny język jaki szablon ma obsługiwać.

Historia - po każdym wygenerowaniu nowej wersji kompozycji pojawia się zapis w historii. Jest to ważna zakładka pozwalająca wrócić do wcześniejszej wersji kompozycji

Less/CSS i JavaScript - zakładki zawierające pełny kod css i JS występujący we wszystkich komponentach

Edycja szablonu odbywa się poprzez naciśnięcie niebieskiego przycisku Rozpocznij edycję, zaś wszelkie operacje na kompozycji możesz zobaczyć na pasku użytkowym po lewej stronie. Kompozycję możesz zaktualizować, skopiować lub usunąć (dwie ostatnie opcja dostępne są gdy edycja jest zakończona). Dodatkowo masz również do dyspozycji takie elementy jak zakładkę Kompozycje oraz Komponenty.

Composer Lite

Korzystanie z Composera za darmo dalej będzie możliwe w ramach wersji Lite. Dedykowana jest możliwość bieżącej obsługi graficznej szablonu sklepu w zakresie edycji układu gotowych komponentów oraz tłumaczenia. Funkcje obejmują:

• Dostęp do kompozycji Standard

• Wymianę i dodawanie komponentów Standard

• Ukrywanie komponentów Standard

• Sterowanie miejscem wyświetlania komponentów Standard

• Dostęp do słownika tłumaczeń

• Dostęp do schematów kolorystycznych

• Możliwość zmiany fontów i zaokrągleń przycisków oraz pól formularzy

• Możliwość personalizacji CSS poprzez arkusz własnych styli

• Dostęp do aktualizacji kompozycji i komponentów Standard

Composer Pro

Jest to profesjonalna odsłona Composera, dedykowana zaawansowanym edycjom (pełna edycja kodu CSS, JavaScript oraz XML/XSLT), a także rozwijaniu szablonów w SMARTY i XSLT. Dodatkowe funkcje obejmują:

• Tworzenie własnych komponentów - dzięki temu zyskujesz możliwość stworzenia nowatorskiego i całkowicie spersonalizowanego rozwiązania — samodzielnie lub powierzając to zadanie developerowi

• Edycja komponentów Standard - narzędzie umożliwia przygotowanie kopii wybranych komponentów i nanoszenia na nich swoich modyfikacji.

• Tworzenie szablonów Smarty i XSLT - tylko w ramach usługi Composer Pro możliwe będzie tworzenie, edytowanie i publikowanie w sklepie własnych szablonów w tych technologiach.

• Przenoszenie szablonów między sklepami - możesz pobrać wszystkie pliki dowolnego szablonu w formacie XSLT lub Smarty i wykorzystać́ je w innym panelu IdoSell z aktywną usługą Composer Pro.

Kompozycje Standard, indywidualne (kodowane przez developerów z IdoSell) i własne Lite (bazujące na komponentach Standard) nie wymagają Composer Pro. Publikacja spersonalizowanych szablonów powstałych w ramach usługi Composer Pro wymagać będzie aktywnej subskrypcji. Dotyczy to także dotychczas wykonanych szablonów w tych technologiach i szablonów z edytowanym kodem komponentów.

XSLT / SMARTY - oznaczenie szablonów własnych utworzonych w XSLT / SMARTY, które nie pochodzą z Composera.

Pro - szablon wymaga wykupienia subskrypcji Composer PRO

Lite - szablon nie wymaga wykupienie subskrypcji Composer PRO

W celu modyfikacji szablonu przejdź do swojej kompozycji własnej, którą stworzyłeś wcześniej w poprzednich częściach. Zatem wybierz MODERACJA -> Wygląd sklepu -> Composer, a następnie rozpocznij edycję wybranej kompozycji. Jak wspomnieliśmy już na początku tej instrukcji, każda podstrona składa się z różnorodnych elementów czy klocków, które odpowiadają za wygląd poszczególnych elementów. Rozpocznij edycję swojej kompozycji, a następnie kliknij na nazwę dowolnego komponentu. Możemy zauważyć różnorodne zakładki, takie jak:

• Podstawowe dane – zawierające podstawowe informacje o komponencie (nazwę, opis komponentu, autora, wersję komponentu)

• Kod komponentu – zestaw kodów CSS, Javascript, XML/XSLT, które wpływają na wygląd i funkcjonalność komponentu

• Ustawienia – gdzie definiujemy między innymi kolejność wczytywania komponentu, użyte biblioteki Javascript i inne elementy związane z wykorzystaniem zasobów potrzebnych do funkcjonowania elementu,

• Kompozycje oraz Historia – zawierające informacje o wersjach komponentu (każdy zapis i zakończenie edycji generuje nową rewizję danego komponentu) oraz opis zmian,

• Pliki – będące zestawów plików graficznych lub innych, które są wykorzystywane w samym komponencie.

Ciebie powinna najbardziej ciekawić zakładka Kod komponentu, dlatego przejdź do niej. Pierwsza zakładka dotyczy kodu Less/CSS, czyli stylu kaskadowego, który będzie określać wygląd klas i id obiektów, użytych podczas budowy komponentu. Kod z tej zakładki po wygenerowaniu szablonu, będzie przekazywany do głównego stylu kaskadowego style.css. Warto tutaj nadmienić, że możesz oczywiście dopisywać tutaj swój kod lub (co bardziej polecamy), użyć do tego specjalnie przygotowanego komponentu Settings w zakładce Komponenty Styli. Często pytacie nas, dlaczego podczas generowania podglądu naszego szablonu, nie widzimy kodu z pliku custom.css, dodanego w sekcji MODERACJA -> Wygląd sklepu -> Zarządzanie szablonami stron -> Dostosuj -> Edytuj CSS. Odpowiedź jest dość prosta – taki kod dodajemy dopiero po publikacji kompozycji. Aby móc jednak zobaczyć go w podglądzie, możemy przekopiować go do wspomnianego komponentu Settings.

Przejdź do drugiej i trzeciej zakładki – Javascript i wydzielony Javascript. Pierwszy z nich zawiera skrypty, które są dodawane do pliku ogólnego .js, zwanego w naszym systemie shop.js. Druga zakładka tworzy niejako osobny plik, wywoływany jedynie w momencie, gdy dany element jest wywołany na stronie po stronie klienta. W tym miejscu warto siegnąć po nasz artykuł blogowy, dotyczący planowanego podziału plików CSS i Javascript, dostępnego pod adresem: https://www.idosell.com/pl/blog/podsumowanie-zmian-w-kompozycjach-standard-w-maju-i-cz erwcu-2022-1235327729

W telegraficznym skrócie, planujemy udostępnić opcję wczytywania plików CSS oraz Javascript na stronie w ten sposób, aby zamiast wszystkich, niewykorzystywanych na danej podstronie elementów, wczytywały się jedynie te obecnie wykorzystywane. Doprowadzi to do zmniejszenia wagi wczytywanych plików, a tym samym przyśpieszy wczytywanie strony i polepszy ocenę Waszych sklepów w Google PageSpeed Insights oraz Lighthouse.

Wróćmy jednak do ostatniej zakładki XML/XSLT. Zakładka ta za pomocą kodu XML oraz XSLT definiuje nam strukturę wyświetlania danego komponentu. Upraszczając, w odróżnieniu od tradycyjnego HTML (który również możemy tutaj wykorzystać, nanosząc na niego odpowiednie modyfikacje), nie generujemy tutaj treści statycznych, a pobieramy niezbędne nam wartości za pomocą testów XSLT. Test ten najpierw sprawdza, czy dany zasób znajduje się w kodzie XML danej strony, a następnie jeżeli chcemy, zwraca nam daną wartość. Dzięki temu nie musimy np. na każdej stronie wpisywać ręcznie nazwy towaru, id towaru itd., a możemy przygotować szablon, w którym określimy odpowiednie warunki. Dodatkowo możemy się również tutaj odwoływać do literałów ze słownika tłumaczeń, dzięki komendzie <iai:variable vid="nazwa literału"/> - pozwoli to nam wstawić literał, który będzie wyświetlał się w danej wariancji językowej, zależnie od wybranego przez klienta języka oraz tłumaczenia w Słowniku tłumaczeń. Sam literał możemy dodać w Słowniku tłumaczeń, wybierając odpowiednie języki i klikając przycisk Dodaj nowy literał. Wracając jeszcze do testów, wykaz tzw. Xpath-ów, które używamy do ścieżki w teście, możemy znaleźć na stronie: https://www.idosell.com/pl/developers/smarty-documentation/ .

Pamiętaj, że edycja komponentów opiera się na wykonaniu kopii istniejącego komponentu, tworząc komponent własny. W tej chwili nie przewidujemy dodawania opcji tworzenia nowych, pustych komponentów, z racji ich określonej ilości i przypisanych grup. Aby stworzyć kopię komponentu, wybieramy w trybie edycji odpowiedni komponent i klikamy na przycisk Edytuj komponent (ołówek z kartką, pierwszy z lewej strony, nie licząc przycisku aktualizacji). Następnie należy stworzyć unikalną nazwę komponentu. Dzięki temu stworzymy komponent własny, który po wprowadzeniu zmian, należy zapisać (skrót CTRL+S lub przycisk Zapisz zmiany), a następnie Zakończyć jego edycję. Komponent własny nie jest aktualizowany – w dowolnym momencie możemy jednak go zmienić na jeden z elementów standardowych.