2. To do one modification and add one new function to the \modules\ps_categorytree\ps_categorytree.php file, see this picture.
Here is modification, replace this code
1 2 3 4 | return [ 'categories' => $this->getCategories($category), 'currentCategory' => $category->id, ]; |
By this one
1 2 3 4 5 6 | $categories = $this->getCategories($category); return [ 'categories' => $categories, 'c_tree_path' => isset($categories['children']) && count($categories['children']) && method_exists($this->context->controller, 'getCategory') && ($curr_category = $this->context->controller->getCategory()) ? self::getTreePath($categories['children'], $curr_category->id) : false, 'currentCategory' => $category->id, ]; |
Here is the new function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public static function getTreePath($categories, $id, array $path = []) { foreach ($categories as $cate) { if ($cate['id'] == $id) return $path; $path[] = $cate['id']; if(is_array($cate['children']) && count($cate['children'])) { if ($result = self::getTreePath($cate['children'], $id, $path)) return $result; } array_pop($path); } return false; } |
3. Edit the \themes\yourtheme\modules\ps_categorytree\views\templates\hook\ps_categorytree.tpl file.
Modifications for Transformer theme and Panda theme users.
1 2 |
Modifications for other themes' users.
1 2 3 |
For Warehouse theme, use "show" instead of "in" in the last line.
That's all. Here is a demo click here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | public static function getTreePath($categories, $id, array $path = []) { foreach ($categories as $cate) { if ($cate['id'] == $id){ if(is_array($cate['children']) && count($cate['children'])) $path[] = $cate['id']; return $path; } $path[] = $cate['id']; if(is_array($cate['children']) && count($cate['children'])) { if ($result = self::getTreePath($cate['children'], $id, $path)) return $result; } array_pop($path); } return false; } |
For Transformer theme and Panda theme users, you just need to put this code to the Custom css code field in the Theme editor module.
1 | .category-sub-menu .current_cate>.acc_header a{color:#E54D26;} |
For other themes' users, you need to add this code to the ps_categorytree.tpl file, like the first picture on step #3.
1 | class="{if (isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id) || (isset($id_category_current) && $id_category_current==$node.id)} current_cate {/if}" |
And then put this css code to your site. If your theme doesn't have a custom css code feature, then use this free module of us Free PrestaShop1.7 custom code module.
1 | .block-categories .category-sub-menu .current_cate > a{color:#E54D26;} |
1 | .block-categories.hidden-sm-down {display: block!important;} |
Jonny, can you see my page?
I do everything and see no effect
i sent you the files
Jonny, can you see my page?
I do everything and see no effect
i sent you the files
thank you for your post.
I am using PS 1.7.6.4 with Warehouse theme but cannot make this work. This is what I got now http://2020.oui-oui.es/91-puertas-ratoncito-perez
I have used "show" insted of "in" but stills this wierd behaviour.
Any help would be much appreciated
Thanks!
ps_categorytree.tpl looks like this now:
{function name="categories" nodes=[] depth=0}
{strip}
{if $nodes|count}
{foreach from=$nodes item=node}
{if $depth===0}
{$node.name}
{if $node.children}
{categories nodes=$node.children depth=$depth+1}
{/if}
{else}
{$node.name}
{if $node.children}
{categories nodes=$node.children depth=$depth+1}
{/if}
{/if}
{/foreach}
{/if}
{/strip}
{/function}
{if $categories.children|count}
{$categories.name}
{categories nodes=$categories.children}
{/if}
Hello,
Sorry to bother you, i'm using Prestashop 1.7.5.3 and Warehouse Theme, tried to figure out why i cannot get you code working.
Would you be kind enough to help me review my code if i sent it to you with WeTransfer?
Thanks in advance!
Did you see that in the very last of step #3 "For Warehouse theme, use "show" instead of "in" in the last line", if you need me to take a look, send your site url and the modified files to helloleemj@gmail.com
If you enter the top-level category ("Home category"), then the subcategories remain hidden.
Example:
http://rumoda.eu/ru/3-odezhda
And if you go to a subcategory-then the categories are already opened
Example:
http://rumoda.eu/ru/4-men
Whether it is possible to make it open in both cases. I clicked on the main category (Clothing) and the subcategories unfolded.
Theme-warehouse
Thanks for the answer.
See the @Pepecop's question below to know how to achieve it.
Thank you so much. Did not read comments.
It works very good on computer, but not on smartphones. On one phone there is no menu at all, on another I have "v" instead of "+" and it doesn't work.
Do u know what to do with it ?
PS 1.7.4.2 , classic theme
Thank u.
The category tree block is hidden by default on the Classic theme, see this pic https://www.sunnytoo.com/wp-content/uploads/screenshot/Screenshot01613.jpg
You can use this custom css code to show it out.
@media (max-width: 767px){.block-categories.hidden-sm-down {display: block!important;}}
The reason of why you have "V" is probably due to icon conflicts.
It's ok if it is hidden on all phones of if it has another icon which also works, but I have menu block (on some smartphones) and it doesn't work !
And if it's hidden, then I get big empty place before category name, see this pic http://winkli.nl/img/error1.jpg. On tablet portrait mode it looks like this: http://winkli.nl/img/error2.jpg
If you need my help to check the V problem, send me your site url.
See this pic https://www.sunnytoo.com/wp-content/uploads/screenshot/Screenshot01616.jpg it seems you did a customization to add a big empty place on the top of left column, restore the customization. If you need a top spacing for desktop mode only, then create a piece of css code to achieve that.
Ok, it was my mistake, thank u. But what about "v" which doesn' work also for horizontal menu on phones?
Hello, first of all a big thank you for this information which helped me a lot. I would like to ask you how I could adapt so that the fat category is only the one you select (for levels 1 and 2 it is ok) but if you choose a category of level 0 it also highlights in bold the subcategories of the latter.
Do you have any ideas? (I use prestashop 1.7.6.1)
I almost achieved my goal thanks to your information
How did you make the current category to be in bold? You created a piece of custom code for that or it's a feature of your theme? Send me your site url to helloleemj@gmail.com so I can take a look to see what's wrong.
This mod works fine with PS 17.5.0.
@Jonny thank You for help, well done
Hello, do you know how to do it on classic-rocket theme? When I switched on classic theme it's working, but on classic-rocket theme it's not working đ
You mentioned that your ps_categorytreeï»ż.tpl file was different with the classic theme, then send it to me, so I can guide you, also send me your site url.
My email address is helloleemj@gmail.com
Check Pepecopâs comment below for how to expand the current categoryâs child categories.
It doesn't work đ . I have an empty left column. Presta 1.7.5
Which theme you are ruing, this tutorial works all 1.7 versions, double check you modifications.
This does not work on 1.7.5.1 . I tried.
My site :
https://hopshop.bg/
its my code theme
file : ps_categorytree.tpl
{function name='categories' nodes=[] depth=0}
{strip}
{if $nodes|count}
{foreach from=$nodes item=node}
{if $depth === 0}
{$node.name}
{if $node.children}
{categories nodes=$node.children depth=($depth + 1)}
{/if}
{else}
{$node.name}
{if $node.children}
{categories nodes=$node.children depth=($depth + 1)}
{/if}
{/if}
{/foreach}
{/if}
{/strip}
{/function}
{$categories.name}
{categories nodes=$categories.children}
Send your modified \modules\ps_categorytree\ps_categorytree.php and \themes\yourtheme\modules\ps_categorytree\views\templates\hook\ps_categorytree.tpl to helloleemj@gmail.com so I can check your modifications.
You are perfect ... Thanks ;)...
Hi Jonny
First of all thank you! This is true gold!
I'm just wondering if the following is not considered in your solution, or i'm doing something wrong:
When i'm in a product detail page, the main category, in the category tree module, is not highlighted.
For example: I'm viewing the details of a Dress. That dress is in Women/Dresses. The category tree is expanded, like it should but Dresses is not highlighted like in a category list view.
Thanks for letting me know. I've updated the code which is used to add a "current_cate" classname to the current category. So try the updated code.
Perfect. Worked like a charm!
Thank you đ
Hi Jonny, thank you so much for your tutorial, it was weeks that I was looking for a solution! I'm trying to follow the tutorial, but I can't understande where I have to put the code of point 3. I use a different theme from those you mentioned, in the file .tpl I can't find a similar code to replace with what you have indicated. Can you give me more information? Thanks đ
P.S. sorry for my english, I hope you can understand all.
Send me the \themes\yourtheme\modules\ps_categorytree\views\templates\hook\ps_categorytree.tpl via email helloleemj@gmail.com so I can take a look.
Thank you so much đ
Thanks Jonny, very nice job! Just one thing, i'm also trying to change "+" and "-" but that doesn't work for me. My theme is Panda.
What do you want to change them to? Do you want to change them to ^ and v?
when a category is on the "+ " is still here (instead i want to put "-" by default for the category selected)
Sorry for my english!
Do you want to do what Pepecop wanted to do? https://www.sunnytoo.com/wp-content/uploads/screenshot/Screenshot00696.jpg
Yes but it doesn't work for me
You can send me your site url and FTP login details to me via email helloleemj@gmail.com so I can check your modifications.
Excellent ! Thank you very much, Jonny đ
Thank you for your solution. Please tell me, what changes I should do to make the whole node behave like a "+" and "-" signs? (by clicking it should only expand/collapse the node and not open the category products)
That's doable, just tell me which theme your are using.
I'm using Modifications for other themesâ users.
.block-categories .collapse-icons[aria-expanded=true] .remove{display:inline-block;}
.block-categories .collapse-icons{width: auto;text-align: right;left:0;}
Use this custom css code, you can find free module on this side to add custom css code to your site without editing files. The code is for the Classic theme, if it doesn't work, you need to send me your site url.
it works fine! Thank you!
And what changes I should do to make it not only expand/collapse the node but also open the category products?
@Winkli try this custom css code
.block-categories .collapse-icons{left:auto;}
Very good solution - works with all templates - I also checked with SP Destino đ
Hi ,
Your solution is working perfectly for custom theme PS 1.7.4, but not working for highlight the current category. I tried Your solution but couldn't succeed. Can you tell me where i put this line in ps_categorytree.tpl
class="{if isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id} current_cate {/if}"
Thanks.
Hello, put it to the "li" tag, carefully check the first image on step #3, you will find out where it should be put.
Thanks for the reply. I am using ps 1.7.4 and classic theme. I replace this line
class="{if isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id} current_cate {/if}"
whith the old line
class="navbar-toggler collapse-icons{if $c_tree_path && !in_array($node.id, $c_tree_path)} collapsed{/if}"
Replace in 2ed place as well, According the image on step#3 and put this line in custom CSS
.block-categories .category-sub-menu .current_cate > a{color:#E54D26;}.
But it doesn't work. What I did wrong. Sorry for asking again I am a new user.
You replaced the wrong line. You just need to add that code to the 3rd line showing on this picture https://www.sunnytoo.com/wp-content/uploads/2017/11/ScreenShot111903.jpg
Like this
<li data-depth="{$depth}" class=â{if isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id} current_cate {/if}â>
thanks a lot. It is working but without double quotation mark.
What's interesting for Warehouse is working this
{if $c_tree_path && in_array($node.id, $c_tree_path)}show{/if}
if paste this code
{if $c_tree_path && in_array($node.id, $c_tree_path)} in{/if}
the whole category tree disappears
Hello Jonny,
These modifications unfortunately do not work with collapsing categories,
Warehouse template,
What could be wrong?
This tutorial would work fine on Warehouse template, double check your modifications. If you still have problems, then transfer those two files to me via https://wetransfer.com/plus my email address is helloleemj@gmail.com so I can your modifications .
My fault - missing ",
Great tutorial, thanks!
Works perfect!
That works perfectly for expand current category, but u know how to expand the next categories relationed that are in the current?
With your solution only expand to view the subcategories in the same categorie:
1 Electronic - "Current"
2- Pencils
3- Rubbers
and
1 Electronic
----------1a-phones - "Current"
----------2a-cables
2- Pencils
3- Rubbers
But the problem is when u are a categorie as the next example.
And the correct is that:
For example if u has a 3 parent categories as:
1 Electronic - "Current"
----------1a-phones
----------2a-cables
2- Pencils
3- Rubbers
and
1 Electronic
----------1a-phones - "Current"
----------2a-cables
2- Pencils
3- Rubbers
with that, when the client stay in electronic, he can view two categories relationated.
U know how solve it????
Thanks!!!!
What version of prestashop you are running on?
i'm using 1.7.3.2
Hello Pepecop, I've updated this tutorial to explain how to achieve what you wanted, check it.
works perfectly!!!!!! U ARE A MACHINE!
:DDDDDDDDDDDDDDDDDDDD
Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
This does not work for me
The theme is similar to the classic and I attached it as described above but does not work ..
https://hoptuning.bg
1. Did you set the âCategory rootâ option to âHome categoryâ in the "Category tree links" module.
2. Transfer the \ps_categorytree\ps_categorytree.php file and the \themes\yourtheme\modules\ps_categorytree\views\templates\hook\ps_categorytree.tpl file to me via https://wetransfer.com/plus my email address helloleemj@gmail.com so I can check if you did modifications correctly
Your code works correctly when I put the topic theme classic theme.css no problem, I try to find where to modify theme.css on my theme on site https://hoptuning.bg. Currently + changes to - but does not open subcategories. Thank you for your attention