Jump to content
tdr170

Category tree

Recommended Posts

Testing 1.7 and I see the category tree always collapse after selecting  a sub category, is there a way to have this remain open so you do not have to re-open menu to get to other sub categories as in 1.6.

 

I have looked but do not see anything, any ideas.

Share this post


Link to post
Share on other sites

Any page, open the menu and click on any subcategory and the menu collapses back to Women instead of staying on the subcategory.

 

I am testing the site in a 2 column layout so you use the left category tree all the time no top menu.

  • Like 1

Share this post


Link to post
Share on other sites

i have the same problem..

in 1.7 the categery tree does not stay open in the category u are in..

its very confusing for customers if u have like several subcategories..   for example  for mercedes -> filters -> Oilfilters

i would prefer also that the whole tree stays visible.. for easy navigating

Share this post


Link to post
Share on other sites

I have the same problem. I would aso prefer the whole tree is expanded.

 

Haven you already found a solution ?

I have found some themes where the created this. So there must be a way to get this working

Share this post


Link to post
Share on other sites

You can keep the whole tree similar on all pages by configuring the "Category tree links" module in Back-office.

Select the following option: Category root => Home category.

 

You can also try other options based on your requirement.

  • Confused 2
  • Sad 1

Share this post


Link to post
Share on other sites

Have you found a way to keep the category tree open on a category page ? 

@templatin, your solution is answering the question. It does have some options to configure, but what if you want to have the entire category tree (with all categories), open on current category ? That is what tdr170 is asking.

Thank you !

Share this post


Link to post
Share on other sites

I have a solution

You can add a class to the category tree you're in by 

{if $node.id == $category.id} displaymytree{/if}

Then, with Jquery, you can target all parents from this particular class 

$(document).ready(function(){
	$( '.displaymytree' ).parents( ".collapse" ).addClass('displaymytree');
});
  

And then, force display block on all elements with that class : 

.displaymytree.collapse {
    display: block;
}

Enjoy !

  • Like 1

Share this post


Link to post
Share on other sites
On 24/8/2017 at 0:40 PM, tiwelle said:

I have a solution

You can add a class to the category tree you're in by 


{if $node.id == $category.id} displaymytree{/if}

Then, with Jquery, you can target all parents from this particular class 


$(document).ready(function(){
	$( '.displaymytree' ).parents( ".collapse" ).addClass('displaymytree');
});
  

And then, force display block on all elements with that class : 


.displaymytree.collapse {
    display: block;
}

Enjoy !

And where should we put that code...

Share this post


Link to post
Share on other sites

I was trying to use this code 

{if $node.id == $category.id} displaymytree{/if}

in this file /themes/classic/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl but there is an error. I'm also don't know how/where to implement this change. Could you please give some advice? ;)
I have a feeling that if I would like to have mark selected category using some CSS class I have to use some code like above... Am I right?

 

