Nagłówek zawierający wielopoziomowe pionowe menu w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować pliki swojego szablonu tak, by obsługiwał on nowy nagłówek zawierajacy wielopoziomowe pionowe menu.

Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

UWAGA! Niektóre z instrukcji różnią się w zależności od obecnie posiadanego nagłówka (wariant 1 lub wariant 2), jednak wklejany kod w obu przypadkach będzie identyczny. Uważnie czytaj, czy dana instrukcja odnosi się do obecnie posiadanego przez Ciebie nagłówka!

Dla uproszczenia, nowy wariant nagłówka będzie w niniejszym artykule nazywany „trzecim wariantem nagłówka”.

1. Plik HTML

Zaczynamy od usunięcia kodu HTML z obecnym nagłówkiem. W tym celu otwórz katalog elements/header i usuń plik o nazwie header-1.html (jeśli posiadasz drugi wariant nagłówka, plik nazywa się header-2.html). W tym samym katalogu utwórz nowy plik o nazwie header-3.html i wklej do niego następujący kod:

2. Pliki CSS

Następnie trzeba podmienić kod w plikach css.

NAGŁÓWEK 1: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od „.headerSection{color:{{settings.headerFontColor}};” a kończy na „.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:
NAGŁÓWEK 2: Najpierw otwórz plik css/layout0.css, wyszukaj w nim blok kodu, który zaczyna się od „.headerBackground{width:100%;background-color:{{settings.headerBgColor}};” a kończy na „.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Ten blok kodu należy skasować i w jego miejsce wkleić poniższy:

NAGŁÓWEK 1: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od „@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}”. Usuwamy go, i w jego miejsce wklejamy poniższy:
NAGŁÓWEK 2: W tym samym katalogu otwieramy plik layout-m0.css. Wyszukujemy w nim blok kodu zaczynający się od „@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon”. Usuwamy go, i w jego miejsce wklejamy poniższy:

NAGŁÓWEK 1:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od „@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}”. Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:
NAGŁÓWEK 2:Dalej, w tym samym katalogu otwieramy plik layout-d0.css. Wyszukujemy w nim linię zaczynającą się od „@media screen and (min-width: 790px){.headerSection .mainNavigation__links”. Usuwamy całą linię a w jej miejsce wklejamy poniższy kod:

3. Podpięcie pliku z nowym nagłówkiem

Kolejnym krokiem jest umożliwienie wyświetlania naszego nowego nagłówka. W tym celu, w głównym katalogu otwieramy plik _layout.html. Linię o treści „{% include 'elements/header/header-1.html' -%}” podmieniamy na „{% include 'elements/header/header-3.html' -%}„.
NAGŁÓWEK 2: W przypadku drugiego nagłówka, linia ta brzmi: „{% include 'elements/header/header-2.html' -%}”.

4. Zmiany w plikach JS

Następnie musimy podmienić kod w plikach js. W tym celu otwieramy plik js/layout0.js a w nim wyszukujemy linię „var headerFunctions = {„. Musimy usunąć cały blok kodu. Ostatnią linią w tym bloku jest „};”. Żeby łatwiej było zlokalizować cały kod do usunięcia, następna linia po ostatniej skasowanej powinna wyglądać tak: „ui.showFooterSection = function() {„. W miejsce usuniętego bloku kodu, wklejamy poniższy:

UWAGA! W powyższym kodzie do wklejenia, usuń znaki na początku i końcu bloku kodu!

5. Dodanie nowego bannera

Kolejną kwestią jest utworzenie nowego bannera, który bedzie wyświetlany obok listy kategorii. W tym celu otwieramy Panel Administracyjny, zakładki Wygląd sklepu -> Ustawienia, wybieramy właściwy szablon i przechodzimy do zakładki Bannery.
Sprawdzamy, czy mamy banner o nazwie menuBanner. Jeśli tak, to otwieramy go. Jeśli nie, klikamy na dużą ikonkę z plusem, w celu utworzenia nowego bannera. Musimy nadać mu nazwę menuBanner.
W bannerze do nowego wariantu nagłówka, zalecany rozmiar obrazka wynosi 1118×534. W innym przypadku, obrazek może miec problemy ze skalowaniem.
Możemy również uzupełnić pozostałe pola bannera, takie jak m.in. nagłówek, tekst, czy link. Są one obsługiwane w nowym nagłówku.

6. Dodatkowe zmiany w plikach JS

Pozostaje dodać małe zmiany w plikach js. Otwórz plik js/layout0.js.

1. Wyszukaj linię „$('.headerSearchForm-js').parent().append(autocompleteList);”. Skasuj ją i podmień na następujący kod:

2. Wyszukaj linię „productWishListAdd: function (e) {„. Funkcja ta kończy się linią „},”. Tuż przed końcem funkcji (przed linią },) wklej poniższy kod:

3. Funkcja przed tą, przed chwilą edytowaną, nazywa się productWishListRemove. W niej podobnie jak poprzednio odszukaj jej koniec (linia „},”) i tuż przed końcem dodaj kod:

