Accordion Menu for Magento Layered Navigation

by lsd / Filed under: Magento Journal

jQuery Accordion Menu for Magento Layered Navigation

Layered Navigation is one of the many great features from Magento, its powerful filtering feature can be a great usability enhancement for an eCommerce site. However, if you setup too many product attributes for you store, the Layered Navigation maybe expanded too long and resulting long vertical scrolling for your product listing page and will avert the usability purpose. With this in mind we have implemented Accordion menu for Layered Navigation in all our premium magento themes.

In this Accordion menu we use jQuery script instead of the Accordion that you see in Magento admin and One Page Checkout, the reason for this is because the Accordion menu written by Varien, is not accessible with JS turns off; though we are unable to fix all Magento codes that create obstacle for accessibility, we try hard to make improvement whenever possible.

Ok, off we go…

Download jQuery Code

We use jQuery 1.2.6 for all our Magento themes and templates. This version is not compatible with Scriptaculous script that comes with each Magento download. You must upgrade your Scriptaculous script to v1.82 or use jQuery 1.2.3 instead.

Put your jQuery file in the “js” folder located in the root (or Magento) directory. We recommend you create a new folder called “jquery”. The Scriptaculous code is also located in “js” folder.

For noConflict part, please refer to this Wiki post for noConfict implementation. If you want to skip reading another article, simple paste this code at the very bottom of your jQuery file.

jQuery.noConflict();

Add this line of code in your page.xml” file:

Modify “view.phtml” located at template/catalog/layer

In this file you see:


getFilters() ?>

getItemsCount()): ?>
__($_filter->getName()) ?>


getHtml() ?>



All we need is call the ID, “narrow-by-list”" from jQuery, and add an anchor element in “dt” like so:

getName() ?>

Now either place this code directly in “view.phtml” or place it in “head.phtml”. As for the CSS part, because the “narrow-by-list” and its child elements are already existed in the “boxes.css” file, so we will just skip this part.

Now you will have a simple Accordion menu that requires no plugin. You can see the final result from our Courtyard House Furnish theme.

9 Comments to “ Accordion Menu for Magento Layered Navigation ”

  1. Lee says:

    Hi i tried to add the accordion menu i did everything you on the instructions page and it didnt work. any idea’s why? or do you have a more detailed instructions.

    Regards

    Lee

    • lsd says:

      In my view this is a very detailed tutorial and it should work, however, I re-checked my article, see that the last bit of JS code, has ‘break’ tag inserted at the end of every line, so this maybe the problem that is causing yours not working. Try re-copy the last chunk of js code.

  2. Lee says:

    Thanks for the reply i will try it again.

  3. Sukses says:

    Hi LSD… Great tutorial..

    I wonder why did you use jquery? Isn’t accordion also supported by scriptaculous that is used by default in magento?

    I want to use this method in my layered navigation, but I concern about the error that might happen because of incompatibility…

    BTW, I use Magento 1.3.1.

    • lsd says:

      Hi Sukses,

      Because I am already familiar with jQuery, thus it’s easier and faster for me to use this framework than Scriptaculous. It’s less heavy too (v1.3.2 has improved performance for selectors) and that if you notice, many jQuery plug-in authors are very conscious about progressive enhancement, which is something important for an accessible site. I believe with a bit of care, Prototype/Scriptaculous plugin authors can do the same, but many plugins I see from this framework is just not setting a good example.

  4. Bilyana says:

    Hi LSD,

    This is amazing, i was trying to do this for ages. This helped me and works like a charm. I did exactly as you said – I used jQuery 1.2.3 version and now it shows nicely.
    I was wondering if you would know one thing – if I like to remove category from the layered navigation, how can i do that, as it’s not an attribute that you can switch off in admin?
    Any way, great article. Thanx a lot for taking the time to write it.

    Bilyana

  5. Bilyana says:

    Hi LSD,
    I’ll have a look at it. Thanks for info.
    I just noticed, even though the layered navigation shows correctly, the actual links within don’t work. If I click on any of the lines to filter through it doesn’t change anything in the content part. Do you have any clue why this is happening?
    Many thanks

    • admin says:

      Something might gone wrong with your layered nav file or attribute settings. We don’t help troubleshoot readers’ issues in our blog who use our tutorials for their magento projects. It’s best that you ask your question in Magento forum as you likely will get more response there.
      That being said, if layer nav indice didn’t fix the issue and you are certain that you did everything correct, the best way is to restore the original layered nav’s files, if the problem gone, then you can start looking for clue by examining your modified files. If the problem persist, then it maybe cause by your attribute settings.