Obsługa strony porównywania towarów w szablonie Szafir

W tym artykule dowiesz się jak dodać w szablonie Szafir stronę umożliwiającą porównywanie cech towarów. 

Pierwszym modyfikowanym plikiem będzie __settings.liquid. Pierwsze dwie linijki pliku powinny wyglądać następująco:

Tuż pod nimi umieść kod odpowiadający za polskie tłumaczenia:

Kolejne około 100-200 linii (w zależności od tego, jaką wersję teraz posiadasz) będzie zaczynało się od frazy {% assign … . Następnie ujrzysz frazę {% else -%}, pod którą należy umieścić poniższy kod, odpowiadający za angielskie tłumaczenia.

Wyszukaj również frazę #lg-settings-content a. Nad znalezioną linią powinieneć widzieć tag <script> a nad nim tag zamykający </div> (jeden lub kilka), a nad nim(i) tag zamykający </fieldset>. Pod tagiem </fieldset> należy umieścić poniższy blok kodu.

Kolejnym modyfikowanym plikiem będzie product/product-presentation-data.html. Narzędziem wyszukiwania należy wyszukać frazę page-title-ui.Nad znalezioną linią należy wkleić poniższy kod.

Następnie należy wyszukać frazę product.Description != „” or. Do znalezionego warunku należy dopisać or settings.compareProducts == 'yes'. Cały warunek może wówczas wyglądać następująco:

Następnie wyszukaj frazę product-presentation-menu-container-ui. Nad znalezioną linią wklej poniższy kod.

Około 3 linie poniżej powinieneś znaleźć listę ul o klasie product-presentation-menu-ui. W tagu otwierającym należy dopisać atrybuty data

Cała linia kodu może wyglądać następująco:

Następnie wyszukaj frazę translations.RelatedProducts. Pod znalezioną linią powinieneś widzieć:

</ul> należy usunąć a zamiast tego tagu wkleić poniższy kod.

Teraz przejdź do pliku js/init-ui2.js. Należy w nim wkleić poniższy kod (można wkleić w pierwszej linii pliku).

Następnie wyszukaj frazę product-presentation-menu-lq.more-elements-lq. Znajdziesz instrukcję warunkową if:

Kod ten należy usunąć i wkleić poniższy:

Wyszukaj frazę function adjustCategoryMenuToUrlBar(). Nad znalezioną linią wklej poniższy kod.

Kolejnym modyfikowanym plikiem będzie comparison-tool.html. Należy wkleić do pliku poniższy kod.

Następnie w katalogu product należy utworzyć nowy plik i nazwać go comparison.html.
Należy w nim umieścić poniższy kod.

Teraz przejdź do katalogu css.
W pliku desktop2.css w dowolnym miejscu wklej poniższy kod.

W pliku mobile.css należy na końcu pliku dodać poniższy kod.

Dodatkowo będziesz musiał dodać tłumaczenia do panelu administracyjnego. W tym celu należy wejść w zakładkę Wygląd sklepu/ Ustawienia/ Tłumaczenia i kliknąć w przycisk Dodaj. Należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał na stronie. Zmiany należy zatwierdzić przyciskiem Dodaj.

Lista tłumaczeń:
  • Id: DeleteFromCompare ,Tekst: Usuń z porównania
  • Id: AddToCompare,
    Tekst: Dodaj do porównania
  • Id: AddedToCompare,
    Tekst: Dodano do listy porównania
  • Id: 2to4products,
    Tekst: Możesz dodać od 2 do 4 produktów
  • Id: Rating,
    Tekst: Ocena
  • Id: BasicInformation,
    Tekst: Informacje podstawowe
  • Id: TechnicalParameters,
    Tekst: Parametry techniczne
  • Id: ProductsComparison,
    Tekst: Porównywanie towarów
  • Id: NoProductsInComparer,
    Tekst: Nie wybrano żadnych towarów do porównania
  • Id: TooMuchProductsInComparer,
    Tekst: Możesz dodać maksymalnie 4 produkty

Czy ten artykuł był pomocny?