220 replies to this topic

[rocky]

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
UPDATE v2.0 now available
* New jQuery UI Accordion used to make the accordion collapsible
* Made compatible with PrestaShop v1.4
* Uses a color picker to choose the highlight colour
* Fixed bug in infinite depth
* Moved to "Front Office Features" section
* Rebranded with new logo
UPDATE v2.0.2 now available
* Fixed bug that caused the colour picker to not appear in Firefox
* Categories are now sorted by position instead of name
Download this FREE module from the DOWNLOAD TAB on my website here.
AJAX Sliding Categories is also available for purchase. See this topic for more information.

[VIXUS]

Great improvement!!!

I just love it!

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!

Attached Files

•  categories-block.jpg   68bytes   33217 downloads

[rocky]

Hi DJ-Terror,

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:

div#categories_block_left ul.tree { padding-left:0.5em; }

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.

Rocky

[mickey21]

hi,

thanks for this module ! great !

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 ?

Thanks to tell me what i did wrong...

Have a nice week end !

ps : sorry for my so poor english... !

[VIXUS]

yes, that BUG i reported 2 posts above... i hope its easy fix.

[mickey21]

Sorry, i said my english was terrible ! ;-)

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...

So we say the same thing... sorry

[rocky]

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.

[mickey21]

Thank you Rocky,
after that, i think your module will just be perfect ! ;-)

[maxhome]

Thank you Rocky,

I sent to you a PM
Just a little bug, see the attached picture

The next to last category is cut
And the last category doesn’t appear

When i choice Block height : Fixed all ok
but if Block height: variable BUG

Mac: bug in safari
Windows: bug but in IE8 if i click on compatility it's ok

Can you help me?
Many thanks


Edit: i have solved my problem
I have take a other query.accordion.js
Now ok in Ie8, firefox and Safari
Not tested in Mac

The files is attached

Attached Files

•  a.jpg   18bytes   27515 downloads
•  jquery.accordion.zip   3bytes   1197 downloads

[rocky]

Hi maxhome,

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.

[Star]

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.

[rocky]

Hi Star,

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

[Star]

From 1243829959:

Hi Star,

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.

:-)

[VIXUS]

From 1243829959:

Hi Star,

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

try to contact them?

[maxhome]

From 1243808784:

Hi maxhome,

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

[Star]

Hi Rocky,

I would like to report something that I find.

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.

Attached Files

•  Untitled-1.gif   68bytes   25689 downloads
•  Untitled-2.gif   23bytes   25003 downloads
•  Untitled-3.gif   6bytes   24792 downloads

[Dio]

Thank you Rocky Great work!

[rocky]

After much coding and debugging, I've finally implemented the custom navigation filter and finished this module. Please download and try the module.

[VIXUS]

Perfect! Great module!

[makinete]

hi!!!

i`ve got a bug, my problem is with i added attribute to product, menu sliding is open, i think that jquery but i don't know.


http://hummelspain.h...p?id_product=16


Thanks!!!