Opublikowane w przez Grzegorz Rusin

Rozwijane menu w module bocznym – poradnik Shoper

shoper_logo kopiaDzisiejszy poradnik poświęcam modułowi menu kategorii. Standardowym rozwiązaniem dostępnym w systemie Shoper 5 jest (na dzień dzisiejszy) lista kategorii. Otwarcie podkategorii następuje po kliknięciu w daną kategorię. Takie rozwiązanie ma swoje plusy ale jak to zwykle bywa nie zawsze wystarcza naszym potrzebą. W poniższym wpisie zaprezentuję wam jak w prosty sposób przebudować boks kategorii tak by utworzyć z niego menu rozwijane (w tym przypadku w prawo).

Zmiany tu prezentowane wymagają edycji plików .tpl standardowego szablonu więc przypominam, że musicie później ręcznie aktualizować te pliki.

Zacznijmy zatem od podstaw.

Ze względu na brak możliwości dopisywania własnych dodatków php musimy radzić sobie w inny sposób. W Shoper 5 dostępne jest już rozwijane menu kategorii, niestety jedynie w nagłówku. Powstaje zatem pytanie. Jak użyć menu z nagłówka w boksie menu kategorii?

Rozwiązanie jest dość proste.

Przechodzimy do działu zarządzania naszą skórką (przypominam o potrzebie pracy na kopii szablonu standardowego).

Krok 1. W dziale zarządzania linkami nagłówka dodajemy [wszystkie kategorie].

Krok 2. otwieramy zakładkę edycja zaawansowana i szukamy pliku body_head.tpl. Następnie szukamy w nim następującego kodu (i kopiujemy go oczywiście):

{include file='headerlinks.tpl' force_include_cache='1' force_include_cache_tags='Logic_SkinHeaderLinkList,Logic_SkinHeaderLink,Logic_CategoryList,Logic_Category'}

Krok 3. następnie otwieramy plik odpowiedzialny za boks kategorii Menu/box.tpl i wymieniamy treść diva o klasie „innerbox” na skopiowany kod. Zapisujemy zmiany.

Jak podglądniecie teraz to zobaczycie, że w naszym boksie menu kategorii wyświetla się całe menu nagłówka. My oczywiście chcemy samą sekcje z menu więc potrzebujemy pokombinować odrobinę z kodem CSS:

Ja stworzyłem taki:

#box_menu .pagewidth {width:auto;}
#box_menu .innerbox {padding: 5px; height: 200px;}
#box_menu .innerbox .leftside, #box_menu .innerbox .rightside{z-index: 1 !important;}
#box_menu .menu, #box_menu .menu .innermenu {background: none transparent;}
#box_menu .menu .innermenu .leftside, .main #box_menu .menu .innermenu .rightside {display:none;}
#box_menu .menu ul {margin:0;}
#box_menu .menu ul li {width:100%;display:none;}
#box_menu .menu .innermenu li.parent .submenu.level1 {margin-top:0;height:180px;}
#box_menu .menu .innermenu li.parent {display:block;}
#box_menu .menu .innermenu li.parent h3 {display:none;}
#box_menu .menu .innermenu li.parent .level1 {display:block;border:0;}
#box_menu .menu .innermenu li.parent ul li {display:block;line-height: 28px;height: 28px;min-width:155px;padding:0;}
#box_menu .menu .innermenu li.parent ul li h3 {display:block;padding: 0;}
#box_menu .menu .innermenu li.parent .submenu > ul{padding: 0;box-shadow: 0 0 0 #666;-moz-box-shadow: 0 0 0 #666;-webkit-box-shadow: 0 0 0 #666;width: 190px;z-index: 999;}
#box_menu .menu .innermenu li.parent ul li h3 a{line-height: 28px;color: #000;padding: 5px 10px;}
#box_menu .menu li h3 a img {display:none !important;}
#box_menu .menu li h3 a.mainlevel span {}
#box_menu .menu .innermenu li.parent .level1 .submenu{z-index: 999;}

 

Upraszczając sens kodu napisze tylko tyle, że ukrywam wszystkie linki menu poza linkiem menu oraz wyświetlam pierwsze zagłębienie menu (które wyświetli kategorie główne).

