Reubicar bloques de producto sobre el botón 'Añadir al carrito'

inmahub64

Buenas, estoy intentando organizar mejor la ficha de producto en mi tienda y me encuentro con un problema. Quiero mover algunos bloques, como el de confianza del cliente (el de los iconos de envío, pago seguro, etc.) y los botones para compartir en redes sociales, para que aparezcan antes del botón de 'Añadir al carrito'.

He ido a Diseño -> Posiciones y he intentado trasplantar los módulos, pero parece que no me deja colocarlos justo donde quiero, especialmente por encima del bloque principal del carrito. Entiendo que los hooks tienen un orden en la plantilla, pero pensé que con el Back Office se podría reordenar más libremente.

Actualmente, en la plantilla product.tpl, la estructura de esos bloques es algo así:

{* Fragmento de themes/classic/templates/catalog/product.tpl o subplantillas *}
{* Bloque del botón Añadir al carrito y cantidad *}
{block name='product_add_to_cart'}
  <div class="product-actions">
    <form action="{$product.url}" method="post" id="add-to-cart-or-refresh">
      {* ... formulario del carrito y botón ... *}
    </form>
  </div>
{/block}
{* Bloque de información adicional (donde suelen ir los botones sociales) *}

Mi idea es que los bloques de displayProductAdditionalInfo y displayReassurance estén visualmente por encima de product_add_to_cart sin tocar directamente el código de la plantilla. ¿Es esto posible con la funcionalidad de trasplantar módulos?

antoniovlc

@inmahub64 Entiendo perfectamente tu frustración. La verdad es que "Diseño -> Posiciones" es muy útil para mover módulos entre hooks existentes, pero no te da control total sobre el orden de los hooks o bloques hardcodeados dentro de la plantilla product.tpl en sí. Si un bloque Smarty está definido después de otro, por mucho que muevas los módulos enganchados a esos hooks, su posición relativa en el HTML final no cambiará.

¿Qué versión exacta de PrestaShop estás usando? En algunas versiones de 1.7 la plantilla Classic tiene más hooks disponibles en diferentes sitios, lo que podría darte más juego. A veces la solución es trasplantar el módulo a un hook diferente que ya está más arriba en el flujo HTML.

sergio_dev

Estoy de acuerdo con @antoniovlc. En PrestaShop 1.7.4.1, que es la versión que creo que tienes por la estructura que comentas, los bloques product_add_to_cart, product_additional_info y product_reassurance suelen estar en ese orden en el código de la plantilla product.tpl o sus subplantillas. Esto significa que los módulos que se enganchan a displayProductAdditionalInfo o displayReassurance siempre se renderizarán después del formulario de añadir al carrito por defecto.

Para conseguir lo que quieres sin editar el product.tpl directamente, la única forma sería trasplantar el módulo de confianza (como ps_customerreassurance) o el de compartir (ps_sharebuttons) a un hook que se llame antes del bloque del carrito. Podrías probar con displayProductButtons si está presente y se renderiza antes, o incluso displayProductFormLeft.

Milo

Hola @inmahub64, como bien comentan @antoniovlc y @sergio_dev, el desafío aquí radica en que aunque puedes reordenar módulos dentro de un mismo hook, no puedes alterar el orden de los bloques de Smarty o de las llamadas a hook h='...' que están ya definidos en la plantilla product.tpl utilizando solo el Back Office.

Estás en PrestaShop 1.7.4.1, y en esta versión (y el tema Classic), el product_add_to_cart se renderiza antes que product_additional_info y product_reassurance en la mayoría de los casos. Para mover, por ejemplo, el módulo de confianza del cliente (ps_customerreassurance) por encima del botón de 'Añadir al carrito', lo que necesitas hacer es trasplantarlo a un hook que PrestaShop renderice antes en la ficha de producto.

Una buena opción para este propósito, que se suele renderizar justo antes del bloque principal de acciones del producto, es el hook displayProductButtons o incluso displayProductFormLeft. El displayProductButtons es ideal para elementos que deben ir justo antes del botón de 'Añadir al carrito'.

Aquí te muestro un fragmento conceptual de cómo se ve el orden de los hooks en esa parte de la plantilla. Tu objetivo es mover los módulos a un hook que se encuentre arriba:

{* Fragmento relevante de themes/classic/templates/catalog/product.tpl *}
{* Este hook se suele renderizar antes del formulario principal del producto *}
{hook h='displayProductFormLeft'}
{* Este hook se encuentra a menudo justo antes del botón Añadir al carrito *}
{hook h='displayProductButtons'}
{block name='product_add_to_cart'}
  {* ... Aquí va el formulario y el botón Añadir al carrito ... *}
{/block}
{* Otros hooks que vienen después del carrito *}
{hook h='displayProductAdditionalInfo'}

Pasos para el Back Office:

Ve a Diseño > Posiciones.
Busca el módulo que quieres mover (por ejemplo, Módulo de confianza del cliente o Botones para compartir en redes sociales).
Haz clic en el botón 'Desenganchar' (el icono de la papelera) al lado del hook actual (ej. displayReassurance o displayProductAdditionalInfo).
Una vez desenganchado, haz clic en el botón 'Trasplantar un módulo' en la esquina superior derecha.
Selecciona el módulo que acabas de desenganchar.
En la lista de 'Enganchar el módulo a', busca y selecciona displayProductButtons o displayProductFormLeft.
Guarda los cambios.

Esto moverá el módulo a un punto anterior en el renderizado de la página, sin necesidad de tocar product.tpl.

inmahub64

¡Muchísimas gracias, @Milo! ¡Eso era exactamente lo que necesitaba! No se me había ocurrido probar con displayProductButtons para los botones sociales y el de confianza. Lo he trasplantado y ahora aparecen justo donde quería, por encima del botón de añadir al carrito. Ha funcionado a la perfección sin tener que modificar la plantilla.

Gracias también a @antoniovlc y @sergio_dev por sus aclaraciones sobre el orden de los hooks. Ha sido muy útil entender por qué mi primer intento no funcionaba. ¡Problema resuelto!