résolu Désactiver lien catégorie CMS sur le menu.

[MrSoulPC915]

Bonjour,

Je bricole un petit presta pour un pote, et je cherche a améliorer le comportement du menu sur le theme classic (sur presta 8.1.7).

J'ai un menu de ce type :

Catégorie produit 1
    Catégorie produit 1.1
        Catégorie produit 1.1.1
        Catégorie produit 1.1.2
        Catégorie produit 1.1.3
    Catégorie produit 1.2
        Catégorie produit 1.2.1
        Catégorie produit 1.2.2
Catégorie page 1
    Page 1
    Page 2
    Page 3
Catégorie page 2
    Page 4
    Page 5
    Page 6
Page 7

Je désire simplement désactiver le lien vers la catégorie de page.

J'entends par là que je veux toujours que le sous menu s'ouvre au hover en desktop ou au clic en mobile, mais qu'il n'ouvre pas cette horrible et inutile page qui liste les pages contenus dans la catégorie :

Quote

 

Catégorie page 1

Liste des pages dans Catégorie page 1 :

• Page 1
• Page 2
• Page 3

 

J'imagine qu'il faut rajouter une exception de type "if categorie cms" sur un thème enfant du thème classic, mais ça fait un baille que je n'ai pas fait de thème sur Prestashop, il faut que j'interroge quel variable ?

Edited July 31 by MrSoulPC915 (see edit history)

[MrSoulPC915]

Bon, pas très compliqué, tout se passe dans le fichier /themes/classic_child/modules/ps_mainmenu/ps_mainmenu.tpl. Deux méthodes :

Facile :

On remplace :

              <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}
              >

par :

              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{if $node.type == "cms-category"}#{else}{$node.url}{/if}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >

Ça fonctionne direct, ça créer des liens interne vide (c'est pas idéal).

Avancé :

On remplace :

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

par :

              {if $node.type == "cms-category"}
                <span
                  class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                  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}
                </span>
              {else}
                <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}

C'est idéal car les catégories CMS ne sont plus des liens, mais il faut rajouter un pointe de CSS pour que les balises span du menu aient le même aspect que les a.

Donc on rajoute dans /themes/classic_child/config/theme.yml :

assets:
  use_parent_assets: true
  css:
  all:
    - id: custom-style
    path: assets/css/custom.css

et dans /themes/classic_child/assets/css/custom.css :

#header .header-top span[data-depth="0"] {
  color: #7a7a7a;
  text-transform: uppercase;
  cursor: pointer;
}
.top-menu span[data-depth="0"] {
  padding: .625rem;
  font-size: 1rem;
  font-weight: 600;
}

 

PS : Et évidemment, on vide le cache !

Edited August 1 by MrSoulPC915 (see edit history)