Banner diferente para cada producto según categoría

[JoseGut 11]

He estado buscando una solución para aparezca un banner superior específico para cada producto según la categoría a la que corresponda y no he encontrado nada por internet, así que me he puesto manos a la obra. Con esta modificación del código original puedes hacerlo utilizando la plantilla por defecto. Lo que se puede conseguir es lo que ves en la imagen de más abajo.

 

El módulo ps_banner está incluido en el paquete de instalación de Prestashop, concretamente en la carpeta Themes/classic/modules. Por defecto está preparado para aparecer en la Home de la tienda pero, desde el apartado Diseño/Posiciones en la Admin de la tienda, puedes anclarlo en otros hooks y decidir en qué páginas quieres que aparezca.

Si quieres que se muestre el banner en las páginas de categoría o de producto a ancho completo -como en las imágenes del ejemplo de más arriba-, puedes fijar el módulo Banner al hook "displayNavFullWidth" y decirle en el listado que aparece más abajo en qué páginas NO quieres que se muestre (no olvides marcar index o el banner aparecerá dos veces en la Home, una en la parte superior y otra en el centro).

Jugando con la imagen del carousel y el banner central de la home, junto con las imágenes de categoría -que se asignan en la administración de la tienda-, se puede conseguir un sitio web mucho más atractivo desde el propio tema por defecto.

Y el código del archivo ps_banner.tpl modificado:

{if isset($category) && isset($product.description)}
  <a class="banner" href="{$link->getCategoryLink($category)|escape:'html':'UTF-8'}"><img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')}" alt="Volver a la categoría" title="Volver a la categoría" class="img-fluid" ></a>

{elseif isset($category) && ! isset($product.description)}
  <a class="banner" href="{$urls.current_url}"><img src="{$urls.img_cat_url}{$category.id}-category_default.jpg" alt="NOMBRE DE LA TIENDA" title="NOMBRE DE LA TIENDA " class="img-fluid" ></a>

  {else}
  <a class="banner" href="{$banner_link}"><img src="{$banner_img}" alt="{$banner_desc}" title="{$banner_desc}" class="img-fluid" ></a>
{/if}

Como veis, le estamos diciendo al banner que:

1. si están definidas las variables "category" y "product.description", nos muestre la imagen de la categoría padre del producto. Sería la imagen del banner para la ficha de producto. Si se pincha sobre el banner, volveríamos a la categoría padre.
2. si está definida "category" pero no lo está "product.description", nos muestre la imagen de la categoría. Sería la imagen que vemos en el banner si pinchamos en cualquier menú sobre una categoría determinada, etc. Al pinchar en la categoría nos quedaríamos en la URL en que estemos.
3. Si nada de esto está definido, le decimos que aparezca la imagen genérica del banner, al menos en la Home de la web. Dependerá de la estructura que hayas especificado en la Admin de la tienda, en el apartado de Diseño/Posiciones.

Adjunto el archivo ps_banner modificado.
Como resumen, si quieres que en las fichas de producto aparezca un banner con la imagen de la categoría a la que pertenece, tienes que cambiar el archivo ps_banner original por el que adjunto y fiarlo en un hook superior en las páginas de categoría y producto

Hasta donde he podido probar, funciona como la seda. Estoy seguro de que se puede mejorar y ampliar añadiéndole nuevas funcionalidades (por ejemplo, que aparezca en nombre de la categoría en el title del banner correspondiente a cada categoría. Esto no lo he hecho, sino que he puesto un claim sobre la tienda. Espero no molestar a nadie y que os guste.

 

ps_banner.tpl

Edited August 28, 2018 by JoseGut (see edit history)