Przyklejone nagłówki w szablonie Topaz

W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować wariant 1 lub 2 nagłówka w Topazie, by były one „przyklejonymi” nagłówkami podczas przewijania strony.

Instrukcje dla poszczególnych wariantów nagłówków
„Przyklejenie” nagłówka sprawia, że przy przewijaniu strony jest on na stałe przyczepiony do górnej części ekranu, tak, by dostęp do menu był wygodny z każdego miejsca na stronie.

Wskazówka
W wersji 2021 powstał również trzeci wariant nagłówka. „Przyklejenie” tego nagłówka jest już zaimplementowane i nie trzeba dokonywać żadnych modyfikacji kodu.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

Modyfikacje dla pierwszego wariantu nagłówka

Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-1.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka.
Kod w powyższym pliku podmień na następujący:

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}};” a kończący się na „.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:

W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 767px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:

Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}”. Usuń ją i wklej w jej miejsce następującą:

Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:

Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll', function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:

Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany.

To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze pierwszy wariant nagłówka. Kolejne kroki instrukcji są przygotowane z myślą o drugim wariancie 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.

Modyfikacje dla drugiego wariantu nagłówka

Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-2.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka.
Kod w powyższym pliku podmień na następujący:

Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}}” a kończący się na „headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:

W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 768px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:

Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}”. Usuń ją i wklej w jej miejsce następującą:

Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:

Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll', function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:

Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany.

To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze wariant drugi nagłówka. Instrukcja dla wariantu pierwszego znajduje się na początku niniejszego artykułu.

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?