Unterkategorien bei Klick auf Hauptkategorie anzeigen

Hallo,

ich habe die Kategorien aus dem Header in die Sidebar verschoben, da das für unsere Website passender erscheint. Das sieht momentan so aus:

Geht man nun in eine Kategorie oder eine Detailseite, sieht das so aus:

Zur Dokumentation wie ich das erreicht habe, hier die Änderungen im eigenen Theme:

1. Category Tree soll auch auf der Startseite angezeigt werden:

/application/views/CUSTOM_THEME/tpl/layout/sidebar.tpl
[{block name="sidebar_categoriestree"}]
  [{if $oView->getClassName() != 'start' && $oView->getClassName() != 'compare'}]
    ...

wurde zu

[{block name="sidebar_categoriestree"}]
  [{if $oView->getClassName() != 'compare'}]
    ...

Achtung: Sofern unter [i]Stammdaten -> Grundeinstellungen -> Einstellungen -> Shop Frontend[/I] keine aktive Kategorie gesetzt ist, wird auf der Startseite kein Kategoriebaum angezeigt. Also bitte nicht wundern. :wink:

2. Im Category Tree sollen immer alle Kategorien angezeigt werden, nicht nur die aktuelle Hauptkategorie:

/application/views/CUSTOM_THEME/tpl/widget/sidebar/categorytree.tpl
[{assign var="categories" value=$oxcmp_categories->getClickRoot() }]

wurde zu

[{assign var="categories" value=$oxcmp_categories}]

In der gleichen Template-Datei bauen wir gleich noch ein, dass ganz oben im Category Tree die Startseite des Shops verlinkt ist und diese auch hervorgehoben ist, wenn man dort ist:

<ul class="tree" id="tree">

wird um den ersten Listeneintrag (“Startseite”) ergänzt:

<ul class="tree" id="tree">
    <li [{if $oViewConf->getTopActionClassName() == 'start' }]class="active"[{/if}]><a href="[{$oViewConf->getHomeLink()}]">[{oxmultilang ident="HOME"}]</a></li>

3. Category Tree aus Header entfernen:

/application/views/CUSTOM_THEME/tpl/widget/header/categorylist.tpl
<ul id="navigation" class="sf-menu">
...
</ul>

Den Inhalt dieser Liste einfach auskommentieren:

<ul id="navigation" class="sf-menu">
[{*
...
*}]
</ul>

Wenn ich in /application/views/CUSTOM_THEME/tpl/layout/header.tpl die Navigation ausgeknipst habe, hat es mir das Layout zerpflückt, daher die etwas “unelegantere” Methode mit dem Auskommentieren.

In jedem Fall sind die Änderungen minimal und update-sicher. Dass der Category Tree auf der Startseite rechts und überall sonst links ist, finde ich eigentlich sehr ansehnlich: Die Startseite rückt klar die aktuellen Angebote in den Mittelpunkt, die Navigation ist dennoch leicht zu finden.

Jetzt mein eigentliches Anliegen:
Ich hätte gerne, dass im Kategoriebaum die Unterkategorien “aufklappen”, wenn man auf die Hauptkategorie klickt.

Im Moment ist es so, dass man direkt in die Hauptkategorie springt, wenn man darauf klickt und dort wird dann die aufgeklappten Unterkategorie(n) angezeigt.

Das ist wohl ziemlich sicher einfaches CSS, aber da habe ich schlicht und ergreifend nicht die leiseste Ahnung, was ich da machen muss. :frowning: :confused:

Ich vermute mal, dass das in der categorytree.tpl eingebaut werden muss. Die sieht bei mir nun so aus:

/application/views/CUSTOM_THEME/tpl/widget/sidebar/categorytree.tpl

