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.

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:

 

 

 

 

{{translations.Com_Categories}}

 

 

{% assign i = 0 -%} {% assign allCategoriesCounter = header.Nodes | Size -%} {% assign count = header.Nodes | Size | Minus: 1 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if count == i -%}
• {% else -%}
• {% endif -%} {% assign i = i | Plus: 1 -%}
  {{ category | A }}

  {% if categoriesSize > 0 -%} {% endif -%}

• {% endfor -%}

 

 

{% assign j = 0 -%} {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% assign j = j | Plus: 1 -%} {% if categoriesSize > 0 -%}

{% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%}

{{undercategory.Name}} {% if undercategory.Nodes -%} {% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} {{underundercategory.Name}} {% endif -%} {% endfor -%} {% endif -%}

{% endfor -%}

{{ translations.SeeAllCategories }}

 

{% endif -%} {% endfor -%}

 

 

{{translations.Hea_Pages}}

 

• • {{config.DefinedPages.About.Name}}

 

• • {{config.DefinedPages.Payment.Name}}

 

• • {{config.DefinedPages.Shipping.Name}}

 

• • {{config.DefinedPages.Terms.Name}}

 

 

 

 

{{translations.Lookbook}}

 

{{translations.Hea_Contact}}

 

 

{% if config.Shop.Contact.PhoneNo != ” -%}

{{config.Shop.Contact.PhoneNo}}

{% endif -%} {% if config.Shop.Contact.Email != ” -%}

{{config.Shop.Contact.Email}}

{% endif -%}

{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}

 

 

 

{{ translations.Prf_Language }} {% for language in config.Languages -%}

{{ language.Language }}

{% endfor -%}

 

{{ translations.Com_Currency }} {% for currency in config.Currencies -%}

{{ currency.Code }}

{% endfor -%}

 

 

 

 

 

 

 

 

{% assign name = 'menuBanner’ -%} {% assign banner = config.Banners[name] -%}

{% assign imagesNumber = banner.Images | Size -%} {% assign images = banner.Images -%} {% for img in images -%}

{% if img.Link != ” -%} {% endif -%}

 

{% if img.Heading != ” -%}

{{img.Heading}}

{% endif -%} {% if img.Text != ” -%}

{{img.Text}}

{% endif -%}

{% if img.Link != ” -%} {{translations.Check}} {% endif -%} {% if img.Link != ” -%} {% endif -%}

{% endfor -%} {% if imagesNumber == 0 %}

 

{{’css/img/img-placeholder.jpg’ | Img: ”, translations.DefaultImage}}

 

{% if header3 == true -%} 1118 x 534 {% else -%} 1920×680 {% endif -%}

 

{% endif %}

 

 

 

{% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}’ -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%}

{% endif -%} {% endif -%} {% endfor -%}

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.