What I would like to acheive is to have by default expanded all categories and subcategories. I would like to have shown, expanded all categories all the time as I have now in PS 1.6 (my shop on PS 1.6: https://palmatum.pl ). Any advice?

categories-expanded.png

 

Now with this new PS 1.7 (not so new today...) I'm feel like years ago with OsCommerce - when I would like to have something - I have to code this by myself ;)

Edited by Rynraf (see edit history)

Share this post


Link to post
Share on other sites

Answer to my own question... :P In my Prestashop I would like to have exapned all categories all the time. I'm starting with "Classic" theme.

In file: /themes/classic/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl it's enugh to make two little changes.
In two lines (line numer 39 and 50) which looks like this:
<div class="collapse" id="exCollapsingNavbar{$node.id}">
add " in" to class atribute and add attribute "aria-expanded" with value "true". Final this two lines will look like this:
<div class="collapse in" id="exCollapsingNavbar{$node.id}" aria-expanded="true">

That's all. Upload changed file.

  • Thanks 1
  • Confused 1

Share this post


Link to post
Share on other sites

Same problem here, current category is not staying active and open. Any solutions ?

Share this post


Link to post
Share on other sites

Dear  tantan199

your code works fine. The only thing that is missing for the classic theme is the collapse in. The arrows and + works fine, also after reloade but the whole navigation remains open. I still can recommend your solution.

kind regards,

Share this post


Link to post
Share on other sites

@Kunsthelden what did you mean "the whole navigation remains open"? Can you please explain it more, so I can improve that guide.

Thanks.

Share this post


Link to post
Share on other sites
Quote

Works great on PS 1.7.2.4!! Thanks so much!

Unfortunately it works not on PS 1.7.4.4.

Is there a solution?

Or can someone upload the modified files? Maybe I made something wrong?

Kind regards from Switzerland

Edited by satellite73 (see edit history)

Share this post


Link to post
Share on other sites
On 12/19/2017 at 4:54 AM, tantan199 said:

Hi,

 

I created a tutorial several weeks ago about the problem, check it here: how to set the Category tree links module to expand the brunch containing current category in PrestaShop 1.7,  

Thanks a lot, it works perfect, the info is really useful for a 1.7.2.4. I still don't understand this lost of features between 1.6 and 1.7 ..

 

Share this post


Link to post
Share on other sites

In case somebody still fights and wants a neat one .tpl file solution without CSS involved.

See my answer at the end in this thread.

Just adding"in" to one class and then {if !$_collapse} aria-expanded="true"{/if} to reverse aria status from closed to opened for icon to work correctly.

 

Share this post


Link to post
Share on other sites

This does not work on 1.7.5.1 . I tried.

 jak nastavit modul pro propojení kategorií stromů a rozšířit brunch obsahující aktuální kategorii v PrestaShopu 1.7 ,  

My site :

https://hopshop.bg/

 

its my  code theme 

 

file ps_categorytree.tpl

 


{function name='categories' nodes=[] depth=0}
  {strip}
    {if $nodes|count}
      <ul class="category-sub-menu list-unstyled list-arrows font-weight-bold">
        {foreach from=$nodes item=node}
          <li data-depth="{$depth}">
            {if $depth === 0}
              <a href="{$node.link}">{$node.name}</a>
              {if $node.children}
                <div class="navbar-toggler collapse-icons border-0 float-right" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
                  <i class="icon-add-square add" aria-hidden="true"></i>
                  <i class="icon-remove-square remove hidden" aria-hidden="true"></i>
                </div>
                <div class="collapse" id="exCollapsingNavbar{$node.id}">{categories nodes=$node.children depth=($depth + 1)}</div>
              {/if}
            {else}
              <a href="{$node.link}" class="category-sub-link">{$node.name}</a>
              {if $node.children}
                <span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
                  <i class="icon-angle-right arrow-right ml-2 align-top" aria-hidden="true"></i>
                  <i class="icon-angle-down arrow-down ml-2 align-top hidden" aria-hidden="true"></i>
                </span>
                <div class="collapse" id="exCollapsingNavbar{$node.id}">{categories nodes=$node.children depth=($depth + 1)}</div>
              {/if}
            {/if}
          </li>
        {/foreach}
      </ul>
    {/if}
  {/strip}
{/function}

<div class="block-categories side-block">
  <p class="block-title"><a href="{$categories.link nofilter}">{$categories.name}</a></p>
  <div class="block-content">{categories nodes=$categories.children}</div>
</div>
 

Share this post


Link to post
Share on other sites
Posted (edited)

 

On 12/19/2017 at 4:54 AM, tantan199 said:

Hi,

 

I created a tutorial several weeks ago about the problem, check it here: how to set the Category tree links module to expand the brunch containing current category in PrestaShop 1.7,  

Hello,

I have classic rocket theme, and I do it everything like in your tutorial, except one (where is span, in classic rocket there is no span in that place, and I also replace 'in' by 'show').  And now I have a problem when I click on "clothes" category, I would like to all category in clothes to be showed, but this only show category when I go to "Men".

 

Edit. When I change for classic theme, and do everything like in the tutorial I have the same problem

Zrzut ekranu (8).png

Zrzut ekranu (9).png

Edited by mysz (see edit history)

Share this post


Link to post
Share on other sites

@mysz I mentioned how to expand the current category’s child categories in that tutorial, you probably didn't see that part.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More