Jump to content

1.7.6 Main Menu: how to limit one children subcategory in menu

Presta_lover
 Share

Recommended Posts

Presta_lover Newbie

Presta_lover

Posted
Posted

Hi guys,

I am trying to customize main menu module by hardconding the ps_mainmenu.tpl file.

I will need to limit just one children the subcategory showed when hover the main category.

 

I.e:

If I have main category Honda

and for this category: honda 125, honda 250, honda 300

and for this subcategories:

honda 125 PCX

honda 125 CBR

....

 

I just want to show first childs:

 

HONDA => HONDA 125

But it shows everything...

  

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
        <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
            {foreach from=$nodes item=node}
                <li class="classic-list {$node.type}{if $node.current} current {/if} {if $node.children|count} has-child {/if} level{$depth}" id="{$node.page_identifier}">
                    {assign var=_counter value=$_counter+1}
                    <a
                        class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                        href="{$node.url}" data-depth="{$depth}"
                        {if $node.open_in_new_window} target="_blank" {/if}
                        >
                        {if $node.children|count}
                            {* Cannot use page identifier as we can have the same page several times *}
                            {assign var=_expand_id value=10|mt_rand:100000}
                            <span class="float-xs-right hidden-md-up">
                                <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                    <i class="material-icons add">&#xE313;</i>
                                    <i class="material-icons remove">&#xE316;</i>
                                </span>
                            </span>
                        {/if}
                        {$node.label}
                    </a>
                    {if $node.children|count}
                        <div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                            {menu nodes=$node.children depth=$node.depth parent=$node}
                            {if $node.image_urls|count > 0}
                                <div class="cat-bottom-block" data-count="{$node.children|count}">
                                    {foreach from=$node.image_urls item=image_url}
                                        <p>
                                            <img src="{$image_url}" alt="{$node.label}">
                                        </p>
                                    {/foreach}
                                </div>
                            {/if}
                        </div>
                    {/if}
                </li>
            {/foreach}
        </ul>
    {/if}
{/function}
<div class="top-navigation-menu">
    <div class="container">
        <div class="menu navbar-block col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
            {menu nodes=$menu.children}
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Could you tell me where to change that?

Thanks a lot!

Link to comment
Share on other sites
Mr Rick Contributor

Mr Rick

Posted
Posted

Hi,

I think this will work if you change it like below adding  "&& $node.depth <= 1" 

{if $node.children|count}
<div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
  {if $node.image_urls|count > 0}
  <div class="cat-bottom-block" data-count="{$node.children|count}">
    {foreach from=$node.image_urls item=image_url}
    <p>
      <img src="{$image_url}" alt="{$node.label}">
    </p>
    {/foreach}
  </div>
  {/if}
</div>
{/if}
             

To 

{if $node.children|count && $node.depth <= 1}
<div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
  {if $node.image_urls|count > 0}
  <div class="cat-bottom-block" data-count="{$node.children|count}">
    {foreach from=$node.image_urls item=image_url}
    <p>
      <img src="{$image_url}" alt="{$node.label}">
    </p>
    {/foreach}
  </div>
  {/if}
</div>
{/if}

 

Link to comment
Share on other sites
Presta_lover Newbie

Presta_lover

Posted
  • Author
Posted
On 2/28/2020 at 1:24 PM, Matt Rix said:

Hi,

I think this will work if you change it like below adding  "&& $node.depth <= 1" 


{if $node.children|count}
<div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
  {if $node.image_urls|count > 0}
  <div class="cat-bottom-block" data-count="{$node.children|count}">
    {foreach from=$node.image_urls item=image_url}
    <p>
      <img src="{$image_url}" alt="{$node.label}">
    </p>
    {/foreach}
  </div>
  {/if}
</div>
{/if}
             

To 

{if $node.children|count && $node.depth <= 1}
<div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
  {menu nodes=$node.children depth=$node.depth parent=$node}
  {if $node.image_urls|count > 0}
  <div class="cat-bottom-block" data-count="{$node.children|count}">
    {foreach from=$node.image_urls item=image_url}
    <p>
      <img src="{$image_url}" alt="{$node.label}">
    </p>
    {/foreach}
  </div>
  {/if}
</div>
{/if}

 

Hi @Matt Rix!!

thank you very much for your help.

However, I was trying to do the wrong thing...

