Jump to content

[MODULE] Sliding accordion categories block


rocky
 Share

Recommended Posts

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!

8116_3Q1NBZLDZ5qCRHIR73Wh_t

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

8187_btogOYAbbTwCju362V3h_t

jquery.accordion.zip

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

:-)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

8230_YleNGUBy8IgxrgzHWpxF_t

8231_vM0MqoEQgDXzNVTqxBCM_t

8232_dIs4YKqiD6GN2zlhKQkF_t

  • Like 1

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Sorry for the late reply. I'm now working two jobs, so I've been very busy lately. I've only had one donation so far, yet I see many sites using my module. Perhaps next time I will charge $10 instead of asking for donations.

@makinete

I'm not sure what the problem is. I had it look at your website and it seems to be working fine. Do you mean that the menu stays open on the category pages, but doesn't stay open when clicking on a product? I'm aware of this issue, but can't think of a way to solve it at the moment.

@Francisco

Perhaps there is a Javascript conflict between my module and another module you have on your home page. You'd have to give me a link to your website for me to investigate further.

Share this post


Link to post
Share on other sites

Sorry for the late reply. I'm now working two jobs, so I've been very busy lately. I've only had one donation so far, yet I see many sites using my module. Perhaps next time I will charge $10 instead of asking for donations.


Well Rocky,

You may need to check your paypal setting. I tried to make a donation to you and I can not do it as paypal kept telling me to enter an amount higher than 0. My donation was higher than 0.... I am in the U.S. ...

9134_He7Ldhnc39JzPJha7TuE_t

Share this post


Link to post
Share on other sites

Hi Star,

Sorry, I assumed since PayPal for working for me and I had received one donation that I had set it up properly. I'll investigate to see whether I have set it up incorrectly. Did you click on the Update Totals button before logging in? I noticed that the error message you saw comes up if you forget to click it.

Share this post


Link to post
Share on other sites

Hey great mod, I'll happily shoot over the $10 if you can please solve this.

When I click on a sub category and view the product list all is fine.
Once I click on the individual product the menu closes up and loses the place it's at. This is REALLY frustrating me! ;)

So essentially it's not keeping track of where its at.. could just be a session issue.

Help please! I want to use it, but I'm going to have to launch my site with the original menu until this is fixed!

Share this post


Link to post
Share on other sites

Hi Aaron,

I'll try to fix this issue when I have time. I'll try to rewrite the navigation filter to use the category referrer, or just use the default category of the product, which is what Prestashop does.

Share this post


Link to post
Share on other sites

I've updated my module to display and highlight the default category of a product when it is viewed. I tried to use the referrer instead of the default category when possible, but I could not because the code to highlight the current category is generated using PHP and the referrer can only be determined using Javascript, because no posting is occurring.

Anyway, as long as you have each of your products in only one category and select that category as the default category, everything should work perfectly. It is only when a product is in multiple categories and you click on the product from a non-default category that the module will jump to the default category.

As always, please try it and let me know if there are any bugs or if I've missed something.

Share this post


Link to post
Share on other sites

Hi Star,

Unfortunately, I can't find anything wrong with my PayPal settings. I've changed it so that it adds the purpose automatically, so only the donation amount needs to be entered now. As long as the "Update Totals" button is clicked after entering an amount, it appears to be working, whether you log in to your PayPal account or just click Continue to enter your details without having an account. I have my currency set to AUD. Could that be a problem? Please try again if possible.

Share this post


Link to post
Share on other sites

Hi Star,

Unfortunately, I can't find anything wrong with my PayPal settings. I've changed it so that it adds the purpose automatically, so only the donation amount needs to be entered now. As long as the "Update Totals" button is clicked after entering an amount, it appears to be working, whether you log in to your PayPal account or just click Continue to enter your details without having an account. I have my currency set to AUD. Could that be a problem? Please try again if possible.


Rocky, I just tried. It won't accept the transaction. Does your paypal set up to accept international currency? I wonder....Because I am using US paypal connection. I don't know.

9287_IfjFyxcw6an5YLeuXARs_t

Share this post


Link to post
Share on other sites

This is frustrating. I can't find any donation settings in PayPal. I don't understand why it isn't working. PayPal says that the Donate button accepts all currencies that PayPal does. Maybe it is because I'm using a personal PayPal account. I have Australian Dollars (Primary) and US Dollars set up as my currencies though.

Can you try going to "Send Money" in PayPal and sending me the donation as a personal gift? My email address is Adrian[DOT]Nethercott[AT]gmail[DOT]com

Share this post


