How to show subcategories images on Prestashop top menu

Few months ago i wrote a tutorial to share about the way to show categories images on menu.

Then @Psdesigner and @Damien Belgacig asked me about the way to put subcategories images instead of main category's image. Sorry 2 guys, Disqus didn't tell me about your comments.

Well, as my previous article, if you edit ps_mainmenu template file (ps_mainmenu.tpl) and put the source code as my suggest, all categories images will be showed on Prestashop Menu. In case you only want to allow subcategories images, we need to make some changes.

How to show subcategories images in Prestashop top menu

Step I - Make sure you uploaded subcategories images

Edit your subcategories and upload menu's image as my previous article. You can't show the images if you don't have at least one, right?

Upload images to Categories menus

Step II - Only allow subcategories images

Ok, this is the most important step. You need to make sure the main category is the root menu, and the categories are the submenus. I don't have time to play with Prestashop default menu so i don't know can we setup a subcategory as a root menu or not (we have Magic Menu - do you remember? We love it so much and hope people use it everyday :D).

Re-open your-website/themes/classic/modules/ ps_mainmenu/ps_mainmenu.tpl file and find the code around line 27. This is what we got:

  <div {if $depth === 0} class="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}
                      {foreach from=$node.image_urls item=image_url}
                          <img src="/%7B$image_url%7D" title="" alt="" />
                      {/foreach}
                  {/if}
  </div>
  

Take a look into this code: {foreach from=$node.image_urls item=image_url}. It will shows all images. We need to interactive with the child menus (subcategories) and tell them to release the images. Change all above to:

  <div {if $depth === 0} class="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}
                      {foreach from=$node.children depth item=mychild}
                            {foreach from=$mychild.image_urls item=image_url}
                                  <img src="/%7B$image_url%7D" title="" alt="" />
                            {/foreach}
                      {/foreach}
                  {/if}
  </div>
  

Well, hope this trick is helpful. Don't forget to visit this blog everyday for more Prestashop Tutorials. I will have something news for you.

Get this Advanced Cart Rules module

New module.

Xleft module

Xleft shows customers how much more they need to spend to get free shipping in real time.

Ultimo aggiornamento moduli!

Age Restriction - 18+ ⊙
Risolvere alcuni problemi di visualizzazione sui dispositivi mobili.


Newsletter Popup v3.2.2
Christmas Edition per incrementare le tue vendite.


Trusty v1.4.7 ⊙ 
Compatibile con PrestaShop 1.7 e PrestaShop 8.

PrestaSOO team
Tutto il necessario per guadagnarti da vivere facendo il lavoro che ami.

Scoprire


È un investimento saggio

I moduli Prestashop che abbiamo creato per primi per risolvere il problema del nostro business - un sito di e-commerce. Ciò significa che sono molto utili per un'azienda seria. Se apprezzi la tua proprietà web, questi moduli sono un investimento saggio.
Sarah Reeves, Sviluppatore di app @ PrestaSOO
Realizzato con a Parigi e Hanoi
PrestaSOO © 2024. Tutti i diritti riservati. // Politica sulla riservatezza Termini di servizio