Cambiar etiquetas “h1” de los listados de productos en Prestashop 1.7

En Prestashop 1.7 (hasta la versión 1.7.3.0 RC1) vemos que en los listados de productos el título del producto esta englobado en un “h1”.

Veamos desde inspeccionar elemento.

Etiqueta H1 en los listados de productos
Etiqueta H1 en el título de los listados productos

Para cambiar la etiqueta “h1” en los listados de productos por otra etiqueta (h2/h3/ etc.. lo que nos interese) editamos el fichero:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

¿Por qué ese fichero?

Al acceder al fichero (correspondiente a la plantilla de visualización del módulo de productos destacados):

/themes/classic/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl

Vemos un include a:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl
(con un bucle foreach para imprimir los productos)

Bucle + include

Al acceder al fichero: /themes/classic/templates/catalog/listing/product-list.tpl  que corresponde al listado de productos por categoría o el que se usa de plantilla cuando buscamos un producto y arrojamos los resultados etc.. vemos otro include hacia el fichero:

/themes/classic/templates/catalog/_partials/products.tpl

Include

Al acceder al fichero:

/themes/classic/templates/catalog/_partials/products.tpl veremos que hace un include al fichero:

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Include
 Por lo tanto, los cambios los vamos a realizar en el fichero:


/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Buscamos el bloque ->  {block name=’product_name’}

{block name=’product_name’}

Y nos encontramos dentro la etiqueta “h1” junto con la variable que imprime el nombre del producto.

Etiqueta h1

Por ejemplo, la cambiamos por “h3”

Cambiar etiqueta h1 por h3

Cuando accedemos a los listados de productos, veremos un “h3” en los nombres de los productos.

Etiqueta cambiada

Si queremos que el cambio solo se aplique a la página principal y no al resto de listados, podemos usar un condicional con la variable:

 {$page.page_name}

Por ejemplo,

Si estamos en la página principal cambiamos los h1 de los títulos de los productos por h2, en el resto de sitios donde aparezcan los listados de productos colocamos otra etiqueta, por ejemplo el h3.

Etiqueta de título según sección en Prestashop

Fijaros que con:  {$page.page_name} hemos construido un condicional para comprobar en que sección estábamos.

Si accedemos ahora a la tienda, veremos que los títulos de productos tienen la etiqueta “h3” en la página principal.

h3 en los listados de productos de la página principal

Si accedemos a otra sección de la tienda que no sea el listado de productos de la página principal.

Por ejemplo los listados de productos por categoría, veremos la etiqueta “h2” en los listados de productos.

Listado de productos por categoría

Podéis más información sobre cómo construir condicionales en la documentación de Smarty:
https://www.smarty.net/docsv2/es/language.function.if.tpl
https://www.smarty.net/docs/en/language.function.if.tpl

El valor de la variable: {$page.page_name} lo podemos identificar fácilmente desde inspeccionar elemento donde el body tiene asignado mediante un id el valor de dicha variable.

ID sección categoría

Por ejemplo, cómo podemos ver en la captura, cuando estamos situados en la sección de los listados de productos por categoría el valor de {$page.page_name} es “category” mientras que cuando estamos en la página principal el valor es “index

Obviamente a que tener cuidado tocando el fichero: 

/themes/classic/templates/catalog/_partials/miniatures/product.tpl

Ya que afecta a todas las partes de la tienda (sean módulo u otras secciones) que realicen ese include, una forma de diferenciar donde estamos es con el: {$page.page_name}, otra es definiendo un include diferente para cada sección copiando la estructura general del que ya existe.

Dicho esto, en mi caso particular he aplicado los cambios del “ejemplo” editando sobre la misma plantilla, pero lo más conveniente es crear una plantilla hija y hacer solo los cambios pertinentes en la plantilla hija.

Documento construido en base Prestashop 1.7.3.0 RC1 y la plantilla por defecto.

PosData: Si no veis los cambios pulsar el botón de limpiar (vaciar) la cache en la pestaña Parámetros Avanzados -> Rendimiento