Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz

Nowoczesne dolne menu nawigacji w wersji mobilnej w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby w wersji mobilnej posiadał nowoczesne dolne menu nawigacji.

Wskazówka
Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!
Wskazówka
Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ' „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Dodanie kodu dolnego menu

1. Pierwszym krokiem jest dodanie pliku z kodem dolnego menu. W tym celu w plikach szablonu otwórz katalog partials a w nim utwórz plik bottom-menu.html. Wklej do niego poniższy kod:

Dodanie tłumaczeń

Następnie należy dodać tłumaczenia. W tym celu otwórz Panel Administracyjny, a w nim odpowiednio Wygląd sklepu -> Ustawienia -> zakładka Tłumaczenia. Aby dodać nowe tłumaczenia, kliknij przycisk Dodaj, podaj odpowiednie Id, Tekst i zatwierdź przyciskiem Dodaj. Lista tłumaczeń do wprowadzenia (Id – Tekst):
1. Start – Start
2. SearchInShop – Szukaj w sklepie
3. Account – Konto

Wskazówka
Uważaj, aby przy kopiowaniu Id nie znalazła się żadna spacja przed ani po Id, w przeciwnym wypadku tłumaczenie nie wyświetli się w sposób poprawny!

Ustawienie wyświetlania etykiet w Panelu Administracyjnym

Dolne menu obsługuje ustawienie wyświetlania etykiet. Można je wyświetlać lub nie (wtedy zostają same ikonki). Aby wszystko działało poprawnie, otwórz plik __settings.liquid.
Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css. Wyszukaj linię o treści {% when '1′ %}. Pod nią wklej ten kod:

W tym samym pliku wyszukaj linię z frazą {% else %}. Pod nią wklej ten kod:

Poniżej znajdują się sekcje kodu do ustawień. Każda sekcja zaczyna się od <section> a kończy się </section>. Poniższy kod wklej tuż pod sekcją (czyli pod jej tagiem </section>), której kolejna linijka zawiera frazę productListType

Wskazówka
Po dodaniu niniejszego kodu, koniecznie otwórz zakładkę Wygląd sklepu -> Ustawienia w Twoim Panelu Administracyjnym, i wybierz „TAK” lub „NIE” przy nowo dodanej opcji włączania/wyłączania wyświetlania etykiet w dolnym menu!

Dodanie kodu odpowiedzialnego za wygląd dolnego menu

Kolejny krok to dodanie kodu odpowiedzialnego za wygląd dolnego menu. W tym celu otwórz katalog css i wklej poniższy kod na końcu pliku layout.css

Dodanie funkcji

Następnie należy dodać odpowiednie funkcje do plików w katalogu js. W tym celu otwórz wspomniany przed chwilą katalog, a w nim otwórz plik layout0.js

1. Wyszukaj linię z frazą $(’body').toggleClass(’noscroll');. Kolejna linia pod nią zawiera znak }. Pod nią wklej następujący kod:

2. Wyszukaj linię z frazą closePopup: function (e) {. Tuż nad nią wklej poniższy kod:

3. Modyfikacja funkcji dodawania i usuwania przedmiotów z listy ulubionych. Wyszukaj frazę productWishListAdd: function (e) {. Należy usunąć całą funkcję (od wyszukanej linijki włącznie, do najbliższej linijki o treści }, (ok. 13 linijek). W ich miejsce wklej ten kod:

Pod spodem znajduje się linijka o treści productWishListRemove: function (e) {. Usuń treść tej funkcji analogicznie jak poprzednio (do najbliższej linii o treści }, – ok. 13 linijek). Wklej w to miejsce następujący kod:

4. Wyszukaj linię z frazą $(e.currentTarget).parents('.inputs-container-js').find('.enterKeyTrigger-js').trigger(’click');. Pod nią będą dwie linie, pierwsza o treści } a druga o treści });. Pod nimi wklej poniższy kod:

5.Wyszukaj linię z frazą updateProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

6. Wyszukaj linię z frazą incrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

7. Wyszukaj linię z frazą decrementProductsInCart: function () {. Kilka linii poniżej będzie linia z frazą $('.incrementProductsInCart-js').text(newValue);. Wklej tuż pod nią następujący kod:

8. W pliku layout1.js wyszukaj linię productWishListDelete: function (e) {. Pod nią znajduje się linia z kodem app.post(e, customerProfile.currentTabTemplateUpdate, 'wish-list');. Pod tą linią wklej poniższy kod:

Modyfikacja stopki – obie wersje stopki

Kolejny krok to modyfikacja pliku ze stopką, pozwalająca na wyświetlanie dolnego menu. Aby to zrobić, otwórz katalogi elements -> footer. W środku znajdziesz jeden plik .html, o nazwie footer-1.html albo footer-2.html. Otwórz plik, i na samym jego końcu wklej tę linię:

Uwaga! Jeśli stopka w Twoim szablonie Topaz jest w wersji 2 (w powyższym katalogu posiadasz plik footer-2.html), to konieczne jest dodanie jednej zmiany w wyglądzie stopki. Otwórz katalog css a w nim plik layout-m.css i doklej na jego końcu poniższy kod:

Modyfikacja przycisku powrotu na górę strony

W pliku layout.css wyszukaj frazę {.go-to-top__btn-js{width:50px;height:50px;bottom:20px}}. Powinna znajdować się pod koniec jednej z linii/jednego z bloków kodu. W znalezionej frazie zamień wartość przy bottom z 20px na 60px. Dzięki temu przycisk odpowiedzialny za powrót na górę strony nie będzie zasłaniał dolnego menu.

Modyfikacja profilu Klienta

Następnie otwórz katalog css a w nim plik layout.css. Wyszukaj duży blok kodu rozpoczynający się od .customer{position:relative}. Usuń cały blok, po czym wklej w jego miejscu następujący:

W tym samym katalogu otwórz plik layout-m.css. Wyszukaj blok kodu z frazą .hide-on-mobile-order. Usuń go i wklej w jego miejsce następujący kod:

Kolejnym krokiem jest otwarcie pliku static-elements -> customer-profile -> customer-profile.html. Kilka linii przed końcem pliku znajduje się linia z frazą </nav>. Tuż nad nią (a przed linią z frazą </ul>) wstaw poniższy kod:

Inne zmiany

Otwórz plik layout1.js. Wyszukaj linię z frazą var mainSection = $(’main');. Tuż pod nią wklej poniższy kod:

Następnie w tym samym pliku wyszukaj linijkę mainSection.on(’click', '.customer__menuActivate-js', customerProfile.showCustomerProfileMenu); i tuż nad nią wklej:

Otwórz plik css -> layout.css. Wyszukaj .popup-dialog.after-adding-to-cart-popup{z-index:12;bottom:0;top:0;right:0;left:0;margin:auto;position:fixed;padding:30px;box-sizing:border-box}. Zamień liczbę 12 przy z-index na 101.

Modyfikacja nagłówków – obie wersje nagłówka

Na koniec należy zmodyfikować wygląd nagłówków. Aby sprawdzić, którą wersję nagłówka posiadasz, wejdź do katalogu elements -> header. Jeśli w środku znajduje się plik header-1.html to posiadasz wersję 1. Jeśli header-2.html to wersję 2. W zależności od posiadanej wersji, wykonaj odpowiednie instrukcje (kod dla obu wersji będzie się różnić).

Jeśli posiadasz nagłówek w wersji 1:
Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-1.html, usuń jego zawartość i wklej następujący kod:

Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on(’click', '.openCategoryMenu-js', function() { i wstaw tuż nad nią kod:

Jeśli posiadasz nagłówek w wersji 2:
Otwórz katalog css a w nim plik layout-m.css. W nim znajduje się bardzo długa linia, w której treści pojawia się fraza headerSection. Usuń całą tę linię i wklej w jej miejsce poniższy kod:

W tym samym katalogu otwórz plik layout.css. Znajdź cały blok kodu, w którym występują frazy headerSection. Usuń go i wklej w jego miejsce następujący kod:

Jest to konieczne, ponieważ zmian w nagłówku było zbyt wiele, by wyszukiwać i zmieniać pojedyncze elementy. Podobnie należy zrobić z kodem nagłówka. Otwórz katalog elements -> header a następnie otwórz znajdujący się w nim plik header-2.html, usuń jego zawartość i wklej następujący kod:

Następnie otwórz katalog js a w nim plik layout0.js. Wyszukaj linię pageHeader.on(’click', '.openCategoryMenu-js', function() { i wstaw tuż nad nią kod:

W tym samym pliku wyszukaj linię z frazą $('.go-to-top__btn-js').click(function(){. Tuż pod nią wklej ten kod:

Czy ten artykuł był pomocny?