Jump to content

Sub-category menu on mobile 2 columns


Albatrosss

Recommended Posts

Hi. On mobile, I want to show the sub-categories menu on the product page in 2 columns. But when I edit the file, there are 2 lines both on the mobile and on the desktop. How can I solve my problem?

public_html/themes/x/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl

{function name="categories" nodes=[] depth=0}
{strip}
{if $nodes|count}

<ul class="category-sub-menu">
{foreach from=$nodes item=node}
{assign var=category_products value=Module::getInstanceByName('ps_categorytree')->getProducts($node.id)}
<li data-depth="{$depth}" >
{if $depth===0}
<a href="{$node.link}">{$node.name} ({count($category_products)})</a>

{if $node.children}
<div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
<i class="material-icons add">&#xE315;</i>
<i class="material-icons remove">&#xE313;</i>
</div>
<div class="collapse" id="exCollapsingNavbar{$node.id}">
{categories nodes=$node.children depth=$depth+1}
</div>
{/if}
{else}
<a class="category-sub-link" href="{$node.link}">{$node.name} ({count($category_products)}) </a>

{if $node.children}
<span class="arrows" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}">
<i class="material-icons arrow-right">&#xE315;</i>
<i class="material-icons arrow-down">&#xE313;</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}

{assign var=category_products_dva value=Module::getInstanceByName('ps_categorytree')->getProducts($categories.id)}

<div class="block-categories">
<ul class="category-top-menu">
<li><a class="text-uppercase h6″ href="{$categories.link nofilter}">{$categories.name} ({count($category_products_dva)})</a></li>
<li>{categories nodes=$categories.children}</li>
</ul>
</div>

I changed 8th the row:

<li data-depth="{$depth}" class="col-xs-6 col-md-2 col-lg-2">

It works the way I want on mobile, but it must be the same on the desktop.

Link to comment
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
×
×
  • Create New...