Barra de progreso de envío gratis en cabecera y carrito

valeria9483

Hola a todos,
Estoy buscando una manera de integrar una barra de progreso interactiva para el envío gratuito en mi tienda. Me gustaría que se mostrara en la cabecera y también en el cajón del carrito, indicando cuánto falta para alcanzar el umbral de envío gratis, por ejemplo: '¡Añade X EUR más para envío GRATIS!'.
He visto esto en algunas tiendas modernas (incluso con PrestaShop 9) y me parece una funcionalidad clave para animar a los clientes a aumentar su compra. En el Back Office de mi tienda, solo encuentro la configuración del umbral, pero nada para un widget visual que se actualice en tiempo real. ¿Alguien ha logrado implementar algo así? Cualquier orientación sería de gran ayuda.

pabloiberia17

Hola @valeria9483,
Es una excelente idea para el marketing y aumentar el ticket medio. Entiendo tu frustración, porque de serie PrestaShop no lo ofrece así de visual.
¿En qué versión exacta de PrestaShop estás? Aunque mencionas PS 9, la mayoría aún estamos en versiones anteriores, y el enfoque puede cambiar mucho si es 1.7 o una 8.x. También, ¿estás usando el tema Classic o alguno personalizado?

diego_admin

Lo que buscas, @valeria9483, es un clásico en PrestaShop. Sin un módulo específico, requiere una buena dosis de modificaciones. Nosotros lo hicimos una vez en una 1.7.x, y hubo que crear un hook personalizado para calcular el monto restante y luego pasarlo al Smarty. El reto principal es la parte visual y la reactividad: que se actualice sin recargar la página cuando el cliente añade productos. Eso implica JavaScript y CSS. Si estás en Classic, tendrás que modificar archivos del tema.

Milo

Hola @valeria9483,
Sí, es totalmente factible en PrestaShop 1.7.7.7 con el tema Classic, aunque requiere varias modificaciones. Aquí te detallo los pasos para conseguirlo:

Crear un módulo simple (o override menos limpio): Lo ideal es un pequeño módulo que use el hook displayHeader (para datos globales) y displayNav para la barra superior. En tu módulo, en el método hookDisplayHeader:

public function hookDisplayHeader($params)
    {
        $cart = Context::getContext()->cart;
        $freeShippingThreshold = (float)Configuration::get('PS_SHIPPING_FREE_PRICE');
        $currentCartTotal = $cart->getOrderTotal(true, Cart::BOTH_WITHOUT_SHIPPING);
        $remainingAmount = $freeShippingThreshold - $currentCartTotal;
        Media::addJsDef(array(
            'freeShippingThreshold' => $freeShippingThreshold,
            'currentCartTotal' => $currentCartTotal,
            'freeShippingRemaining' => max(0, $remainingAmount),

Este código prepara las variables JS que necesitarás en el frontend.

Plantilla Smarty (free_shipping_bar.tpl): Crea este archivo en modules/tu_modulo/views/templates/hook/. Aquí irá el HTML y Smarty para mostrar la barra y el texto:

{if $freeShippingRemaining > 0}
        <div id="free-shipping-progress-bar">
            <p>¡Añade <b>{$freeShippingRemaining|floatval|number_format:2} EUR</b> más para envío GRATIS!</p>
            <div class="progress-bar-container">
                <div class="progress-bar" style="width: {($currentCartTotal / $freeShippingThreshold * 100)|round}% !important;"></div>
            </div>
        </div>
    {/if}

JavaScript para la actualización: Necesitas escuchar los cambios en el carrito. Puedes añadir un archivo JS en tu módulo y registrarlo o directamente en free_shipping_bar.tpl dentro de un <script> tag:

prestashop.on('updatedCart', (event) => {
        const currentTotal = event.reason.cart.totals.total.amount;
        const threshold = freeShippingThreshold;
        let remaining = threshold - currentTotal;
        const progressBar = document.getElementById('free-shipping-progress-bar');
        if (progressBar) {
            if (remaining > 0) {
                progressBar.style.display = 'block';
                progressBar.querySelector('b').textContent = remaining.toFixed(2) + ' EUR';
                const percentage = (currentTotal / threshold) * 100;

Recuerda que freeShippingThreshold es una variable global inyectada por el PHP.

CSS: Añade estilos a themes/classic/assets/css/custom.css para que la barra se vea bien. Esta es una solución robusta que respeta la arquitectura de PrestaShop 1.7.7.7 y se actualiza dinámicamente. Asegúrate de instalar y habilitar tu módulo, y de vaciar la caché después de los cambios.

valeria9483

¡Increíble, @Milo! Muchísimas gracias por la explicación tan clara y detallada. Seguí tus pasos, creé el módulo, la plantilla Smarty y el JS para updatedCart, y ¡funciona perfectamente en mi PrestaShop 1.7.7.7! La barra se actualiza dinámicamente en la cabecera. Esto mejora mucho la experiencia de usuario. ¡Un 10 para ti!