Link to post
Share on other sites

I found a way to get the referring category to be highlighted when a product is clicked and so have updated the module. I'm completely happy with this module now, since I can't think of any more issues with it. Let me know if you disagree and find something you want changed.

Share this post


Link to post
Share on other sites

Hi Star,

I just tried donating from my mum's PayPal account to my own and it worked perfectly. I also talked to the other guy from Belgium who donated and he said that he didn't have any problems either. He said it just came up to pay in Australian Dollars, even though he didn't have Australian Dollar set up as one of his currencies. Unfortunately, there's nothing more I can do on my end. I just hope that not many people have a problem donating. Thanks for trying anyway.

Share this post


Link to post
Share on other sites

Hi Rocky !
Great Module !! is really helpfull when having 3 or more levels of categories

I am new on PTS and I am trying to understand how to change and create the PHP with Smarty... is it possible for you posting your PHP module with heavy comments in order to help a lot of people like me, hungry of developer documentation?
-it can be also on a POST REPLAY, no need to change de fliles-

thanks again for your time and for sharing your effort!
__
andaluzian regards

Share this post


Link to post
Share on other sites

Hi Star,

I just tried donating from my mum's PayPal account to my own and it worked perfectly. I also talked to the other guy from Belgium who donated and he said that he didn't have any problems either. He said it just came up to pay in Australian Dollars, even though he didn't have Australian Dollar set up as one of his currencies. Unfortunately, there's nothing more I can do on my end. I just hope that not many people have a problem donating. Thanks for trying anyway.



Rocky,

I will make a donation to you as a personal gift.

thanks for your work.

Star

Share this post


Link to post
Share on other sites

Hi Star,

Thank you. I'll send an email to PayPal and see if they can help me. I had a look at your website and noticed that the highlight colour is missing the # in front the code, which is why it is not highlighting the currently selected category. I also noticed that although there is no error in Firefox, there is a Javascript error in Internet Explorer. I'll try to recreate the error on my test site and fix it.

Share this post


Link to post
Share on other sites

Thank you for the work.

I do have another issues that I mentioned on my few posts before. It is when I click on the menu, it will not show my selection page. But if I key in or click it on my footer, the selection page will show. Ex:Gift Basket. If you click on the menu bar, all you see is products, but if you click the gift basket selection on my footer, you will see a selection page. Any idea why? If you can fix it, it will be great. If not, I understand.

Star

Share this post


Link to post
Share on other sites

@Star

Thanks for the donation. PayPal is currently reviewing my question. I wasn't able to reproduce the Javascript error on my test site. I'll have to rely on the Javascript error message on your website to try to fix it and give it to you to test.

@google-friend

The highlight colour is working on my test site. Can you please give me a link to your site so I can investigate why it isn't working on yours?

Share this post


Link to post
Share on other sites


@google-friend

The highlight colour is working on my test site. Can you please give me a link to your site so I can investigate why it isn't working on yours?


Never mind,

I was checking on how you did it, and I deleted one line accidentlly. It is working now. Thank you a lot.

Share this post


Link to post
Share on other sites

I'm currently working on fully documenting my module, as requested by foco above. Hopefully, it will help you understand exactly how my module works. Documenting my module has also forced me to clean up my code a bit.

Share this post


Link to post
Share on other sites

I've now cleaned up my module. I hope this fixes the Javascript error that I wasn't able to reproduce. I have also fully documented my module in a separate download for those who want an explanation of what each line of code is doing. I hope it helps people when writing their own modules.

I also got an email back from PayPal saying that there is nothing wrong with the settings of my account or the donor's account. They said the donation failed because the bank declined the transaction. Hopefully, this means that I don't have to worry about problems donating.

Share this post


Link to post
Share on other sites

Thank You, Champ !
I ll read it tomorrow !!
i think that docummentation is an important part of a well done development job, so: CONGRATULATIONS AGAIN !
Andaluzian regards !

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hi Rocky. Your module is great. It works perfectly on my client's site.

We have few more issues before they can go live.

My client is running a camana shop. One of 6 categories is a kind of camana that come with 1 year warranty. Is there a way in that and only that category, I can put an image next to that to show it come with warranty?

Thank you very much for your help.

Share this post


Link to post
Share on other sites

I found a way to get the referring category to be highlighted when a product is clicked and so have updated the module. I'm completely happy with this module now, since I can't think of any more issues with it. Let me know if you disagree and find something you want changed.


Mate module is great!

I am missing one thing...

when clicked on category it opens dropdown selection for subcategorys - wich is ok, but it don't opens entire main category in central column to show all products and icons of subcategories, as ordinary category block does.

