Drzewko kategorii - Rozwinięcie do poziomu aktywnej kategorii

[michal_c]

Witajcie,

Mam problem z ustawieniem docelowego wyświetlania drzewka kategorii.

Zależy mi na tym, żeby menu boczne (drzewko kategorii) rozwijało się do poziomu aktywnej kategorii.

Czyli po przechodzeniu w głąb drzewka, żeby zostawały rozwinięte interesujące nas podkategorie (tu np. z Blatami, szafami itp).

 

 

Ustawiłem już tworzenie odpowiedniej klasy dla aktywnej kategorii (podświetla się na inny kolor). Jednak nie mogę poradzić sobie z powyższym problemem. 

Wiem, że w starszych wersjach presty można było wyłączyć "Dynamicznie" w ustawieniach modułu i temat był załatwiony. Jednak w 1.7 nie widzę takiej opcji. 

Pomocy

[krzysiek_web]

To już edycja pliku tpl modułu.

Moduł ps_categorytree w wybranym szablonie. Otwieramy ps_categorytree.tpl.

Tam należy dodać jakiś wyjątek sprawdzający, jest kilka możliwości ale tak na szybko to można sprawdzać przecież obecny link gdzie jesteśmy z tym w drzewku i jeżeli jest taki sam to dodawać do collapse wartość in.

{if $node.link == $urls.current_url} in{/if}

a finalnie byłoby to co niżej no chyba że twój moduł jest inaczej przebudowany:

{function name="categories" nodes=[] depth=0}
  {strip}
    {if $nodes|count}
      <ul class="category-sub-menu">
        {foreach from=$nodes item=node}
          <li data-depth="{$depth}">
            {if $depth===0}
              <a href="{$node.link}">{$node.name}</a>
              {if $node.children}
                <div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
                  <i class="material-icons add">&#xE145;</i>
                  <i class="material-icons remove">&#xE15B;</i>
                </div>
                <div class="collapse{if $node.link == $urls.current_url} in{/if}" id="exCollapsingNavbar{$node.id}">
                  {categories nodes=$node.children depth=$depth+1}
                </div>
              {/if}
            {else}
              <a class="category-sub-link" href="{$node.link}">{$node.name}</a>
              {if $node.children}
                <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
                  <i class="material-icons arrow-right">&#xE315;</i>
                  <i class="material-icons arrow-down">&#xE313;</i>
                </span>
                <div class="collapse" id="exCollapsingNavbar{$node.id}">
                  {categories nodes=$node.children depth=$depth+1}
                </div>
              {/if}
            {/if}
          </li>
        {/foreach}
      </ul>
    {/if}
  {/strip}
{/function}

 

DEMO:

 

PS. W ustawieniach modułu musi być zaznaczona opcja aby pokazywało wszystkie kategorie.

Można jeszcze coś dodać aby podkategorie podkategorii były rozwinięte ale to można podziałać we własnym zakresie. Tak samo jak mój przykład można wybrać inne warunki do porównania.

 

PS2. Zerknij jeszcze na ikonkę plusika - trzeba ją zmodyfikować.

Edited January 19, 2023 by krzysiek_web
PS2 info (see edit history)

[krzysiek_web]

Ustawienia przy których testowałem:

 

Takie ustawienie działa, więcej nie testowałem.

Twój wyjątek w kodzie też pewnie działałby ok.

[krzysiek_web]

To działa do głównych kategorii pokazując podkategorie czyli 1 i 2 poziom - pisałem o tym w poście na końcu. Teraz mówisz o poziomie 3. Przetestuj i dodaj in tak samo ale za warunkiem else.

[krzysiek_web]

Jak ustawisz opcję:

To jest aktualne drzewko dla danej kategorii.

[michal_c]

Jasne, wtedy przechodzi "Głębiej".

 

Problem w tym, że zależy mi na tym, żeby cały czas były widoczne pogrubione kategorie z wcześniejszego screena.

Podsumowując, drzewko na każdej stronie powinno wyglądać tak samo, a jedyne różnice to pod pogrubioną nazwą kategorii rozwinięta lista podkategorii z podświetloną wybraną.

Czyli np. tak:

Podświetlenie aktywnej kategorii już mam załatwione.

Jedyny problem to to, że po wybraniu podkategorii - na nowej stronie otwiera się "zamknięte" drzewko.

[michal_c]

20 hours ago, krzysiek_web said:

PS. W ustawieniach modułu musi być zaznaczona opcja aby pokazywało wszystkie kategorie.

 

Dobrze myślę, że powinno być zaznaczone: Kategoria główna - Kategoria główna    ?

 

Na razie jeszcze nie działa (poszukam i może znajdę powód).

Moduł miał standardowy kod, poza kwestią podświetlania aktywnej kategorii (31 wiersz):

       <li data-depth="{$depth}" class="{if isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id}active_category{/if}">

 

Wielkie dzięki za pomoc.

[michal_c]

Mam dokładnie tak ustawione i nie działa (skasowałem czasowo te moje zmiany) 😒

Masz może pomysł gdzie szukać? (wiem, że to wróżenie z fusów, ale może wiesz które pliki warto przejżeć)

 

[krzysiek_web]

Czy klasa"in" jest podstawiana w kodzie jak zerkniesz w konsole?

[michal_c]

Ok, udało mi się dotrzeć do momentu, w którym wyświetla się tak jak chcemy w jednym przypadku (klasa jest podstawiana) - gdy wchodzimy w jedną z głównych kategorii.

 

Czyli przykładowo klikając w "Konfigurator mebli na wymiar" otwiera nam się ta kategoria z rozwiniętą listą (blaty itp).

Gdy wejdziemy w blaty, całość mamy znowu zwiniętą. Czyli wygląda na to, że podkategorie nie działają (jeśli dobrze rozumiem, dopiero głębiej nie powinny działać).

 

[michal_c]

Ok, pomyliłem się o jeden poziom 😇

Przetestuję i dam znać.