Najważniejszym z tych kodów jest #box_menu .innerbox oraz #box_menu .menu .innermenu li.parent .submenu.level1 gdzie znalazł się parametr height określający wysokość całego menu (pamiętajcie by dopasować tą wartość do waszych potrzeb).

Całość możecie oczywiście dowolnie ostylować.

 

 

Uprzedzając pytania 🙂 oczywiście o dodaniu menu rozwijanego w boksie kategorii możecie ukryć menu kategorii w nagłówku. Ważne byście go nie wyłączali w dziale zarządzania linkami.

Kod ukrycia linku „Menu” to :

.menu .innermenu li.parent {
display: none;
}

Plik do pobrania z kodem: kliknij na ten link

Możecie również zerknąć na przykład na sklep.szablonsklep.pl

27 odpowiedzi do “Rozwijane menu w module bocznym – poradnik Shoper”

    1. W panelu administracji sklepem w dziale Zawartość/Nagłówek i stopka proszę dodać link do nagłówka. Link nazywa się [wszystkie kategorie].
      Po dodaniu takiego linku standardowo w nagłówku pojawi się link „Menu” pon najechaniu na ten link menu się rozwinie. Nazwę „Menu” można oczywiście zmienić poprzez tzw. frazy językowe w dziale zarządzania językami.

  3. witam, czy jest możliwość wyłączenia podpisów po najechaniu myszką. Np najeżdżając na pozycję Oprogramowanie wyświetla nam się oprogramowanie. Na necie wygrzebałem ze ma to związek ze znacznikiem alt. Ale czy jest możliwość wyłączenia wszystkich alt’ów za pomocą np CSS?

  4. Witam,

    Pytanie trochę nie do tematu, ale czy jest możliwość dodać do slidera na stronie głównej obramowania? Próbowałem kombinować z funkcją border, ale nie wiem gdzie ją dodać.
    Oraczy czy można jakoś usunąć, wyświetlanie produktów na głównej stronie pod sliderem? Tak aby były został tam sam slider, ew. jakieś inne dodane moduły?
    Pozdrawiam

    1. aby produkty nie wyświetlały się na stronie głównej proszę nie ustawiać ich jako priorytety wówczas nie będzie się miało co wyświetlić.
      Jeżeli chodzi o ramki to z mojego doświadczenia wynika, że najbardziej efektywne jest zrobienie ramki graficznie przy tworzeni danego banera. Teoretycznie można wstawić ramkę całego modułu ze slajderem poprzez ustawienie stylu dla #box_slider.

  5. Zrobiłem to menu i niestety mam problem… Na niektórych stronach po prostu się nie wyświetla 🙁 W kodzie strony nawet nie ma tego div-a, w którym ma być to menu.
    Najciekawsze jest to, że na tej samej stronie raz się menu pojawia, a raz nie. Proszę o pomoc.

    1. Niestety nie jestem w stanie ocenić co może Panu źle działać od strony frontendu (z punktu widzenia użytkownika sklepu) widać już wygenerowany kod. Proszę sprawdzić czy gdzieś nie popełnił Pan błędu w kodzie. Może jakiś znacznik nie jest domknięty albo coś w tym stylu. We wpisie wspominałem także by nie usuwać całego menu w nagłówku, proszę sprawdzić czy gdzieś tam nie wstawił Pan niepotrzebnego kodu…

  6. Kompletnie tego nie rozumiem… sprawdziłem wszystko i wydaje się, że kod jest poprawny. Czy zdarzyło się Panu, że menu na mojej stronie się nie wyświetliło? Proszę spróbować przejść ze strony tendina.pl/firanki-gotowe na stronę tendina.pl/firanki-do-salonu i jeszcze raz na tą samą stronę. U mnie w 7/10 przypadkach menu się nie pojawia. Wtedy proszę zerknąć w źródło strony i zobaczy Pan, że brakuje , ale nie mogę pojąć dlaczego…

  14. Mam jeszcze małe pytanie. Co mam zrobić aby na stronie głównej produkty wyświetlały się bez opisów, a po wejściu na listę produktów produkty były widoczne wraz z opisami.
    Pozdrawiam serdecznie

Dodaj komentarz