Hola @martaadmin, buen intento, vas por el camino correcto pero hay que ajustar unos detalles importantes, especialmente para que funcione bien con PrestaShop 1.7.6.5 (que asumo es tu versión, como comentó @inmaes82). El principal desafío es la sincronización de datos entre el formulario principal del producto y tu barra fija.
Para solucionar esto, haremos lo siguiente:
- Modificar
product.tpl: No duplicaremos todo el formulario, sino que crearemos un contenedor para la barra fija y, dentro, clonaremos solo los elementos clave del formulario principal que PrestaShop ya actualiza con su JS.
- Añadir CSS: Ajustaremos el CSS para que la barra se muestre solo en móviles y sea pegajosa en la parte inferior, sin tapar contenido crucial.
- JavaScript: Usaremos el evento
updatedProduct del tema de PrestaShop para que tu barra fija se actualice cada vez que cambie una combinación o la cantidad en el formulario principal.
Aquí tienes el código ajustado. Primero, en themes/classic/templates/catalog/product.tpl (idealmente en un child-theme/templates/catalog/product.tpl para no perder los cambios al actualizar el tema), busca el bloque product_add_to_cart y añade este fragmento después del bloque principal de product_add_to_cart o al final del archivo si prefieres tenerlo más separado:
{* Barra de Añadir al Carrito Sticky para Móvil *}
<div id="js-sticky-add-to-cart-wrapper" class="js-sticky-add-to-cart-wrapper">
<div class="product-add-to-cart d-flex justify-content-between align-items-center p-2">
<div class="product-quantity">
<input type="number" name="qty" id="quantity_wanted_sticky" value="{$product.quantity_wanted}" class="form-control" min="{$product.minimal_quantity}">
</div>
<div class="add pl-2">
<button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if}>
<i class="material-icons shopping-cart"></i> {l s='Add to cart' d='Shop.Theme.Actions'}
</button>
Y este CSS lo añadirías a tu archivo themes/classic/assets/css/custom.css (o en tu tema hijo):
/* Sticky Add to Cart Bar for Mobile */
.js-sticky-add-to-cart-wrapper {
display: none; /* Ocultar por defecto */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 10px 15px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
Explicación de los cambios:
- Smarty/HTML: Hemos renombrado el ID a
js-sticky-add-to-cart-wrapper y añadido una clase para el JS. El botón de 'Añadir al carrito' ahora tiene el atributo disabled condicional, igual que el original.
- JavaScript: El script se asegura de que cuando el evento
updatedProduct se dispare (por ejemplo, al cambiar una combinación en el formulario principal), la cantidad y el estado del botón en tu barra sticky se actualicen. También añadimos listeners para que los cambios en la cantidad de la barra sticky se reflejen en el input original y el click en el botón sticky simule un click en el botón original, aprovechando la lógica existente de PrestaShop.
- CSS: El
display: block en el media query es para que el contenedor flexible funcione correctamente. Se ha añadido un padding-bottom a #wrapper para que el contenido no quede oculto bajo la barra fija en móviles. Ajusta 70px según la altura final de tu barra.
Con esto, deberías tener una barra funcional y sincronizada.