[{if $oxcmp_categories }]
    [{assign var="categories" value=$oxcmp_categories}]
    [{assign var="act" value=$oxcmp_categories->getClickCat() }]
    [{if $categories }]
        [{assign var="deepLevel" value=$oView->getDeepLevel()}]
        <div class="categoryBox">
            <ul class="tree" id="tree">
            <li [{if $oViewConf->getTopActionClassName() == 'start' }]class="active"[{/if}]><a href="[{$oViewConf->getHomeLink()}]">[{oxmultilang ident="HOME"}]</a></li>

            [{defun name="tree" categories=$categories}]
                [{assign var="deepLevel" value=$deepLevel+1}]
                [{assign var="oContentCat" value=$oView->getContentCategory() }]
                [{foreach from=$categories item=_cat}]
                    [{if $_cat->getIsVisible() }]
                        [{* CMS category *}]
                        [{if $_cat->getContentCats() && $deepLevel > 1 }]
                            [{foreach from=$_cat->getContentCats() item=_oCont}]
                            <li class="[{if $oContentCat && $oContentCat->getId()==$_oCont->getId() }] active [{else}] end [{/if}]" >
                                <a href="[{$_oCont->getLink()}]"><i></i>[{ $_oCont->oxcontents__oxtitle->value }]</a>
                            </li>
                            [{/foreach}]
                        [{/if }]
                        [{* subcategories *}]
                        <li class="[{if !$oContentCat && $act && $act->getId()==$_cat->getId() }]active[{elseif $_cat->expanded}]exp[{/if}][{if !$_cat->hasVisibleSubCats}] end[{/if}]">
                            <a href="[{$_cat->getLink()}]"><i><span></span></i>[{$_cat->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($_cat->getNrOfArticles() > 0) }] ([{$_cat->getNrOfArticles()}])[{/if}]</a>
                            [{if $_cat->getSubCats() && $_cat->expanded}]
                                <ul>[{fun name="tree" categories=$_cat->getSubCats() }]</ul>
                            [{/if}]
                        </li>
                    [{/if}]
                [{/foreach}]
            [{/defun}]
            </ul>
            [{if $oView->showTags() }]
                 [{oxid_include_widget cl="oxwTagCloud" nocookie=1 noscript=1 }]
            [{/if}]
        </div>
    [{/if}]
[{/if}]

Wie bekomme ich da rein, dass die Unterkategorien aufgeklappt angezeigt werden, wenn man auf die Hauptkategorie klickt? Ich bin für jede Anregung/Hilfe dankbar!

Falls man den aktuellen Stand anklicken möchte: https://elektrotechnik-pflaesterer.de/shop

Hat niemand einen kleinen Tipp für mich? CSS ist leider ziemlich unbekanntes Gebiet für mich. :frowning:

[QUOTE=Phillinger;143863]Hat niemand einen kleinen Tipp für mich? CSS ist leider ziemlich unbekanntes Gebiet für mich. :([/QUOTE]

Wenn ich bspw. auf Mikrowelle klicke erscheinen in Deinem Shop die Unterkategorien. Vielleicht bekommst Du darum keine Antwort?

das ist keine reine css sache.

das ganze funktioniert technisch so:

menü mit menüpunkten (sichtbar) aufbauen, die unterkategorien sind dann unsichtbar (css: display:none;)

kat 1
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>kat 2
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>
kat 3
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>
dann kannst du mit einem kleinen javaschnipsel sagen, dass er den bereich (div) bei klick anzeigen soll.

ein enstsprechenden code schnipsel hab ich mal gepostet. in dem thread gings darum nur teile eines textes anzuzeigen und mit “mehr” aufklappen zu lassen. den kannste auch dafür verwenden!

[QUOTE=tarkka.ch;143868]Wenn ich bspw. auf Mikrowelle klicke erscheinen in Deinem Shop die Unterkategorien. Vielleicht bekommst Du darum keine Antwort?[/QUOTE]
Es geht darum, dass die Unterkategorien bei Klick “aufklappen” sollen, ohne die Startseite (oder überhaupt die jew. Seite, auf der man sich gerade befindet) zu verlassen. Vielleicht kam das nicht klar genug raus.

[QUOTE=caladan;143882]das ist keine reine css sache.

das ganze funktioniert technisch so:

menü mit menüpunkten (sichtbar) aufbauen, die unterkategorien sind dann unsichtbar (css: display:none;)

kat 1
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>kat 2
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>
kat 3
<div>
-ukat1 style=“display: none;”
-ukat2 style=“display: none;”
</div>
dann kannst du mit einem kleinen javaschnipsel sagen, dass er den bereich (div) bei klick anzeigen soll.

ein enstsprechenden code schnipsel hab ich mal gepostet. in dem thread gings darum nur teile eines textes anzuzeigen und mit “mehr” aufklappen zu lassen. den kannste auch dafür verwenden![/QUOTE]
Danke für die Tipps, das ist ein Ansatz für mich zum Weiterprobieren. Ich vermute, du meinst diesen Thread?

[QUOTE=Phillinger;143898]Es geht darum, dass die Unterkategorien bei Klick “aufklappen” sollen, ohne die Startseite (oder überhaupt die jew. Seite, auf der man sich gerade befindet) zu verlassen.[/QUOTE]
Dann gäbe es ja keine Möglichkeit mehr die Kategorie (z.B. “Mikrowelle”) selbst aufzurufen.

Stimmt, das wäre natürlich nicht so schlau. Mouseover wäre da wohl besser.

[QUOTE=Phillinger;143910]Stimmt, das wäre natürlich nicht so schlau. Mouseover wäre da wohl besser.[/QUOTE]

für mouseover findest du für mein hauptmenü (oben) den passenden code zum aufklappen. genauso könntest du dein seitenmenü aufbauen.

Okay, ich habe heute mal weiter daran getüftelt und lasse prinzipiell immer alle Unterkategorien laden, nur nicht immer anzeigen:

/application/views/CUSTOM_THEME/tpl/widget/sidebar/categorytree.tpl

Hier gibt es diesen Abschnitt:


                        [{* subcategories *}]
                        <li class="[{if !$oContentCat && $act && $act->getId()==$_cat->getId() }]active[{elseif $_cat->expanded}]exp[{/if}][{if !$_cat->hasVisibleSubCats}] end[{/if}]">
                            <a href="[{$_cat->getLink()}]"><i><span></span></i>[{$_cat->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($_cat->getNrOfArticles() > 0) }] ([{$_cat->getNrOfArticles()}])[{/if}]</a>
                            [{if $_cat->getSubCats() && $_cat->expanded }]
                                <ul>[{fun name="tree" categories=$_cat->getSubCats() }]</ul>
                            [{/if}]
                        </li>


wurde zu:


                        [{* subcategories *}]
                        <li class="[{if !$oContentCat && $act && $act->getId()==$_cat->getId() }]active[{elseif $_cat->expanded}]exp[{/if}][{if !$_cat->hasVisibleSubCats}] end[{/if}]">
                            <a href="[{$_cat->getLink()}]" onmouseover="" onmouseout=""><i><span></span></i>[{$_cat->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($_cat->getNrOfArticles() > 0) }] ([{$_cat->getNrOfArticles()}])[{/if}]</a>
                            [{if $_cat->getSubCats() }]
                                <ul style="display: [{if $_cat->expanded }]visible[{else}]none[{/if}];">[{fun name="tree" categories=$_cat->getSubCats() }]</ul>
                            [{/if}]
                        </li>


Das $_cat->expanded habe ich aus der if-Bedingung raus genommen, damit die Unterkategorie immer mit “gebaut” wird. Durch das style=“display:none” bzw. visible innerhalb einer eigenen if-Abfrage verhält es sich wieder so, wie davor (Unterkategorie aktiv, wenn ich mich tatsächlich dort befinde).

Grundsätzlich fehlt jetzt eigentlich nur noch das passende onmouseover und onmouseout.

Aber hier stehe ich ein bisschen auf dem Schlauch. Ich habe die Event-Listener wie man sieht im darüber liegenden <a>-Element untergebracht, aber leider keine Ahnung, wie ich damit auf die <ul>-Elemente darunter zugreifen soll.

Hätte da jemand einen Tipp für mich?