Magento – Filtern nach als “Akkordeon” Menü / Slidedown / Dropdown im RWD Design bei 1.9

PictureWer in seinem Magento-Shop viele Filter verwendet und die sog. Layered Navigation – So the filter navigation on the (usually) linken Seite unübersichtlich und lang ist, kann die einzelnen Filter ein- und ausklappen.

Hierzu werden nur wenige Zeilen Code in der Datei view.phtml im Ordner

app / design / frontend /[eigenes Template]/[ebenso]/template/catalog/layer

added. Ganz am Schluss kopiert man einfach die folgenden Zeilen ein:

<script type="text/javascript">
jQuery(document).ready(function($) {
var dt = jQuery('#narrow-by-list dt'),
dd = jQuery('#narrow-by-list dd');
dt.next().hide();
dd.first().hide();
dt.first().addClass('Active');
dt.click(function(){
jQuery(this).toggleClass('Active').next().slideToggle();
})
});
</script>

Wobei die Zeile dd.first().hide(); mitteilt, dass der erste Filter auch versteckt sein soll. Hier kann man aber auch dd.first().active(); verwenden und der erste Filter wäre standardmäßig ausgeklappt.

Schön bei dieser Lösung ist, dass die einzelnen Filter durch Klick auf die Überschrift des jeweiligen Bereiches ausfahren und durch einen weiteren Klick wieder eingefahren werden.

Ich habe dies bei einem angepassten RWD-Design verwendet.

Used in Magento versions 1.9 Comments? Additions? Notes? Gladly!

Published by Covos

Since 2009 I have been working intensively with Magento. I started with the creation and operation of B2C stores. This was extended through my work in the logistics sector. This resulted first specialized B2E systems. Today I work day-a day with exciting B2C, B2B- and B2E projects and reports in this blog about challenges and give insider tips.

Leave a Reply

Your email address will not be published. Required fields are marked *