I would relly like that when i click on category we see all products and icons of subcategories in central column.
Becouse i use those icons of subcategorys as kind of a filter tool.

BR
DJ.

Share this post


Link to post
Share on other sites

Rocky,

I think you are working too hard. If you can fix the problem, that will be great, if not, I am very happy to take it the way is.

What? You are trying to improve the module, well, it is perfect already. That is wonderful. Can not wait to see the next version.

I just want to say thank you again for all of your help.

Star

Share this post


Link to post
Share on other sites

the animation won't have time to display.


How about that animation executes on "mouse over" and on click loads page?

This way we have best of both worlds... nice animated sliding and loading on click?

Man, i must donate something to reward your effort!

Share this post


Link to post
Share on other sites

Hi,

I'm French and i try to explain my situation.
I have prestashop in my locahost version 1.1 and i downloaded this module on page 1 with his documentation.
I have install this block, i can configure it but it didn't work !
I see the sub categories on the front office !
I need help !
Thanks !

Share this post


Link to post
Share on other sites

Hi DJ-Terror,

That option is already available in my module. Just change the "mouse event" to hover on the configuration page.


Oh, shame on me! This works just as i wanted!!! Excellent!

Share this post


Link to post
Share on other sites

Hi monvidedressing,

Something must be preventing the Javascript from executing. Is there any Javascript error message available? It is hard for me to help without more information.

Share this post


Link to post
Share on other sites

Hi weloveperfume,

No, there is no option for that at the moment. I thought everyone would prefer the categories to stay open to serve as a breadcrumb so that the current category is always visible and the categories view stays the same between pages. I can add the option to close the subcategories on every page reload if you want.

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hi vans,

I'm currently working on v2.0 of this module. I've completely rewritten the module using the updated categories block from Prestashop v1.2 and added the option to dynamically load subcategories using AJAX and also the option to use the +/- buttons like in the original categories block. I'm always looking for new ideas for modules. I'll investigate whether I can add the animation effects and dynamic loading to other Prestashop modules.

Rocky

Share this post


Link to post
Share on other sites

  • 1 month later...

Hello,

this module is amazing ! However, i had difficulties with it... it works during a time and after several click, it stops working... i click again and again and it is repared... but it goes wrong during a time that can be long.
I use prestashop 1.2.3.
Is it the JS problem you speak about ?

sorry for my english !!

an idea of module ? The last comments of customers on the home page...

Thank you very much for your help if you have an idea for my problem, have a good day !!

Share this post


Link to post
Share on other sites

  • 1 month later...

this module is simply brilliant.

However the only issues, is that when javascript is off, it opens all the categories and sub categories. Cant it be modified to work in such a way that, it works the same way, but without the effects, and the page just refreshes with the relevant categories open and the other categories closed.

This will help in running the website lighter.

Any help on code modifications would be really great.

Thanks a million.

Share this post


Link to post
Share on other sites

Good idea. I'll add this to my list of things to do with this module. I've been working on v2.0 for a long time now, since I keep getting requests for more features. I want to make sure they all interact properly before releasing it.

Here's what I've done so far:

- Added AJAX mode that delays loading categories until they are expanded to decrease load time

- Added option to display original +/- buttons or no Javascript at all

- Added option to display the number of products in brackets after each category

- Added option to choose whether categories should stay open between pages

Here's what I'm still planning to add before I release the next version:

- Add AJAX mode to original +/- mode so those who don't want accordions can still benefit from the decreased load time

- Add option to hide empty categories

- Add option to hide parents of the current category and sub-subcategories of the current category

Share this post


Link to post
Share on other sites

Hi Rocky!

Thanks a lot for your amazing job! Do you know when will the 2.0 update available? I'm really looking forward to get it specially for the option that allow to display the original +/- buttons. Is there at the moment any solution to ad a special background img or color in CSS for the categories that don't have subcategories? Will it be possible with the 2.0 release?

Thanks a lot!

Share this post


Link to post
Share on other sites

thank you so much, for considering it in your future update.

if there is a way to modify your current module so that it works the same way when javascript is off please do let me know.

OR

In the alternative you could put up the BETA version if it has the feature it would be great.

Thanks a million.

Share this post


Link to post
Share on other sites

Hey,

Is there a way by which, when one clicks on the parent category, all the sub categories and sub-sub categories, of that parent category get opened.

At present only one sub category can be viewed at a time.

Some code to help me do this would be great.

Thanks

Share this post


Link to post
Share on other sites

Hi Hardik,