If you could help me, I would apreciate so much.

I want to show in desktop just ONE child from parent category and in mobile all category and subcategories.

This is because in desktop, if user hover main menu category parent, it will display a lot of childs, and this is an aweful experience. But in mobile, it is good navigation to have posibility to see all categories and subcategories whwe click on main menu.

 

I reach this:

  

{**
    * 2007-2018 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * https://opensource.org/licenses/AFL-3.0
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to [email protected] so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author    PrestaShop SA <contact@prestashop.com>
    * @copyright 2007-2018 PrestaShop SA
    * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
    * International Registered Trademark & Property of PrestaShop SA
    *}
    {assign var=_counter value=0}
    {function name="menu" nodes=[] depth=0 parent=null}
        {if $nodes|count}
            <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
                {foreach from=$nodes item=node}
                <!-- added 28022020     -->
                    <li class="classic-list {$node.type}{if $node.current} current {/if} {if $node.children|count} has-child {/if} level{$depth}" id="{$node.page_identifier}">
                        {assign var=_counter value=$_counter+1}
                        <a
                            class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                            href="{$node.url}" data-depth="{$depth}"
                            {if $node.open_in_new_window} target="_blank" {/if}
                            >
                            {if $node.children|count}
                                {* Cannot use page identifier as we can have the same page several times *}
                                {assign var=_expand_id value=10|mt_rand:100000}
                                <span class="float-xs-right hidden-md-up">
                                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                        <i class="material-icons add">&#xE313;</i>
                                        <i class="material-icons remove">&#xE316;</i>
                                    </span>
                                </span>
                            {/if}
                            {$node.label}
                        </a>
                        {if $node.children|count}
                            <div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                                {menu nodes=$node.children depth=$node.depth parent=$node}
                                {if $node.image_urls|count > 0}
                                    <div class="cat-bottom-block" data-count="{$node.children|count}">
                                        {foreach from=$node.image_urls item=image_url}
                                            <p>
                                                <img src="{$image_url}" alt="{$node.label}">
                                            </p>
                                        {/foreach}
                                    </div>
                                {/if}
                            </div>
                        {/if}
                    </li>
                {/foreach}
                {$node}
                {if $node.depth < 2 && $node.label != 'BMW' && $node.label != 'HONDA' && $node.label != 'KAWASAKI' && $node.label != 'KYMCO' && $node.label != 'PEUGEOT' && $node.label != 'PIAGGIO' && $node.label != 'SUZUKI' && $node.label != 'SYM' && $node.label != 'VESPA' }
                <li class="classic-list category has-child level0" >
                    <a class="dropdown-item" data-depth="0">
                        <span class="float-xs-right hidden-md-up">
                            <span data-target="#top_sub_menu_68283" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                <i class="material-icons add"></i>
                                <i class="material-icons remove"></i>
                            </span>
                        </span>
                        [+] 
                    </a>
                    <div class="classic-menu popover sub-menu js-sub-menu collapse customNav" id="top_sub_menu_37730" style="top: 59px; 						display: none;">
                        <ul class="top-menu" data-depth="1">
                            <li class="classic-list category has-child level1" id="category-4427">
                                <a class="dropdown-item dropdown-submenu" href="https://motoscalleja.com/es/3-APRILIA" data-depth="1">
                                    <span class="float-xs-right hidden-md-up">
                                        <span data-target="#top_sub_menu_14616" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                            <i class="material-icons add"></i>
                                            <i class="material-icons remove"></i>
                                        </span>
                                    </span>
                                    APRILIA
                                </a>
                            </li>
                                                      <li class="classic-list category has-child level1" id="category-4427">
                                <a class="dropdown-item dropdown-submenu" href="https://motoscalleja.com/es/3-APRILIA" data-depth="1">
                                    <span class="float-xs-right hidden-md-up">
                                        <span data-target="#top_sub_menu_14616" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                            <i class="material-icons add"></i>
                                            <i class="material-icons remove"></i>
                                        </span>
                                    </span>
                                    BMW
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                    {/if}
                </li>
            </ul>
        {/if}
    {/function}
    <div class="top-navigation-menu">
        <div class="container">
            <div class="menu navbar-block col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
                {menu nodes=$menu.children}
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

But this not work as expected.

I hope you can understand.

Thanks again

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
 Share
Go to topic listing
×
×
  • Create New...