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

My wybierzemy przykładowo szablon Standard 4v3, szczególnie popularny wśród naszych klientów.

Zatem używamy przycisku Stwórz kompozycję 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 kompozycję. 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

Zacznijmy od prezentacji samego narzędzia w tym zakresie. Dawniej przed wdrożeniem narzędzia Composer tłumaczenie szablonu Standard lub szablonu indywidualnego, odbywało się na zasadzie pobrania pliku XLIFF, a następnie ponownego wgrania go do panelu. Taki proces prowadził do stworzenia odrębnego szablonu, oznaczonego jako Przetłumaczony. Rozwiązanie te nie było do końca optymalne z uwagi na kilka aspektów:

• wymóg tworzenia i aktywowania kolejnych wersji szablonu przetłumaczonego,

• przedawnienie plików XLIFF w przypadku kolejnych aktualizacji szablonu,

• konieczność tworzenia osobnych tłumaczeń dla każdego szablonu.

Aby zoptymalizować działania z zakresu tłumaczenia szablonu, postanowiliśmy przy okazji utworzenia narzędzia Composer, stworzyć odrębny mechanizm, który pozwoli nam usprawnić wcześniej wspomniane kwestie i ułatwić Ci proces tłumaczenia. Słownik tłumaczeń jest narzędziem, które przechowuje wspólne tłumaczenie dla każdego z języków. Innymi słowy dzięki temu nie musisz tworzyć kolejnych tłumaczeń dla konkretnych kompozycji w narzędziu Composer, ani martwić się o aktualizację. Sam słownik jest prosty w obsłudze i czerpie najlepsze aspekty z rozwiązań znanych nam choćby z popularnych programów typu CAT (Computer Assisted Translation). Spójrzmy zatem jak dokonać nasze pierwsze tłumaczenie.

Warto dodać, że tłumaczenia oraz zmienione literały (zwroty występujące na stronie) możesz edytować jedynie dla własnych kompozycji w narzędziu Composer.

Zmiana literału w szablonie utworzonym w narzędziu Composer

Opcja zmiany literałów występujących w szablonie dostępna jest w bocznej kolumnie w narzędziu Composer i nosi nazwę: Słownik tłumaczeń.

W jego edycji zobaczymy pola z wyborem języka domyślnego oraz docelowe, który chcemy uzupełnić swoim tłumaczeniem. Załóżmy, że chcemy zmienić na naszym szablonie oznaczenie towarów wyróżnionych. Produkty takie noszą etykietę Polecany.

Przechodząc do słownika tłumaczeń wybieramy język domyślny jako polski i język docelowy też jako polski. W górnej części zobaczymy pole wyszukiwarki, w którym wprowadzamy frazę Polecany. Wyszukiwarka zwróci nam wszystkie te wyniki, w których występuje dana fraza (może być ich dużo). Akurat dla naszej frazy wynik będzie pojedynczy. Po wprowadzeniu zmiany należy użyć opcji Odśwież literały w kompozycjach.

Aby zmiany były widoczne na naszym szablonie potrzebujemy jeszcze opublikować nową wersję kompozycji. W tym celu przechodzimy z poziomu widoku głównego Composera do szczegółów wybranej kompozycji i uruchamiamy edycję. Kolejnym krokiem jest zakończenie edycji z opisem naszych zmian.

Ostatnim etapem jest poczekanie aż system wygeneruje nową wersję szablonu a gdy to nastąpi opublikowanie go na sklepie.

Poniżej można zauważyć zmiany od strony sklepu:

Import i export pliku z tłumaczeniami

Alternatywą dla ręcznego wprowadzenia tłumaczeń w Słowniku tłumaczeń, jest opcja Import/Export pliku z tłumaczeniami.

Po jej kliknięciu masz możliwość wyboru dowolnych języków, dla których pobierzesz plik XLIFF, zawierający wszelkie dostępne literały. Taki plik możesz otworzyć za pomocą programów typu CAT np. darmowy program POEdit. Po edycji takiego pliku, należy go wgrać, przeciągając go w odpowiednie miejsce (naciskasz Import/Export i pokazuje się Pole do wgrania plików), a następnie musisz nacisnąć przycisk Prześlij tłumaczenie. Jeżeli plik będzie poprawny to Słownik zostanie nadpisany. Oczywiście po tym kroku także musisz nacisnąć przycisk Odśwież literały w kompozycjach.

Standardowe kompozycje posiadają obsługę trzech języków standardowych: polskiego, angielskiego oraz niemieckiego. Dla naszych testów dodaliśmy zmianę dla języka polskiego ale co z tłumaczeniem dla np popularnego obecnie języka czeskiego? W pierwszej kolejności przejdź do sekcji MODERACJA -> Wygląd sklepu -> Composer i rozpocznij edycję swojej kompozycji własnej, w której chcesz włączyć obsługę tego języka. Następnie rozpocznij edycję i przejdź do zakładki Ustawienia. Tutaj w sekcji Wspierane języki kliknij na puste pole z prawej strony ostatniego języka na liście i wybierz z listy Czech. Po tym kroku kliknij na niebieski przycisk Zapisz ustawienia, a następnie Zakończ edycję, wpisując opis swoich zmian.

Następnie przechodzimy do sekcji ADMINISTRACJA -> Płatności i waluty -> Konfiguracja języków i do opcji Języki w panelu administracyjnym i Dodaj język. Z listy wybieramy język Czech i klikamy Dodaj język. Po dodaniu języka w różnych miejscach naszego panelu pojawi się nam możliwość ustawienia treści dla języka czeskiego. Ostatnim krokiem jest dodanie języka, który będzie widoczny od strony klienta na naszym sklepie a nie tylko w panelu: ADMINISTRACJA -> Płatności i waluty -> Konfiguracja języków -> Konfiguracja języków dla strony.

Do tego momentu wiesz już gdzie wprowadzić tłumaczenia oraz jak w szablonie ten język zadeklarować (Ustawienia). Pamiętaj żeby szablon opublikować chociaż na chwilę na sklepie aby system wiedział, że posiadasz szablon, który tej konkretny język wspiera. Na końcu w Administracji dopełniamy formalności w konfiguracji języków.

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.