Cómo crear un botón para vaciar el carrito en Prestashop

¿Te gustaría ofrecer a tus clientes una forma sencilla de vaciar su carrito de compras en tu tienda PrestaShop? En este tutorial, te guiaré paso a paso para crear un botón que permita a los usuarios eliminar todos los artículos de su carrito con un solo clic.

Paso 1: Accede a tu panel de administración

Inicia sesión en el panel de administración de tu tienda PrestaShop. Aquí es donde realizarás todas las configuraciones necesarias.

Paso 2: Edita el archivo de la plantilla

1. Ve a Diseño > Plantillas.
2. Busca el archivo de la plantilla que estás utilizando. Por lo general, se encuentra en la carpeta themes/tu_tema/templates/checkout.
3. Localiza el archivo cart.tpl o shopping-cart.tpl, donde se muestra el carrito.

Paso 3: Agrega el botón

Dentro del archivo de la plantilla, añade el siguiente código HTML donde desees que aparezca el botón de vaciar el carrito:

<button id="empty-cart" class="btn btn-danger">
    Vaciar Carrito
</button>

Paso 4: Añade la funcionalidad JavaScript

Para que el botón funcione, necesitas agregar un poco de JavaScript. Asegúrate de incluir este código justo antes de la etiqueta de cierre </body> en tu archivo de plantilla o en un archivo JavaScript externo:

document.getElementById('empty-cart').addEventListener('click', function() {
    if (confirm('¿Estás seguro de que deseas vaciar el carrito?')) {
        // Realiza una solicitud para vaciar el carrito
        fetch('/cart?ajax=1&action=delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Actualiza la vista del carrito
                window.location.reload();
            } else {
                alert('Error al vaciar el carrito. Inténtalo de nuevo.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Hubo un problema al vaciar el carrito.');
        });
    }
});

Paso 5: Prueba el botón

Después de guardar los cambios, dirígete a tu tienda y agrega algunos productos al carrito. Deberías ver el nuevo botón de «Vaciar Carrito». Haz clic en él y verifica que funcione correctamente.

Por último puedes darle un poco de diseño mediante CSS para adaptarlo a tu web y que sea más atractivo.

¡Y eso es todo! Ahora tus clientes tienen la opción de vaciar su carrito de compras de manera rápida y sencilla. Esta pequeña funcionalidad puede mejorar la experiencia de compra y hacer que tus usuarios se sientan más cómodos al navegar por tu tienda.

Si tienes alguna duda o quieres compartir tus experiencias, ¡déjamelo saber en los comentarios!