4. Wyszukaj linię „$('.showBottomMenuSection-js').on(’click', function(e) {„. Jest to funkcja, która kończy się linią „});”. Usuń ją i wklej następujący kod w jej miejsce:

5. Wyszukaj linię „updateProductsInCart: function () {„. Funkcja ta kończy się linią „},”. Usuń linię powyżej („});”) i wklej poniższy kod:

6. Poniżej znajduje się funkcja, która rozpoczyna się od „incrementProductsInCart: function () {„. Podobnie jak poprzednio, ale bez usuwania niczego, przed jej ostatnią linijką („},”) wklej ten kod:

7. Poniżej znajduje się funkcja, która rozpoczyna się od „decrementProductsInCart: function () {” i po raz kolejny, analogicznie, przed ostatnią linijką, wklej ten kod:

8. Wyszukaj linię „$('.go-to-top__btn-js').click(function(){„. Funkcja ta kończy się linią „});”. Skasuj całą funkcję a w jej miejsce wklej poniższy kod:

9. Pod dodaną w jednym z poprzednich punktu linią „$(’#stockLevelValueInput').val(stockLevelValue);” znajduje się linia „},”. Pod nią wklej poniższy kod:

10. W pliku js/layout1.js wyszukaj funkcję, zaczynającą się od „productWishListDelete: function (e) {„. Funkcja kończy się linią „},”. Przed jej końcem wklej poniższy kod:

11. W pliku js/layout1.js wyszukaj linię „function addToCart(e) {„. Tuż nad nią dodaj następujące linijki:

12. Kilka linijek wyżej znajduje się linia „$('.attributes-select:not(:last-child)').after('
');”. Pod nią wklej następujący kod:

13. Wróćmy do funkcji addToCart (punkt 10). Jedna z początkowych linii tej funkcji brzmi „value.value = (value.value).replace('.',',')”. Tuż pod nią wklej poniższe linie kodu:

a w wyszukanej przed chwilą linii, na jej końcu dodaj średnik (jeśli go nie ma).

14. Wyszukaj linię „if ($(’input[name=”basic-unit-ratio”]').index() >= 0) {„. Tuż nad nią wklej:

15. W pliku js/layout1.js Wyszukaj linię „recalculate: function (itemNr, itemQty) {„. Tuż nad nią znajduje się linia „},”. Tuż nad nią wklej:

16. Wyszukaj linię „$(’body').on(’click', '.js-change-value', function (e) {„. Pod nią znajduje się linia „cartFunctions.orderChangeValue(e);”. Tuż pod nią wklej tę samą linię co w punkcie poprzednim.

17. Wyszukaj linię „$(’body').on(’change', '.js-value', function (e) {„. Pod nią znajduje się linia „cartFunctions.orderChangeValue(e);”. Tuż pod nią wklej tę samą linię co w punkcie poprzednim.

7. Dodanie tłumaczeń

Nowy nagłówek wymaga zmiany w tłumaczeniach. Otwieramy Panel Administracyjny -> Wygląd sklepu -> Ustawienia. Wybieramy własciwy szablon i klikamy zakładkę „Tłumaczenia”. Dodajemy nowe tłumaczenie:
Id: SeeAllCategories
Tekst: Zobacz wszystkie kategorie

8. Dodanie opcji zmiany stylu kategorii (kompaktowy lub wygodny)

Domyślnym sposobem prezentacji kategorii w nowym nagłówku jest wygodny. Pokazuje on mniej kategorii bez przewijania, ale za to odstępny między nimi są większe. Istnieje także opcja trybu kompaktowego. Możemy w prosty sposób dodać opcję przełączania między trybami w Panelu Administracyjnym. Aby to zrobić, otwórz plik __settings.liquid. Pod jedną z pierwszych linii kodu („{% when '1′ %}”) wklej poniższe linie kodu:

Powyżej dodane zostały tłumaczenia polskie wyboru opcji. Teraz należy dodać angielskie. W tym celu wyszukaj linię „{% else %}” i poniższe linie wklej tuż pod wyszukaną przed chwilą:

W tym samym pliku poniżej znajduje się cały ciąg pól oznaczonych jako:

Łatwo je rozpoznać, ponieważ ich struktura jest niemal podobna, różnią się tylko poszczególnymi opcjami i tłumaczeniami. Pomiędzy sekcjami, w dowolnym miejscu (ale nie w środku innej sekcji!) wklej ten kod:

Teraz otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia, wybierz odpowiedni szablon i zjedź nieco niżej. Znajdziesz tam dodaną przed chwilą opcję wyboru. Wybierz opcję, która Ci odpowiada i zapisz. Gdy zechcesz zmienić ustawienia po czasie, nie będzie z tym żadnego problemu.
To już wszystkie zmiany, jakie należy wprowadzić, aby korzystać z nowej wersji nagłówka.

Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę „Więcej” (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.

Czy ten artykuł był pomocny?