Porównywarka towarów w szablonie Topaz

Porównywarka towarów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał porównywarkę towarów.

Wskazówka
Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!
Wskazówka
Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ' „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować
Pierwszy krok to przypisanie obiektu porównywarki do właściwej strony sklepu. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. W prawym górnym rogu kliknij przycisk z trzema kwadratami a następnie z rozwijanego menu wybierz opcję Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Porównywarka (9). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz comparer.html, a następnie zapisz. Kliknij na pole z napisem Porównywarka (9). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy obiekcie o nazwie comparison-tool, by pokazał się znak wyboru (tzw. „ptaszek”). A następnie zapisz.

Wskazówka
Jeśli na liście obiektów nie widzisz obiektu comparison-tool, wykonaj następujące czynności. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Porównywarka towarów a w polu Nazwa podaj comparison-tool, po czym kliknij Dodaj. Następnie wykonaj opisane wcześniej kroki.

Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst) i zatwierdzić przyciskiem Dodaj. Lista Id oraz fraz do wprowadzenia:
1. NoItemsSelectedToCompare – Nie wybrano żadnych towarów do porównania
2. ProductsComparison – Porównanie towarów
3. ProductsComparisonRemove – Usuń porównanie
4. AddMoreProductsToCompare – Dodaj kolejne towary, które chcesz porównać (max. 3)
5. ShowProductsFromCategory – Pokaż inne towary z tej kategorii
6. ComparerReview – Ocena
7. ComparerAvailability – Dostępność
8. ComparerInformations – Informacje podstawowe
9. Manufacturer – Producent
10. Brand – Marka
11. ComparerTechnicalParameters – Parametry techniczne
12. RemoveFromComparisonTool – Usuń z porównania
13. AddedToComparisonTool – Dodano do porównania
14. ItemsToCompare – Możesz porównać od 2 do 4 towarów.
15. ProductsComparisonRemove – Usuń porównanie
16. MaxItemsInComparisonTool – Osiągnięto maksymalną ilość produktów

Wskazówka
Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie comparer.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco:

Możesz pominąć ten krok, jeżeli plik już istnieje, a jego treść jest identyczna jak powyżej.

Następnie otwórz folder staticElements. W nim utwórz nowy katalog o nazwie comparer, a w nim utwórz nowy plik o nazwie comparer.html. W pliku tym, umieść następujący kod:

Kolejnym krokiem jest dodanie odpowiedniego kodu do plików css, odpowiadających za wygląd porównywarki. W tym celu przejdź do katalogu css. Na końcu pliku layout.css wklej następujący kod:

Do pliku layout-m.css wklej następujący kod:

Do pliku layout-d.css wklej następujący kod:

Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod:

Otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku:

Następnie należy dodać możliwość dodawania produktów do porównywarki z poziomu szczegółów towaru. Otwórz katalog elements -> product. W zależności do tego, jaką wersję szczegółów towaru wybrałeś w Kreatorze, w katalogu będzie plik product-details-1.html lub product-details-2.html. Wykonaj kolejne kroki w zależności od tego, który plik znajduje się w Twoim Topazie.

Dalsza instrukcja dla pliku product-details-1.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment comparison-tool-add-button. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:

a pod nimi wklej następujący kod:

Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod:

W pliku layout-m.css wklej następujący kod:

A w pliku layout-d.css wklej następujący kod:

Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy:

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:

Jeśli posiadasz pierwszą wersję szczegółów towaru, to koniec instrukcji. Dalsza część dotyczy zmian dla wersji drugiej szczegółów towaru.

Dalsza instrukcja dla pliku product-details-2.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment productComparisonToolAdd-js. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:

a pod nimi wklej następujący kod:

Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod:

W pliku layout-m.css wklej następujący kod:

A w pliku layout-d.css wklej następujący kod:

Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy:

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:

Czy ten artykuł był pomocny?