Mostrar la imagen en el menú de Prestashop 1.7

Paso I - Añade algunas imágenes a tu menú

Cuando crees o edites tus menús Raíz, verás una opción que te permitirá subir las imágenes. Úsalo para subir tus imágenes.

Paso II - Agregar código para mostrar las imágenes

Ok, ahora abrimos su sitio web / temas / clásico / módulos / ps_mainmenu / ps_mainmenu.tpl y encontramos el código alrededor de la línea 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>
  

Necesitamos detectar si hay alguna imagen dentro de este menú raíz agregando este código:

  {if $node.image_urls}
  {/if}
  

Este es el resultado de este paso:

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

Ahora mostraremos todas las imágenes que tiene añadiendo este código

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

Este es el resultado:

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

Es hora de disfrutarlo: