Afficher l'image sur prestashop 1.7 menu

Étape I - Ajoutez quelques images à votre menu

Lorsque vous créez ou modifiez vos menus Racine, vous verrez qu'une option vous permet de télécharger les images. Utilisez-le pour télécharger vos images.

Étape II - Ajouter du code pour afficher les images

Ok, maintenant nous ouvrons votre-site /thèmes/classique/ modules/ps_mainmenu/ps_mainmenu.tpl et trouvons le code autour de la ligne 27 :

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

Nous devons détecter s'il y a des images à l'intérieur de ce menu racine en ajoutant ce code :

  {if $node.image_urls}
  {/if}
  

C'est le résultat de cette étape :

  <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}
                  {/if}
  </div>
  

Maintenant, nous allons montrer toutes les images qu'il a en ajoutant ce code

  {foreach from=$node.image_urls item=image_url}
                          <img src="/%7B$image_url%7D" title="" alt="" />
  {/foreach}
  

C'est le résultat :

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

Il est temps d'en profiter :