You have a lot of unusual requests! I can add this to my list if you want.

Here’s an update of where I am for this module. What I’ve done so far:

- Added AJAX mode that delays loading categories until they are expanded to decrease load time

- Added option to display original +/- buttons or no Javascript at all

- Added option to display the number of products in brackets after each category (optionally counting subcategories too)

- Added option to choose whether categories should stay open between pages

- Added option to hide empty categories

- Added option to hide parents of the current category and sub-subcategories of the current category

Here’s what I’m still planning to add before I release the next version:

- Add AJAX mode to original +/- mode so those who don’t want accordions can still benefit from the decreased load time

Share this post


Link to post
Share on other sites

:)

hey, just asked for it because i realised that when one has multiple sub categories, there is no point in making it difficult for the user to find what he is looking for, so one should have the option to see all sub-categories of that parent category.

thanks :)

Share this post


Link to post
Share on other sites

www.foutlet.pl - try here.
When you clicking step by step, category by category and in the end you enter to a product - everyhting seeems to be ok. but when you put a direct link do item, it's not :/

btw. i'm trying to change some thing in blockcategoriesaccordion.tpl but i cannot see any changes when i upload it into internet :/

EDIT____

it seems, that for highlighting current category responsible is this part of text:

        if (substr($_SERVER['QUERY_STRING'], 0, 10) == 'id_product')
       {
           if (strpos($_SERVER['QUERY_STRING'], '&') === FALSE)
               $id_product = substr($_SERVER['QUERY_STRING'], 11);            
           else
               $id_product = substr($_SERVER['QUERY_STRING'], 11, strpos($_SERVER['QUERY_STRING'], '&') - 11);

           $result = Db::getInstance()->ExecuteS('SELECT id_category_default FROM '._DB_PREFIX_.'product WHERE id_product = ' . $id_product);

           $smarty->assign('currentCategoryId', $result[0]['id_category_default']);
       }

       return $this->display(__FILE__, 'blockcategoriesaccordion.tpl');



but I don't now what should I do to make it work properly. Does it interract with other files? I was changing a little bit some parts of product displaying so maybe that could be the reason :/

Share this post


Link to post
Share on other sites

Check to make sure that the default category of your products isn't Home, otherwise the module doesn't know which category the product is from with a direct link. In hinesight, that code looks ugly. I wrote it a long time ago when I was not as experienced in PHP as I am now. When I get back from my holiday, I'll rewrite it. I think I can just use $_GET['id_product']. I'm only one bug away from releasing the next version of this module. I was thinking of charging a small amount like $25 for it, since I've worked on it for many months now and need to get some money for all the work I have done. I could release a free version without the AJAX. What do you think?

Share this post


Link to post
Share on other sites

Hi there,

First of all great module!

I'm using it always closed, and opened when selected category.

I had only one problem with it: When using friendly URLs.
Everything worked fine, until i get into the product detail page:

http://www.example.com/5-ABC this is the look of a category link

http://www.example.com/ABC/123-Xpto_product.html is the look of a product detail link

In /classes/Product.php i had to change this line:

$row['link'] = $link->getProductLink($row['id_product'], $row['link_rewrite'], $row['category'], $row['ean13']);


into

$row['link'] = $link->getProductLink($row['id_product'], $row['link_rewrite'], $row['id_category_default'].'-'.$row['category'], $row['ean13']);



Then modified this line ~81 in blockcategoriesacordion.tpl :

return (foundChild || child.href.toLowerCase() == locationhref);


and substitute by

return (foundChild || locationhref.indexOf(child.href.toLowerCase())>=0)



Hope this helps people using it with Friendly URLs.

Cheers,
Winno

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hy Rocky,first of all excuse my good english:P!
I have a little problem,i need to know what i must to do to have the both 2 main categories opened,perhaps on my site i have one main category opened with another subcategory from it,but i don't want that.
Secondly i need to know if i chould change the order of categories ,now is in a alphabetical order,but i want to change this,please tell my how to solve this problems.
Hope you understant what i try to explain:D

My site http://ealimentara.ro/versiune/demo/

Share this post


Link to post
Share on other sites

Hi prunica,

To change the order of categories, you need to add an integer in front of the category names followed by a period. For example:
01.First Category
02.Second Category

With this module, it is not possible to have two categories open at the same time like in the original category block, since it uses accordions only. It is possible to use the original +/- buttons in my new AJAX accordion module, but there is no option to choose which categories should be open initially. It is a good idea though. I'll try to add it to the next version of the module.

Share this post


Link to post
Share on other sites