Modyfikacja listy towarów w Topazie – filtrowanie bez przeładowania strony

Od wersji 2021.2 w szablonie Topaz zmodyfikowane zostały listy produktów. Dotychczas filtrując poszczególne towary, należało nacisnąć przycisk „filtruj” co przeładowywało stronę i wyświetlało przefiltrowane produkty. Obecnie filtrowanie odbywa się w sposób dynamiczny, bez odświeżania strony. Lista towarów aktualizuje się od razu po wybraniu odpowiedniego filtra. Niniejsza instrukcja objaśnia, w jaki sposób zmodyfikować szablon Topaz, by osiągnąć opisywany efekt.

Artykuł podzielony będzie na trzy sekcje.

  • Pierwsza dotyczy modyfikacji we wspólnych częściach dla obu wariantów listy towarów.
  • Druga dotyczy wyłącznie pierwszego widoku listy towarów (w plikach szablonu: elements/products-list/products-1.html)
  • Trzecia sekcja dotyczy wyłącznie drugiego widoku (w tym samym katalogu plik products-2.html)

Modyfikacje dla obu wersji listy towarów

1. Plik base_layout.html

Otwórz plik base_layout.html w głównym katalogu z plikami szablonu. Wyszukaj linię __translations = {. Pod nią znajdują się wymienione tłumaczenia, które trafiają do funkcji js. Do ostatniego na tej liście dopisz przecinek na końcu, i pod spodem wklej:

Nad wyszukaną wcześniej linią __translations = {, wklej poniższy kod:

2. Plik product-item.html

Otwórz plik partials/product-item.html. Wyszukaj w nim linię:

Przed aria-label, a po otwarciu tagu a, dopisz class=”product-url” .

Modyfikacje dla pierwszego wariantu

Modyfikacja HTML

Otwieramy plik elements/products-list/products-1.html.
a) Wyszukujemy linię rozpoczynającą się od:

. Usuwamy w tej linii następujący fragment kodu:

To samo wykonujemy kilka linii poniżej, w linii zaczynającej się od

.

b) Wyszukujemy linię z elementem div, posiadającym klasę primary-action-button. Na liście jego klas dodajemy klasę hidden.

c) Wyszukujemy linię {% if anythingSelected -%} Kasujemy ją i odpowiadającą jej linię {% endif -%} (kilkanaście linii niżej, tuż nad {% assign productsItems = products.Products -%}.

d) Wyszukujemy div’a o id reset-filters. Na jego liście klas musimy dodać warunek {% if anythingSelected == false -%} hidden {% endif -%}

e) Wyszukujemy div’a z klasą removeFilter-js. Są dwa div’y o tej klasie. Nam chodzi o div’a znajdującego się w warunku {% if fo.PriceFrom != null and fo.PriceTo != null -%}. Na liście klas tego div’a dodajemy sliderPriceFilter.

f) Wyszukujemy linię {% if minProductNo < 1 -%}. Tuż nad nią znajduje się element span. Przerabiamy go w następujący sposób:

.

g) Wyszukujemy linię {% if valuesSize > 4 -%}. W kodzie są dwie takie linie, bierzemy pierwszą – nad nią znajduje się {% assign valuesSize = filter.Values | Size -%}. Usuwamy tę znalezioną linię i kilka kolejnych, kod do usunięcia wygląda tak:

h) Tuż pod usuniętym kodem znajduje się tag li z klasą filter-group-wrapper. Musimy usunąć go całego, a w jego miejsce wkleić poniższy kod:

Modyfikacja JS

Otwórz plik js/layout1.js. Wyszukaj linię kodu o treści var productListFunctions = {. Zaznacz cały blok kodu, począwszy od tej linii po klamrę zamykającą (pojedyncza klamra, nad którą 3 linie powyżej znajduje się $(’body’).on(’mouseleave’, ’.product-item’, function() {). Usuń ten blok kodu a w jego miejsce wklej następujący:

Modyfikacja css

Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed.

To wszystkie kroki dla pierwszego wariantu listy towarów szablonie Topaz. Kolejne podpunkty dotyczą drugiego wariantu.

Modyfikacje dla drugiego wariantu

Modyfikacja HTML

a) Wyszukaj linię {% if minProductNo < 1 -%}. Nad nią znajduje się element span. Dopisz do niego id=”items-counter”.

b) Wyszukaj element li z klasą filter-group-wrapper” (bez klasy price-filter). Usuń cały blok kodu (aż do zamknięcia tagu li). Zastąp go następującym:

c) Powyżej wklejonego bloku kodu znajduje się warunek {% if valuesSize > 4 -%}. Usuń go całego (od znalezionej linii do {% endif -%}).

d) Wyszukujemy div’a z klasą primary-action-button. Na liście klas dopisujemy klasę hidden.

e) Wyszukujemy div’a o id reset-filters. Na liście klas dodajemy {% if anythingSelected == false -%} hidden {% endif -%}.

f) Wyszukujemy linię zawierającą kod: data-filter-id=”price”. Na liście klas tego div’a dopisujemy sliderPriceFilter.

Modyfikacja JS

Otwieramy plik js/layout1.js Wyszukujemy var productListFunctions = {. Cały znaleziony blok kodu (kończy się znakiem }, 3 linie powyzej znajduje się linia $(’body’).on(’mouseleave’, ’.product-item’, function() {) należy skasować, a w jego miejsce wkleić następujący:

Modyfikacja css

Pozostaje drobna zmiana w pliku ze stylami. Otwórz css/layout0.css. Wyszukaj .filter input[disabled]+label{opacity:0.5;cursor:not-allowed}. Usuń ze znalezionego fragmentu ;cursor:not-allowed.

To wszystkie kroki dla drugiego wariantu listy towarów szablonie Topaz.

Czy ten artykuł był pomocny?