Dodanie nowego widoku filtrów

Dodanie nowego widoku filtrów

Szablon Szafir umożliwia dodanie w nim nowego widoku filtrów oraz modyfikowację ustawienia szablonu, aby był bardziej czytelny. Zmiany wyglądu dotyczą opisu danej kategorii i graficznych odnośników do podkategorii.

Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir

W pliku __settings.liquid dodaj poniżesze tłumaczenia:

W tym samym pliku wyszukaj frazę id=”tab1″ i linijkę niżej wklej:

Teraz wyszukaj frazę:

Tuż nad nią będzie znak zamknięcia kontenera. Linijkę wyżej wklej poniższy kod:

Wraz z nowymi sekcjami ustawień wkleiliśmy tu też kilka starych, które odnoszą się do Listy Towarów. Aby zapobiec duplikacji należy je wyszukać w kodzie w kontenerze oznaczonym jako tab0Content i usunąć. Następnym krokiem będzie wyszukanie znacznika

oraz wklejenie w jego obrębie kodu:

Kolejne dwie zmiany dotyczą plików products.html oraz products/product-filters.html. W obu tych plikach zachodzi bardzo dużo zmian dlatego zalecamy podmianę całej zawartości obu plików poniższym kodem:
products.html

products/product-filters.html

W pliku common/categories-navigation/categories-navigation-partial.html na samym dole znajdź warunek {% if areFilteringOptionsClass == 'with-filters-ui' -%} i zamień go na {% if areFilteringOptionsClass == 'with-filters-ui' and settings.filterPanelView == „left” -%}

Następnie w pliku js/init.js znajdź frazę events: function() i linijkę niżej wklej poniższy kod:

Kontynuując zmiany w tym samym pliku, wyszukaj frazę form.find('[type=”number”]').val(”); i zmień tam number na tel. Na końcu funkcji w której znajduje się ta fraza dopisz app.filter(e);.

Przejdź do pliku js/init-ui1.js i na samym końcu wklej poniższy kod:

W tym momencie masz już dodany filtr, w następnych krokach będziesz edytował styl. W pliku scss/globals/_globals-m.scss znajdź frazę .products-page-lq{ i usuń z tej klasy margin-top: 114px;. Kilka linijek niżej znajdziesz:

Usuń ten fragment. Jeszcze niżej znajdziesz .category-img-ui{. Usuń w nim height: auto !important;. Znajdz i usuń poniższy fragment:

Linijkę niżej jest kod .sorting-options-ui{. Zmień w nim linijkę width: calc(100vw – 80px – 21px – 60px); na width: calc(100vw – 192px); i usuń oba wpisy związane z wysokością height: 26px;. Następnie w obrębie @media only screen and (max-width: 1279px) { (np w 2 linijce pliku) wklej poniższy kod:

Przejdz do pliku scss/globals/_globals1.scss na samym dole wklej poniższy kod:

Ostatnim krokiem będzie znalezienie w scss/partials/_product-list.scss frazy .change-view-ui i podmień margin-right na margin-left

Jedyne zmiany w panelu administracyjnym wymagają dodania dwóch tłumaczeń. Wygląd sklepu -> Ustawienia -> Tłumaczenia:
– CloseFilters: Zwiń filtry
– ClearAllFilters: Wyczyść wszystkie filtry

Czy ten artykuł był pomocny?