For my first module, I have created the sliding accordion categories block. I copied the original categories block from v1.1 and added the JQuery Accordion plugin so that I could add the following features:
Top-level categories slide so that only one set of subcategories is visible at a time, which saves room when there are many categories.
Configuration page allows one of following slide animations to be used: None, Default, Ease and Bounce.
The categories can be set to slide on mouse click or mouse hover.
The block height can be set to a fixed size or a variable size that changes based on how many categories are displayed.
The block can be set to start with the first set of subcategories open or to start collapsed.
The block automatically opens the subcategories of the current category and highlights the current category with a user-chosen colour.
I would appreciate any feedback on my module and any bug reports.
UPDATE: v1.1 now available
Removed padding on left on top-level categories
Fixed bug that prevented top-level categories and all subcategories being clicked in mouse click mode (thanks to maxhome)
UPDATE: v1.2 now available
Added nested accordion support
UPDATE: v1.3 now available
Added custom navigation filter so that sub-sublevels stay open when clicked
Other minor bug fixes and code cleanup to make it standards compliant
UPDATE: v1.4 now available
When a product is viewed, the default category is now visible and highlighted
Changed default option to mouse click, since it is more popular
UPDATE: v1.5 now available
When a product is clicked on, the referring category now remains open and highlighted and when a product URL is entered, the default category of the product is opened and highlighted
UPDATE: v1.6 now available
Minor bug fixes and code cleanup
Added documentation
UPDATE: v1.6.1 now available
Fixed SSL issue
Moved module to Nethercott Constructions section
Removed PayPal donate button
Download this module from the download tab on my website here.
AJAX Sliding Categories is now available for purchase. See this topic for more information.
One thing, i have depth of 5 so i could realy benefit from closed subcategories and their subcategories couse curently they all open at once and that just looks so wrong… :-(
see pic.
Actualy 2 things. Theres lotsa space left in front of categories, you could move them a bit to left no?
see pic.
one bug detected!
When set to mouse event click than it works only on primary category not on subcategories.
Cheers!
Images jointes
Cliquez sur la miniature pour voir l'image complète
I’m glad you like my module. I thought you would, since I saw your request a JQuery Accordion sliding categories module in another thread.
It sounds like you need the nested accordions. I didn’t implement that because the project I’m currently working on only has a category depth of 2, so it isn’t necessary. It will be a lot more work, since I have to find a way to apply a separate accordion to each of the sublevels without knowing how many there are. I can’t use one accordion that includes sublevels. I’ll try to find a way to implement this when I find time.
The module does not define any styles except for the currently selected category colour. It relies on your theme’s global.css for the other styles, which by default in Prestashop, leaves space on the left for the + and – signs, which aren’t used in this module. You can change the following style in your theme’s global.css to adjust the spacing:
I’ll consider adding a style to remove the space, but then that would be confusing if someone tries to add space using their global.css, not knowing that the module has its own CSS overwriting it.
However, i have a little problem… where is my error ?
When i choose “mouse hover” no problem… but it moves all the time , i prefer “mouse click”. But when i select this option, i can’t go to the category anymore. I see the link at the bottom of the page but impossible to click to see the products.
How does it work in this case ?? – a click on a category with no sub category = it opens the category page, – a click on a category with sub categories = it opens the tree and next, we can open a sub category page with a click.. and we don’t go to the category page in this case. No link on the category name.
It should work like this ?
And i had not understand your sentence… because, the tree works but even a click on the link of a primary category without any sub category doesn’t work…
I see the problem now. Definitely a bug. I missed it because I was focusing on the mouse hover mode for my project. I’ll try to fix it when I have time.
Thank you! I didn’t realise there was a newer version of JQuery Accordion available. I’ve updated my module and tested it on Mac and it appears to be working perfectly. This also fixed the bug where you couldn’t click on top-level categories without children and subcategories.
This category module is great. I love it. I have 5 levels also. I will be benefit for a nested accordions. However, I take whatever you have at this moment, and am grateful for all of your work. Thanks a lot.
Your wish is my command. I just added nested accordion support. Please let me know if it works for you.
There is one bug that I’m aware of and that is that the sub-subcategories don’t stay open when you click on them. I need to write a custom navigation filter that supports nested accordions. Unfortunately, I can’t figure out how navigation filters work. Can anyone help me understand them? I’ll try to figure them out, so I can finish this module.
Your wish is my command. I just added nested accordion support. Please let me know if it works for you.
There is one bug that I’m aware of and that is that the sub-subcategories don’t stay open when you click on them. I need to write a custom navigation filter that supports nested accordions. Unfortunately, I can’t figure out how navigation filters work. Can anyone help me understand them? I’ll try to figure them out, so I can finish this module.
Rocky
Hi Rocky,
This is great. i just installed it and it seems work perfectly except what you mentioned above. Thank you again and again for all of your work.
Your wish is my command. I just added nested accordion support. Please let me know if it works for you.
There is one bug that I’m aware of and that is that the sub-subcategories don’t stay open when you click on them. I need to write a custom navigation filter that supports nested accordions. Unfortunately, I can’t figure out how navigation filters work. Can anyone help me understand them? I’ll try to figure them out, so I can finish this module.
Rocky
I know 2 guyz in forum that are verry halpfull and have knowledge (but probably not so much time) to help us out here:
amwdesign and Marghoob Suleman
Thank you! I didn’t realise there was a newer version of JQuery Accordion available. I’ve updated my module and tested it on Mac and it appears to be working perfectly. This also fixed the bug where you couldn’t click on top-level categories without children and subcategories.
You’re welcome. My pleasure.
Thank you for your good job…
Max
As I set the menu up as click on mouse event and start mode to open, when I click on the parent cat, the sub-cat images in all of the levels (my is 4 sub-cats) will not show at all.
But when I set it as hoover on mouse event, when I chick on the parent cats, the sub-cat images show on the side.
Thank you again for your help.
Images jointes
Cliquez sur la miniature pour voir l'image complète
, i prefer “mouse click”. But when i select this option, i can’t go to the category anymore. I see the link at the bottom of the page but impossible to click to see the products.
