Ich bin mittlereile ein großer Fan von jQuery geworden. Gerade mit Magento kann man über jQuery dynamisch sehr viel anpassen und modifizieren.

Einer unserer Kunden hatte sehr viele Attribute in seiner Layered Navigation, sodass die linke Spalte sehr unübersichtlich wurde. Da möchten wir uns doch die stärken von jQuery zu Nutze machen und mit einem Akkordeon-Effekt etwas für Ordnung sorgen. Alle Attribute außer dem Ersten, sollen ausgeblendet werden. Sobald man auf die Headline klickt soll das angeklickte Attribute ausgeklappt werden und alle anderen eingeklappt.

In unserem Demoshop kann man sich dass schon einmal ansehen: http://shop.mxperts.de/1.3.2/catalog/category/view/s/computers/id/15/ (Auf Brand klicken)

Die Umsetzung:

1. Öffnen Sie die Datei app/design/frontend/default/default/template/catalog/layer/view.phtml

2. Ersetzen Sie  

<dt><?php echo $this->__($_filter->getName()) ?></dt>

mit

<dt><a href="/"><?php echo $_filter->getName() ?></a></dt>

3. Kopieren Sie folgenden Code and Ende der Datei:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("dl#narrow-by-list> dd:not(:first)").hide();
    jQuery("dl#narrow-by-list> dt a").click(function(){
      jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
      jQuery(this).parent().next().slideDown("fast");
      return false;
    });
   });
</script>

4. Aktualisieren Sie im Backende den Cache und laden Sie die Website neu

Voilà unser Layered Navigation mit Akkorden Effekt ist schon fertig.

Für dieses Tutorial muss jQuery bereits in Ihren Onlineshop integriert sein! (jQuery in Magento integrieren)

Alternativ können Sie auch diese Variante verwenden:(Anregung von Leiweke)

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("dl#narrow-by-list> dd:not(:first)").hide();
    jQuery("dl#narrow-by-list> dt a").click(function(){
      if (jQuery(this).parent().next().is(':hidden')) {
        jQuery(this).parent().next().slideDown("fast");
      } else {
        jQuery(this).parent().next().slideUp("fast");
      }
      return false;
    });
   });
</script>

Zu sehen unter http://shop.mxperts.de/catalog/category/view/s/computers/id/15/