Jak dodać zagnieżdżoną nawigację do Shopify Themes
W tym artykule omówimy, jak wdrożyć w pełni zarządzany wielopoziomowy system nawigacyjny w ramach Shopify motyw.
Kupuj motywy Ciekły , elastyczny i potężny język szablonów, aby wyprowadzać dane ze sklepu do szablonu. Jeśli nie jesteś zaznajomiony z Liquidem, a ogólnie z tematem Shopify, to polecam sprawdzenie urzędnika Zoptymalizuj dokumentację motywu .
Pierwsze kroki
Jeśli kiedykolwiek pracowałeś z platformami takimi jak WordPress, być może znasz interfejsy administracyjne, które umożliwiają tworzenie wielopoziomowej nawigacji. Kiedy dane wyjściowe są w pliku szablonu, często powodują one zagnieżdżoną listę nieuporządkowaną, która za pomocą CSS pozwala na użycie różnych wzorów. Na przykład rozwijane menu lub menu na pasku bocznym, które odsłania bardziej szczegółowe filtrowanie po kliknięciu lub przewróceniu menu najwyższego poziomu. Wszystkie podejścia dają nam możliwość oferowania głębszej nawigacji w naszych witrynach bez zbytniego komplikowania.
Przy pierwszej kontroli funkcji nawigacji w Shopify możesz pomyśleć, że nie oferuje nam tej możliwości. Jednak uzbrojeni w małą wiedzę na temat płynów możemy łatwo osiągnąć wielopoziomowe menu w naszych tematach. Korzystając z funkcji nawigacji, możemy zaoferować naszym klientom łatwy sposób zarządzania ich menu, jednocześnie dając nam, jako projektantom motywów, pożądane zagnieżdżone nieuporządkowane listy stylów CSS.
Naszym celem w tym samouczku jest utworzenie zagnieżdżonej, nieuporządkowanej listy, którą możemy w pełni kontrolować w obszarze administracyjnym Shopify i aby zmiany te znalazły odzwierciedlenie w naszym sklepie.
A oto wynik końcowy:
W przeciwieństwie do innych platform Shopify nie ma możliwości posiadania jednego "super menu", w którym możemy zagnieździć nasze pozycje w podmenu. Powiedział, że nie jest to skomplikowana procedura, aby to zadziałało. Podążając za prostą konwencją nazewnictwa możliwe jest generowanie wielopoziomowych struktur menu.
Jeśli chcesz kodować razem z samouczkiem, najprostszym sposobem na zrobienie tego jest zarejestrowanie się za darmo Zrób zakupy partnera zaloguj się i stwórz bezpłatny "sklep deweloperski". Są one w pełni funkcjonalne i pozwalają wypróbować swój motyw przed przekazaniem go klientowi lub uruchomieniu własnego sklepu.
Możesz wypróbować przykłady kodu w dowolnym szablonie w folderze tematów "szablony" lub alternatywnie poleciłabym użyć domyślnego motywu pliku layout.liquid, ponieważ będzie to oznaczać, że Twój kod pojawi się domyślnie na każdej stronie.
Tworzenie menu
Zacznijmy od utworzenia nowego menu, naszego menu nadrzędnego, przechodząc do karty Nawigacja w administratorze Shopify. Aby utworzyć menu, musimy otworzyć interfejs administracyjny Shopify i przejść do zakładki "Nawigacja" po lewej stronie.
Wszystkie sklepy mają predefiniowane domyślne menu o nazwie "Menu główne". Aby dodać elementy do listy, po prostu kliknij przycisk "dodaj kolejny link" i nadaj nowemu elementowi "nazwę linku" i miejsce docelowe. Menu rozwijane wyboru pozwala łatwo łączyć się z sekcjami wewnętrznymi, takimi jak konkretny produkt lub kolekcja. Alternatywnie możesz wprowadzić własny adres URL (wewnętrzny lub zewnętrzny), wybierając "adres internetowy" z opcji.
Łatwo jest tworzyć i edytować menu w administratorze Shopify.
Kiedy już to zrobimy, możemy zacząć zastanawiać się nad płynnym kodem, który będziemy musieli wypisać w naszym motywie.
Aby wyświetlić menu w naszym pliku motywu, musimy znać "uchwyt" menu. Uchwyty są unikalnymi identyfikatorami wewnątrz Shopify w przypadku produktów, kolekcji, list linków (termin używany w menu w Shopify themes) i stron. Są to ogólnie bezpieczne wersje URL nazwy lub tytułu produktu. Na przykład Menu główne spowoduje uchwyt menu głównego . Podczas gdy są generowane automatycznie, możesz je zmienić, jeśli chcesz, korzystając z interfejsu administratora.
Nasze domyślne menu główne zawiera link do kolekcji Coffee Cups.
Nawigacja na jednym poziomie
Zacznijmy od wyprowadzenia wszystkich elementów z naszego "menu głównego". Aby to zrobić, możemy użyć prostej "pętli for" do wyprowadzenia kolejno wszystkich elementów listy linków, oto jak:
{% for link in linklists.main-menu.links %}- http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Filtr cieczy. Filtr jest funkcją, która zmienia wartość wejściową w określony sposób. Jako przykład przyjrzyjmy się filtrowi upcase :
{{ 'Keir Whitaker' | upcase }}
Kiedy wynik ten będzie renderował KEIR WHITAKER w naszym pliku HTML.
Filtry pobierają dane wejściowe, w tym przykładzie moje nazwisko jako ciąg tekstowy i odpowiednio go zmień. W przypadku filtra upcase przekształca wynik na wielkie litery. W powyższym przykładzie filtr ucieczki przejmuje dane wejściowe adresu URL i tytułu oraz wymyka się tekstowi i adresowi URL, aby były poprawnie wyprowadzane.
Nawigacja na wielu poziomach
Teraz mamy podstawy pod naszą kontrolą, potrzebujemy sposobu na stworzenie relacji z naszym dodatkowym podmenu. Na szczęście nie jest to takie trudne, wystarczy kilka linii kodu Liquid. Najpierw musimy wrócić do administratora Shopify i stworzyć nasze podmenu.
Potrzebujemy sposobu na powiązanie naszych dwóch menu, aby nasz szablon wiedział, jak je realizować. Uchwyty przychodzą nam na ratunek jeszcze raz. Na początku nie jest to w 100% jasne, ale każde łącze oprócz samego menu ma unikalny uchwyt, do którego mamy dostęp.
Rzućmy okiem na przykład, tworząc podmenu z linku "Coffee Cups". Możemy spokojnie założyć, że nasza pozycja w menu o nazwie "Filiżanki do kawy" to automatyczny uchwyt "kubków na kawę". Naprawdę musisz tylko usunąć interpunkcję, zamieniając wielkie litery małymi literami i spacje małymi kreskami. Jeśli chcielibyśmy, aby ten element menu miał podmenu, po prostu upewniamy się, że nasze pod-menu ma również uchwyt "filiżanek do kawy". Warto zauważyć, że tytuł twojego menu może być dowolny, ważnym czynnikiem jest tutaj uchwyt.
Nasze pod-menu ma uchwyt filiżanek do kawy, dzięki czemu możemy połączyć nasze menu razem.
Teraz potrzebujemy trochę dodatkowego płynnego kodu, który pomoże nam wyprowadzić podmenu w naszym szablonie:
{% for link in linklists.main-menu.links %}- {{ sublink.url }}"> {{sublink.title | ucieczka }}
{% endfor%}
{% endif%} {% endfor%}
Przy pierwszej inspekcji może to być trochę zniechęcające. Przeszliśmy już większość z nich, więc przyjrzyjmy się nowemu kodowi, który wykonuje większość nowego dzieła dla nas:
{% if linklists[link.handle].links.size > 0 %}
Pojawia się po tym, jak link menu macierzystego jest wyprowadzany, ale przed zamknięciem pozycji listy
tag (linia 4 w naszym przykładzie kodu). "Instrukcja if" sprawdza, czy istnieje lista odnośników z takim samym uchwytem, jak nasz obecny element łącza i czy istnieje, aby sprawdzić, czy ma z nim powiązane elementy łącza. Jeśli odpowiedź brzmi "tak", szablon otwiera nową nieuporządkowaną listę i wyświetla każdą pozycję podmenu jako pozycję listy, jak w naszym pierwszym przykładzie. Jeśli odpowiedź brzmi "nie", to szablon wykonuje następny element menu rodzica. 
Końcowym wynikiem naszego kodu jest zagnieżdżona nieuporządkowana lista pozycji menu.
Ta kontrola istnienia podmenu z tym samym uchwytem występuje przy każdej iteracji menu nadrzędnego. Zauważysz również, że nasze "instrukcje if" są zamknięte za pomocą Liquid code {% end for%} i naszej "for loop" z {% end for%} . To ostrzeże szablon, aby przejść, gdy te zakończyły swoją pracę.
Zawijanie
Przy odrobinie planowania bardzo łatwo jest tworzyć menu, które są od siebie zależne. Oczywiście nie musisz ich wyprowadzać razem - możesz, jeśli chcesz wydrukować podmenu niezależnie w dowolnym miejscu szablonu.
Mam nadzieję, że dało ci to wgląd w łatwość tworzenia wszechstronnych systemów menu w motywach Shopify.