Añadir múltiples productos de una vez al carrito en Prestashop 1.5

En este tutorial vamos a ver cómo añadir una funcionalidad nueva al carrito de Prestashop 1.5. Concretamente, se trata de cómo añadir múltiples productos de una vez al carrito en Prestashop 1.5.

Lo que vamos a hacer...

Vamos a añadir casillas de verificación junto al botón de "Añadir al carrito", de forma que el cliente pueda seleccionar varios artículos y pueda añadirlos al carrito en un solo clic (estando en la misma página).

Añadiendo las casillas de verificación

Vamos a añadir una casilla de verificación sobre el botón de "Añadir al carrito", de forma que el cliente pueda seleccionar más de un artículo y pueda agregarlos al carrito de una sola vez mediante un botón que vamos a añadir nosotros.

Por lo tanto, vamos a abrir el archivo product-list.tpl, ubicado en la carpeta de nuestro tema. Aunque cada uno puede elegir dónde insertar las casillas, yo las voy a insertar sobre el botón de "Añadir al carrito". Buscar la línea...

{if ($product.allow_oosp || $product.quantity > 0)}
   {if isset($static_token)}

... y justo antes de esta línea añadir lo siguiente:

<span style="display:block; margin-bottom:5px" class="checktoadd">
 {l s='Cheque para añadir al carrito'}<input type="checkbox" value="{$product.id_product}" class="  add_me_to_cart"/>
</span>

De forma que quede así:

<span style="display:block; margin-bottom:5px" class="checktoadd">
 {l s='Cheque para añadir al carrito'}<input type="checkbox" value="{$product.id_product}" class="add_me_to_cart"/>
</span>
{if ($product.allow_oosp || $product.quantity > 0)}
   {if isset($static_token)}

Guardar cambios en el archivo y actualizar una página de categoría en Prestashop, deberíamos ver algo como esto:

Ahora vamos a añadir el bóton que agregará los productos al carrito. Al final del archivo, justo antes de esto...

 
{/if}

... Añadir esto, de forma que quede así:

<a href="javascript:void(0)" class="multi_add button">{l s='Añadir seleccionados al carrito'}</a>
 <!-- /Products list -->
{/if}

Como toque final y para acabar con este archivo, vamos a añadir un fragmento de código para informar a nuestros clientes (mediante un mensaje javascript) en el caso de que no hayan seleccionado ningún producto al clicar en el botón "Añadir seleccionados al carrito". Al final del archivo agregar esto:

Añadir múltiples productos al carrito gracias a JavaScript

Gracias a javascript podremos añadir múltiples productos de una vez al carrito. Vamos a extender, a modo de override, la funcionalidad ajax "Añadir al carrito". Es posible que no tengamos el archivo ajax-cart.js en la carpeta de nuestro tema, por lo tanto, si no tenemos este archivo, copiar el archivo ../prestashop/modules/blockcart/ajax-cart.js, y pegarlo en ../prestashop/themes/nuestro-tema/js/modules/blockcart/ajax-cart.js

Una vez pegado el archivo en la ruta indicada, abrirlo y buscar la siguiente línea:

//for every 'add' buttons...

Y justo antes añadir:

$('.multi_add').unbind('click').click(function() {
         
     // get all checked items
     var checked_items = $('.add_me_to_cart:checked');
 
     if(checked_items.length == 0)
        alert(noSelectionTxt);
     else {
        $.each(checked_items, function(i, item) {
             var id_prd = $(item).val(); // val of the checkbox!
             ajaxCart.add(id_prd, null, false, $(item).parent().parent().find('.ajax_add_to_cart_button'));
             // uncheck current element
             $(item).removeAttr('checked');
        });
    }
     
 
});

De forma que quede así:

$('.multi_add').unbind('click').click(function() {
         
     // get all checked items
     var checked_items = $('.add_me_to_cart:checked');
 
     if(checked_items.length == 0)
        alert(noSelectionTxt);
     else {
        $.each(checked_items, function(i, item) {
             var id_prd = $(item).val(); // val of the checkbox!
             ajaxCart.add(id_prd, null, false, $(item).parent().parent().find('.ajax_add_to_cart_button'));
             // uncheck current element
             $(item).removeAttr('checked');
        });
    }
});

 //for every 'add' buttons...

Hemos añadido una función que guardará todos los productos seleccionados mediante la casilla de verificación en una variable. Si no hay ningún producto seleccionado se lanzará un mensaje.

Para cada uno de los elementos almacenados en la variable, tomamos el valor de la casilla, que es el id del producto. Entonces llamamos a la función ajaxCart.add para agregar los productos.

Al final de la función desmarcamos las casillas de verificación.

Guardar y probar si funciona. ¡Suerte!