Reordenar bloques en página de producto con Posiciones

mateomoda

Hola a todos,

Estoy intentando mover un bloque de tranquilidad del cliente (tipo 'sell points' o garantías) que tengo con un módulo personalizado. Actualmente se muestra con el hook displayReassurance, pero quiero que aparezca más arriba en la página del producto, idealmente justo encima del botón de "Añadir al carrito".

He ido a Diseño -> Posiciones y he intentado desenganchar mi módulo de displayReassurance y engancharlo a displayProductAdditionalInfo, pensando que esto lo colocaría más arriba. El problema es que, aunque el módulo aparece como enganchado en displayProductAdditionalInfo en el back office, el bloque no se ve en la tienda o se muestra en la misma posición de siempre, o en una posición que no es la que busco (encima del botón de añadir al carrito).

Mi módulo tiene esto en el install y ambos hooks implementados:

// modules/mycustomreassurance/mycustomreassurance.php
class MyCustomReassurance extends Module
{
    public function install()
    {
        return parent::install() &&
               $this->registerHook('displayReassurance') && // Hook original
               $this->registerHook('displayProductAdditionalInfo'); // Intentando añadirlo aquí
    }
    public function hookDisplayReassurance($params)

Estoy en PrestaShop 8.0.3 con el tema Classic. ¿Hay algo que se me escape? Quería evitar tocar código de plantilla si era posible.

monicaauto56

@mateomoda Entiendo tu frustración. Esto es un clásico en PrestaShop.

El problema es que la herramienta de "Diseño -> Posiciones" te permite mover módulos entre hooks ya existentes y llamados en la plantilla. Pero no te permite cambiar el orden en que la plantilla llama a esos hooks. displayProductAdditionalInfo se suele llamar en una parte del product.tpl que está después del botón de añadir al carrito, no antes.

Es decir, aunque enganches tu módulo a displayProductAdditionalInfo, si ese hook en la plantilla se renderiza más abajo, tu contenido seguirá apareciendo más abajo. Es la estructura de la plantilla (product.tpl y sus parciales) la que dicta el orden visual de los hooks, no solo la asociación del módulo al hook.

Milo

Hola @mateomoda,

@monicaauto56 lo ha clavado. Tu código PHP para registrar el módulo en ambos hooks es correcto, y la acción de enganchar/desenganchar en "Diseño -> Posiciones" también es la forma correcta de gestionar la visibilidad de los módulos en los hooks. El punto clave aquí es la llamada de esos hooks en los archivos .tpl del tema.

En el tema Classic (y en PrestaShop 8.0.3), el hook displayProductAdditionalInfo se incluye a través del archivo themes/classic/templates/catalog/_partials/product-additional-info.tpl, el cual a su vez es llamado en themes/classic/templates/catalog/product.tpl. Por defecto, esta inclusión se realiza en una sección que ya está por debajo del formulario de añadir al carrito.

Para conseguir que tu bloque aparezca encima del botón de añadir al carrito, lamentablemente, necesitarás modificar el archivo de plantilla product.tpl.

Te recomiendo encarecidamente que uses un tema hijo (child theme) para hacer esto, así tus cambios no se perderán con las actualizaciones del tema:

Crea un tema hijo si no lo tienes.
Copia el archivo themes/classic/templates/catalog/product.tpl a la misma ruta dentro de tu tema hijo: themes/yourchildtheme/templates/catalog/product.tpl.
Edita el product.tpl de tu tema hijo. Busca el bloque product_add_to_cart y el bloque product_additional_info. Vas a mover la llamada a product_additional_info para que esté antes de la llamada a product_add_to_cart.

Aquí te muestro cómo podrías reorganizarlo en tu product.tpl modificado:

{* themes/yourchildtheme/templates/catalog/product.tpl (fragmento) *}
{* ... Bloques previos como imágenes, descripción corta, etc. ... *}
{* Mueve la inclusión de product-additional-info.tpl aquí, antes del carrito *}
{block name='product_additional_info_top_position'}
  {include file='catalog/_partials/product-additional-info.tpl'}
{/block}
<div class="product-information">
  {* ... Información de precio, referencia ... *}
  {block name='product_add_to_cart'}
    {include file='_partials/product-add-to-cart.tpl' product=$product}

Una vez hecho esto, asegúrate de activar tu tema hijo. Después, en "Diseño -> Posiciones", puedes desenganchar tu módulo mycustomreassurance de displayReassurance y asegurarte de que está enganchado a displayProductAdditionalInfo.

Así, tu módulo se renderizará en la nueva posición que has definido en la plantilla.

mateomoda

¡Muchas gracias @Milo y @monicaauto56!

Tenía la esperanza de que se pudiera hacer sin tocar plantillas, pero entiendo perfectamente la explicación de que "Diseño -> Posiciones" solo mueve módulos entre hooks ya llamados en la plantilla, no reordena las llamadas de los hooks en sí.

He seguido las instrucciones de @Milo: creé un tema hijo, copié el product.tpl y moví el include del product-additional-info.tpl al lugar que quería. Después, en el back office, desenganché mi módulo de displayReassurance y lo enganché a displayProductAdditionalInfo.

¡Funcionó a la perfección! Ahora el bloque aparece justo donde quería, encima del botón de añadir al carrito. A veces hay que aceptar que el código es inevitable. 🙂

Un saludo y gracias por la ayuda tan detallada.