Edytor menu kategorii

🟠 Każdy szablon posiada wbudowane menu kategorii, które jest dynamicznie generowane na podstawie skonfigurowanego drzewa kategorii w zakładce Asortyment -> Kategorie -> Menu kategorii. Możesz jednak zastąpić to automatycznie generowane menu – własnym, spersonalizowanym. Takie menu może zawierać nie tylko drzewo kategorii, ale także linki do stron informacyjnych, wpisów na blogu czy bezpośrednie odnośniki do produktów.

🟠 Aby rozpocząć edycję własnego menu kategorii w panelu administratora, należy:

• Wejść w zakładkę Wygląd i treści (1) w panelu administracyjnym.
• Następnie kliknąć na Edytor menu (2).
• Kliknij przycisk Edytuj (3) obok nazwy „Kategorie”

Edycja menu kategorii

🟠 W edytorze menu dostępne są różne elementy, które można dodawać, takie jak:

• Drzewo kategorii:  Znacznik generuje domyślne drzewo kategorii. Jeśli chcesz spersonalizować własne drzewko kategorii, nie dodawaj tego elementu.
• Link: Tworzenie własnych linków prowadzących do wybranych stron na stronie.
  
• Strony informacyjne: Linki prowadzące do stron informacyjnych istniejących w sklepie.
  
• Blog: Linki prowadzące do strony głównej lub wpisów bloga w sklepie. Tagi: linki prowadzące do istniejących tagów w sklepie.
  
• Produkty: Możliwe wyszukanie produktu w sklepie po ID lub po nazwie
  
• Kategorie: Możliwość zaznaczania i dodania masowej ilości kategorii.
  
• Producenci: Możliwość dodania strony głównej producentów jak również dodania tylko konkretnych.
  

🟠 Dodatkowe opcje edycji:

Podczas dodawania linków, dostępne są dodatkowe opcje:

1. Klasy CSS (opcja):
   • Pozwala na przypisanie własnych klas CSS do linku, dzięki czemu można go stylizować zgodnie z potrzebami.
   • Przykład: Jeśli chcesz, aby link miał inny kolor, możesz przypisać mu klasę „custom-link”. W pliku CSS zdefiniujesz odpowiedni wygląd dla tej klasy.
   • Przykład użycia: class="custom-link"
2. Atrybut rel (opcja):
   • Ten atrybut określa relację między stroną linkującą a stroną docelową. Można tu ustawić różne wartości, jak np. „nofollow”, aby powiedzieć wyszukiwarkom, by nie śledziły tego linku.
   • Przykład: rel="nofollow" oznacza, że wyszukiwarki nie powinny śledzić tego linku.
3. Atrybut title (opcja):
   • Pozwala na dodanie tytułu linku, który będzie wyświetlany jako dymek po najechaniu kursorem na link.
   • Przykład: title="Kliknij tutaj, aby zobaczyć więcej" – po najechaniu myszką na link, użytkownik zobaczy ten komunikat.
4. Otwórz odnośnik w nowym oknie:
   • Zaznaczenie tej opcji powoduje, że link otworzy się w nowej karcie przeglądarki.

Podmiana menu kategorii w szablonie (jeśli Twój szablon nie posiada już zainstalowanego)

🟠 Aby podmienić domyślne menu kategorii w szablonie:

1. Skopiowanie nowego znacznika:
   • Znacznik dla nowego menu kategorii to: {#renderMenu:kategorie#}
2. Edytowanie szablonu w edytorze:
   • Przejdź do zakładki Wygląd i treści → Edytor szablonów → Elementy strony i wybierz szablon F12.
3. Wklejenie nowego znacznika:
   • W edycji szablonu F12, wklej nowy znacznik {#renderMenu:kategorie#}.
4. Ukrycie domyślnego menu kategorii
   • Zakomentuj stary znacznik {#KATEGORIE_LISTA#}, który generuje automatyczne menu kategorii, aby podmienić go na nowe, spersonalizowane menu.
     Jeśli z jakiegoś powodu będziesz chciał zrezygnować z własnego menu, możesz ukryć / usunąć znacznik {#renderMenu:kategorie#} oraz usunąć komentarz dla znacznika {#KATEGORIE_LISTA#}.  Po takiej zmianie znowu wyświetli się domyślne menu kategorii.
     
5. Podmień skrypt: script type=”text/javascript. Przeważnie skrypt znajdować się będzie w linii 16
   Skopiuj cały skrypt:

   
   <script type="text/javascript">
   $(document).ready(function(){
       $('.main-menu .menu__ul--main').slicknav({
           prependTo:'#mobileMenu',
           label: '{#@Kategorie#}',
           allowParentLinks: true
       });
       $(".link-mobile").click(function(){ 
           $("#mySidenav, #mySidenav-bg").addClass("active"); 
           $("body").addClass("nobar"); 
       });
       $("#link-mobile-close, #mySidenav-bg").click(function(){ 
           $("#mySidenav, #mySidenav-bg").removeClass("active"); 
           $("body").removeClass("nobar"); 
       });
   });
   </script>
   

   oraz wklej/podmień :

Sprawdzenie wyświetlania menu kategorii po zmianie

🟠 Po dokonaniu zmiany w szablonie warto wyczyścić cache sklepu, aby zobaczyć wprowadzone zmiany na żywo. 

Następnie sprawdź, jak Twoje nowe menu prezentuje się w sklepie na urządzeniach desktop jak również urządzeniach mobilnych. W razie potrzeby wprowadzaj modyfikacje, korzystając z intuicyjnego edytora.