[FREE TUTORIAL] Adding multiple products and quantities to cart in 1 click

NemoPS · October 1, 2013

Hey everybody!

I just wrote a tutorial on adding different products and multiple quantities to the cart, all at once with one click. In the product list, of course!

here it is:

http://nemops.com/prestashop-cart-multiple-products-quantities/

Cheers!

alsitn · October 5, 2013

Thank you!

Beluga · October 7, 2013

Whaaat! You are my savior I was just about to start solving this myself, when I thought to search the forums one last time. Thank you!

Edit: How would you do this with no checkboxes, but that it would add all products where the quantity is > 0?

And where the initial value would of course be 0:

<input size="1" type="text" class="multi_product_quantity" value="0" />

I modified the code a bit, but don't know how to skip the "null quanitity" error message (it adds the items ok).

Edited October 7, 2013 by Beluga (see edit history)

Beluga · October 7, 2013

My client wants the amount input fields to have a particular behavior: when return/enter key is pressed, go to the next amount field; when up arrow is pressed, go to previous; when down arrow is pressed go to next.

Here is the jQuery code to achieve this (added to product-list.tpl):

    $(document).ready(function(){
        var $quan = $('.multi_product_quantity');
        $quan.on('keydown', function(e) {
            if (e.which === 13) { // enter key pressed
                var ind = $quan.index(this);
                $quan.eq(ind + 1).focus()
                return false
            }
            if (e.which === 38) { // up arrow pressed
                var ind = $quan.index(this);
                $quan.eq(ind - 1).focus()
                return false
            }
            if (e.which === 40) { // down arrow pressed
                var ind = $quan.index(this);
                $quan.eq(ind + 1).focus()
                return false
            }

        });
    });

Credits to a Stackoverflow answer

If you are interested in more Javascript keycodes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Edited October 7, 2013 by Beluga (see edit history)

alsitn · October 8, 2013

Hi Beluga,

Dealing with clients is never easy...

Thanks for the code and the great link. Is the blog yours?

You are indeed a good programmer!

Edited October 8, 2013 by alsitn (see edit history)

Beluga · October 8, 2013

Hi Beluga,

Dealing with clients is never easy...

Thanks for the code and the great link. Is the blog yours?

You are indeed a good programmer!

No, the blog is Nemo's (starter of this topic).

Beluga · October 9, 2013

I managed to solve my client's need to respect quantity > 0 and get rid of the checkboxes. Here is my code in ajax-cart.js now:

//override every button in the page in relation to the cart
    overrideButtonsInThePage : function(){
        $('.multi_add').unbind('click').click(function() {
                
            // get all items with values greater than 0
            var wanted_items = $('.multi_product_quantity').filter(function() {
                                    return parseInt($(this).val(), 10) > 0;
                                });
            if(wanted_items.length == 0)
                alert(noSelectionTxt);
            else {
                $.each(wanted_items , function(i, item) {                    
                    $(item).parent().parent().find('.ajax_add_to_cart_button').click();
                });
            }        
        });
        //for every 'add' buttons...
        $('.ajax_add_to_cart_button').unbind('click').click(function(){
            var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
            var qty = $(this).parent().find('.multi_product_quantity').val();
        
            // if quantity is 0 or NaN, return;
            if(qty == 0 || isNaN(qty))
                return false;
        
            if ($(this).attr('disabled') != 'disabled')
                ajaxCart.add(idProduct, null, false, this, qty);
            return false;
        });

This of course with the initial input value being 0:

<input size="1" type="text" class="multi_product_quantity" value="0" />

If you want to disable the animation in case you fear it will slow down the browser in case the customer adds a lot of products, you can do this commenting out in ajax-cart.js:

// Check if the block cart is activated for the animation
                /*if (cartBlockOffset != undefined && $picture.size())
                {
                    $picture.appendTo('body');
                    $picture.css({ 'position': 'absolute', 'top': $picture.css('top'), 'left': $picture.css('left'), 'z-index': 4242 })
                    .animate({ 'width': $element.attr('width')*0.66, 'height': $element.attr('height')*0.66, 'opacity': 0.2, 'top': cartBlockOffset.top + 30, 'left': cartBlockOffset.left + 15 }, 1000)
                    .fadeOut(100, function() {
                        ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
                        $(this).remove();
                    });
                }
                else*/

Edited October 9, 2013 by Beluga (see edit history)

alsitn · October 9, 2013

Hi Beluga,

yeah I know Nemo's blog. He's Italy's top Prestashop dev!

I was referring to your link http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

By the way great solution!

somesy · October 9, 2013

Hi Beluga,

Was wondering if you could help... I basically have a product page with a custom "add to cart" button. What I need to do is when this button is clicked it adds several products with the one click - other products will be hardcoded into the string.

So something like this works fine... ID# 182 gets added to cart

But this only adds ID# 182...

Any ideas?

THANKS

Beluga · October 9, 2013

Somesy: maybe Nemo can help you as I'm such a newbie myself I wouldn't know where to begin.

NemoPS · October 9, 2013

Somesy: well, it can't work that way unfortunately. As far as I know, there is not real way to add multiple products using a querystring.

What you can do is, taking advantage of the underlying javascript, call the add method of the ajax cart for each product you want to add. So, if you hardcode your product ids, save them into javascript variables, perhaps an array, loop through it and use the add method passing the product id and quanty every time

SupremeSource · May 7, 2014

Somesy: well, it can't work that way unfortunately. As far as I know, there is not real way to add multiple products using a querystring.

What you can do is, taking advantage of the underlying javascript, call the add method of the ajax cart for each product you want to add. So, if you hardcode your product ids, save them into javascript variables, perhaps an array, loop through it and use the add method passing the product id and quanty every time

hello, I was looking for a solution to sell products in multiples of Numbers. ... There is only the minimum amount and that is not good. Let me give an example: I have a chair sold only in multiples of 4. Then imposed the minimum quantity 4, but after the purchase, the customer can choose to buy 5 or 6 .. so on .. and that's not good .. should be able to add only in multiples .. I tried to follow the tutorial but without success .. can you help me?

NemoPS · May 8, 2014

You can try modifying the template and using a number input instead of a simple text one, like <input type="number" step="4"/>

SupremeSource · May 13, 2014

You can try modifying the template and using a number input instead of a simple text one, like <input type="number" step="4"/>

I'm sorry, could you tell me exactly the file where to make this change? i use prestashop 1.6

Edited May 13, 2014 by SupremeSource (see edit history)

NemoPS · May 14, 2014

In product.tpl. there should be a line reading:

<label>{l s='Quantity:'}</label>
							<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />

You can change that input type to number and add the step as mentioned above

benedettopresta · June 9, 2014

do you think it's possible to do something like this site:

http://www.bikiniworld.it/bikini-top-push-up-slip-tie-side-14256.html

it's being able to add 2 products in one cart, with different options.

NemoPS · June 10, 2014

I get a 404.

If you mean with a different combination id, yes, it is, but if you need it to work with ajax it might get complex, you have to add the parameter named "ipa" with the combination id to the 'add to cart' url. Of course you have to change how it works in the product page, from submitted form to link (as it does in product-list)

Alejandrosi · August 6, 2014

Hi! needing some help here..

I managed to add the quantity box but when i click on Add to cart it only sums one product. It doesn´t matter how many i add.

Hope someone can help me!

NemoPS · August 9, 2014

Did you check the ajax cart javascript file?

Alejandrosi · August 9, 2014

Hi thanks!

I made this work. Now I'm trying to fix the style of the boxes but as the name changes in every line according to the id of the product I can´t change all the quantity boxes styles at once.

<input type="text" name="ajax_qty_to_add_to_cart[10]" id="quantity_to_cart_10" value="1" size="2" maxlength="3">

<span>Añadir a carrito</span>

</a>

</div>

NemoPS · August 11, 2014

hm, what do you mean when you say " I can´t change all the quantity boxes styles at once" ?

Alejandrosi · August 11, 2014

Hi..sorry...

Let´s see...I created the quantity boxes for each line in the product list. I want to change the sixe and borders of the boxes but I don´t know how to do it in the css. Each line quantity box is different as the the id of the product also changes. How can I make the css chang all boxes at once?

Please let me kow if I was clear! Thanks again and sorry!

http://www.sienra.com.uy/tienda/index.php?id_category=13&controller=category&id_lang=3

NemoPS · August 13, 2014

Uhm... as far as I can see they are all the same, no? Anyway if you want o style them just give them the same class (class="something")

Alejandrosi · August 13, 2014

Got it! Thanks

TimK · August 20, 2014

hej hej,

please help me... I need your great function, but it don't run with PS 1.6. Did you test that? I wrote some messages with Beluga, but we both need your help...

with clicking this button:

<a href="javascript:void(0)" class="multi_add button">{l s='Add products to cart'}</a>

nothing starts to run...

I used the version of Beluga...

I hope you can help me / us!!

thanks

Edited August 20, 2014 by TimK (see edit history)

NemoPS · August 21, 2014

It's hard to tell what's going on, is your test live?
Unfortunately I don't have enough time at the moment to setup tests for 1.6

TimK · August 21, 2014

I set up a test shop -> http://aquanzen.firma.cc/

all default conf.... without product variants and creating accounts...

I used the code from Beluga:

Add the line below near the end of your theme's product-list.tpl, right before the last {/if}

<a href="javascript:void(0)" class="multi_add button">{l s='Add products to cart'}</a>

Add the following at the very end of product-list.tpl:

<script type='text/javascript'>
var noSelectionTxt = "{l s='No products selected'}";
</script>

Add and change some code blocks in the beginning of ajax-cart.js so it looks like this:

//override every button in the page in relation to the cart
    overrideButtonsInThePage : function(){
        $('.multi_add').unbind('click').click(function() {
                
            // get all items with values greater than 0
            var wanted_items = $('.multi_product_quantity').filter(function() {
                                    return parseInt($(this).val(), 10) > 0;
                                });
            if(wanted_items.length == 0)
                alert(noSelectionTxt);
            else {
                $.each(wanted_items , function(i, item) {                    
                    $(item).parent().parent().find('.ajax_add_to_cart_button').click();
                    $(item).parent().parent().find('.multi_product_quantity').val(""); // clear the input value after adding to cart
                });
            }        
        });
        //for every 'add' buttons...
        $('.ajax_add_to_cart_button').unbind('click').click(function(){
            var idProduct = $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
            var qty = $(this).parent().find('.multi_product_quantity').val();
        
            // if quantity is 0 or NaN, return;
            if(qty == 0 || isNaN(qty))
                return false;
        
            if ($(this).attr('disabled') != 'disabled')
                ajaxCart.add(idProduct, null, false, this, qty);
            return false;
        });
        //for product page 'add' button...
$('#add_to_cart input').unbind('click').click(function(){
ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
return false;
});

Change this line in product-list.tpl:

{l s='View'}

To the one below - it will get rid of the view-link to make the interface look cleaner and not overcrowded:

<input size="1" type="text" class="multi_product_quantity" value="0" />

I overwrote in the ajax-cart.js the following part:

//override every button in the page in relation to the cart
	overrideButtonsInThePage : function(){
		//for every 'add' buttons...
		$('.ajax_add_to_cart_button').unbind('click').click(function(){
			var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
			if ($(this).attr('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this);
			return false;
		});
		//for product page 'add' button...
		$('#add_to_cart input').unbind('click').click(function(){
			ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
			return false;
		});

Nothing starts run with clicking the button

Alejandrosi · August 21, 2014

Hey!

I´m not good with coding but following several tutorials and posts I managed to make it work. If it helps you, here are my product-list.tpl and ajax-cart.js. Hope it´s usefull!

Product-line.tpl (line 124)

<div class="button-container">
						{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
							{if ($product.allow_oosp || $product.quantity > 0)}
								{if isset($static_token)}
<input class="input" type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_to_cart_{$product.id_product|intval}" value="1" size="2" maxlength="3";/>
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								{else}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								{/if}						
							{else}
								
									<span></span>
								
							{/if}
						{/if}
					</div>

Ajax-cart (line 128)

//for every 'add' buttons...
		$(document).on('click', '.ajax_add_to_cart_button', function(e){
			e.preventDefault();
			var idProduct =  $(this).data('id-product');
			if ($(this).prop('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());
		});
		//for product page 'add' button...
		$(document).on('click', '#add_to_cart button', function(e){
			e.preventDefault();
			ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_to_cart_').val(), null);
		});

TimK · August 22, 2014

Thanks Alejandrosi, but it's not that what I need... I need one cart button for all products of the page with quantity >0 ... and that for PS 1.6

Nemo1, Beluga? Any ideas? :-|

Thanks to all

NemoPS · August 23, 2014

Hm, wait you mean you want to automatically add all products with quantity > 0 on click?

TimK · August 23, 2014

Yes, right... That's my use case... The code from Beluga is for that, how I understand it...

NemoPS · August 25, 2014

Yes, it is, have you tried using it?

TimK · August 25, 2014

Yes! And I wrote some messages with Beluga, but he don't know what's the problem with PS 1.6 and his code...

His code is the running code on my test site...

Edited August 25, 2014 by TimK (see edit history)

NemoPS · August 25, 2014

No ajax call is being fired, so it' s simply not doing anything. Try and debug, alert something right inside the click function, at the beginning, to see if that fires and where it eventually breaks

TimK · August 25, 2014

so...

I added an alert into the button and the alert is popping up...

<a onclick="alert('Button -> onclick -> alert')" href="javascript:void(0)" class="multi_add button">{l s='Add products to cart'}</a>

And I added an alert into the beginning of the ajax-cart.js ( ./modules/blockcart/ - and - ./themes/default-bootstrap/modules/blockcart/ ) and I don't get an alert... this file don't start?! but the normal buttons are right...

*  International Registered Trademark & Property of PrestaShop SA
*/

alert('Start of ajax-cart.js');

// Retrocompatibility with 1.4
//....

The alerts are on my test site online...

Have anyone an idea?

NemoPS · August 26, 2014

uhm... never seen using alert that way (first one), but I am no js [spam-filter]. If you don't get the ajax cart one, you are modifying the wrong file, use the one in the theme's folder

TimK · August 26, 2014

oh, I copied before the ajax-cart.js into the ./themes/_ThemeName_/modules/blockcart folder... but the theme ajax-cart.js is into that folder: ./themes/_ThemeName_/js/modules/blockcart ...

That JS file starts but I get every time a fail... "This product is not found - is not available" ...

I tested with my real project, but it don't run

NemoPS · August 27, 2014

it should be inside js/modules etc so you cannot add any of the chosen products? not even one? you have to try and check if you are passing in the correct product id

TimK · August 27, 2014

I found the problem with PS 1.6

The code from Beluga take the value for idProduct so:

var idProduct = $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');

and I changed it so:

var idProduct = $(this).attr('data-id-product');

And all is running great...

Beluga · August 27, 2014

I found the problem with PS 1.6

The code from Beluga take the value for idProduct so:
var idProduct = $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
and I changed it so:
var idProduct = $(this).attr('data-id-product');
And all is running great...

Thanks for your work! Btw. that is PrestaShop's own code. I wonder about the reason it works with data-id-product. Maybe Nemo can enlighten us.

NemoPS · August 29, 2014

the template used the rel attribute wrongly, as the w3c specification doesn't allow custom values. So, in 1.6 we also have

data-id-product="{$product.id_product|intval}"

That's why it works

You can also use $(this).data('id_product');

robynho90 · December 15, 2014

Hi nemo1,

i'm very noob with prestashop, i followed your guide, but the multi add button add to cart only 1 qty.

I use the default template 1.6, and here is my (your code )

		$('.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, this, $(item).parent().parent().find('.ajax_add_to_cart_button'));
					 // uncheck current element
					 $(item).removeAttr('checked');
				});
			} 
		});
		//for every 'add' buttons...
		$(document).on('click', '.ajax_add_to_cart_button', function(e){
			e.preventDefault();
			var idProduct =  $(this).data('id-product');
			if ($(this).prop('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());
		});

i had a input in product list, and in my cart functions, i add this $('#quantity_to_cart_'+idProduct+'').val() but evidently doesn't work with multi add button!

Thank you very much if you respond me!

NemoPS · December 15, 2014

As you're on 1.6, try setting the add to cart function to async: false, let me know if it helps

robynho90 · December 15, 2014

As you're on 1.6, try setting the add to cart function to async: false, let me know if it helps

If i understand, i've checked async in the ajaxcart.js and set to false (there are 6 function), maybe i'm wrong ? but in this case, the default button it works, could be that my input field is :

<input type="text" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text multi_product_quantity" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />

Thanks a lot

A-Z Hosting · December 15, 2014

As you're on 1.6, try setting the add to cart function to async: false, let me know if it helps

I didn't have much success on this one on 1.6 either. A. It didn't work and B. it interfered with the layered add to cart on the other categories. I have a secondary product-list being used if category id is equal to the a-la-carte category. Think you can have a look and see what it would take to get this "add all quantities to cart" button to work on my a-la-carte page.

http://spicnspanclean.enationworldwide.com/108-linen-rentals-a-la-carte

I tried every possible from the thread above. Had to revert it back to single add to cart w/quantity buttons until I have a solution for the multi-add.

Edited December 15, 2014 by A-Z Hosting (see edit history)

NemoPS · December 16, 2014

As far as I can see it's not triggering anything, can you share the code you used to target the multi add button? The others work with multiple quantities

@robynho90, could you share your site's url?

robynho90 · December 16, 2014

As far as I can see it's not triggering anything, can you share the code you used to target the multi add button? The others work with multiple quantities

@robynho90, could you share your site's url?

Thank you very much, but i'm testing prestashop in local !!!

However, if you want check my code (not many differences from default theme).

This is product-list.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if isset($products) && $products}
	{*define numbers of product per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=3}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=4}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}
	{*define numbers of product per line in other page for tablet*}
	{assign var='nbLi' value=$products|@count}
	{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
	{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
			<div class="product-container" itemscope itemtype="http://schema.org/Product">
				<div class="left-block">
					<div class="product-image-container">
						<a class="product_img_link"	href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
							<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
						</a>
						{if isset($quick_view) && $quick_view}
							<div class="quick-view-wrapper-mobile">
							<a class="quick-view-mobile" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
								<i class="icon-eye-open"></i>
							</a>
						</div>
						<a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
							<span>{l s='Quick view'}</span>
						</a>
						{/if}

						{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
							<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
								{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
									<span itemprop="price" class="price product-price">
										{*if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if*}
										{if $product.unit_price_ratio}
										{math equation="b/a" a=$product.unit_price_ratio b=$product.price_without_reduction assign=realunit}
										{convertPrice price=$realunit}
									{/if}
									</span>
									<meta itemprop="priceCurrency" content="{$currency->iso_code}" />
									{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
										{hook h="displayProductPriceBlock" product=$product type="old_price"}
										
										<!--<span class="old-price product-price">
											{displayWtPrice p=$product.price_without_reduction}
										</span>-->
										{if $product.specific_prices.reduction_type == 'percentage'}
											<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
										{/if}
									{/if}
									{hook h="displayProductPriceBlock" product=$product type="price"}
									{hook h="displayProductPriceBlock" product=$product type="unit_price"}
								{/if}
								<span class="plusvat">{l s=' - IVA esclusa'}</span>
								
								<span id="unit_price_product_list">
									<span class="pezzi">{l s="Pezzi per collo: "} {$product.unity}</span>
								</span>
								<span id="prezzo_al_collo">
									<span>{l s="Prezzo al collo: "}{math equation= $product.unity * $realunit format="%.2f"} €</span>
								</span>
							</div>
						{/if}
						{if isset($product.new) && $product.new == 1}
							<a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
								<span class="new-label">{l s='New'}</span>
							</a>
						{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
							<a class="sale-box" href="{$product.link|escape:'html':'UTF-8'}">
								<span class="sale-label">{l s='Sale!'}</span>
							</a>
						{/if}
						
					</div>
					{hook h="displayProductDeliveryTime" product=$product}
					{hook h="displayProductPriceBlock" product=$product type="weight"}
				</div>
				<div class="right-block">
					<h5 itemprop="name">
						{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
							{$product.name|truncate:50:'...'|escape:'html':'UTF-8'}
						</a>
					</h5>
					{hook h='displayProductListReviews' product=$product}
					<p class="product-desc" itemprop="description">
						{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
					</p>
					{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
					<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
						{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
							<span itemprop="price" class="price product-price">
								{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
							</span>
							<meta itemprop="priceCurrency" content="{$currency->iso_code}" />
							{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
								{hook h="displayProductPriceBlock" product=$product type="old_price"}
								<span class="old-price product-price">
									{displayWtPrice p=$product.price_without_reduction}
								</span>
								{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
								{if $product.specific_prices.reduction_type == 'percentage'}
									<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
								{/if}
							{/if}
							{hook h="displayProductPriceBlock" product=$product type="price"}
							{hook h="displayProductPriceBlock" product=$product type="unit_price"}
						{/if}

					</div>
					{/if}
					<div class="button-container">
						{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
							{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
								
								{if $page_name == 'category'}
							    <p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: true;"{/if}>
								<label>{l s='Quantità:'}</label>
								
								<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_down" style="clear:none;">
								<span><i class="icon-minus"></i></span>
								</a>
								<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-plus product_quantity_up " style="clear:none;">
								<span><i class="icon-plus"></i></span>
								</a>
								
								<span class="clearfix"></span>
								</p>{/if}
								<div id="quantit">
								<input type="text" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text multi_product_quantity" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />
								
								{if isset($static_token)}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								
								{else}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
										<span>{l s='Add to cart'}</span>
									</a>
								{/if}
								</div>
							{else}
								<span class="button ajax_add_to_cart_button btn btn-default disabled">
									<span>{l s='Add to cart'}</span>
								</span>
							{/if}
						{/if}
							{if $page_name == 'category'}
								<span class="checktoadd">
									{l s='Check to add to cart'} <input type="checkbox" value="{$product.id_product}" class="add_me_to_cart"/>
								</span>							
						{/if}
						<a itemprop="url" id="dettagli" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
							<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='Dettagli prodotto'}{/if}</span>
						</a>

					</div>
					{if isset($product.color_list)}
						<div class="color-list-container">{$product.color_list}</div>
					{/if}
					<div class="product-flags">
						{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
							{if isset($product.online_only) && $product.online_only}
								<span class="online_only">{l s='Online only'}</span>
							{/if}
						{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
							{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
								<span class="discount">{l s='Reduced price!'}</span>
							{/if}
					</div>
					{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
						{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
							<span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="availability">
								{if ($product.allow_oosp || $product.quantity > 0)}
									<span class="{if $product.quantity <= 0 && !$product.allow_oosp}out-of-stock{else}available-now{/if}">
										<link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
									</span>
								{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
									<span class="available-dif">
										<link itemprop="availability" href="http://schema.org/LimitedAvailability" />{l s='Product available with different options'}
									</span>
								{else}
									<span class="out-of-stock">
										<link itemprop="availability" href="http://schema.org/OutOfStock" />{l s='Out of stock'}
									</span>
								{/if}
								
							</span>
						{/if}
					{/if}
				</div>
				{if $page_name != 'index'}
	 				<div class="functional-buttons clearfix">
						{hook h='displayProductListFunctionalButtons' product=$product}
						{if isset($comparator_max_item) && $comparator_max_item}
							<div class="compare">
								<a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}">{l s='Add to Compare'}</a>
							</div>
						{/if}
					</div>
				{/if}
			</div><!-- .product-container> -->
		</li>
	{/foreach}
	</ul>
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}
{/if}

{if $display_qties == 1 && $product->quantity}
	{addJsDef quantityAvailable=$product->quantity}
{else}
	{addJsDef quantityAvailable=0}
{/if}
{if $page_name == 'category'}
<a href="javascript:void(0)" class="multi_add button">{l s='Aggiungi selezionati'}</a>
<script type='text/javascript'>
    var noSelectionTxt = "{l s='Nessun oggetto selezionato! Spunta gli articoli prima di premere'}";
</script>
{/if}

This is ajaxcart, with this single add works

		$('.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!
				$(item).parent().parent().find('.ajax_add_to_cart_button').click();
				});
			} 
		});
		//for every 'add' buttons...
		$(document).on('click', '.ajax_add_to_cart_button', function(e){
			e.preventDefault();
			var idProduct =  $(this).data('id-product');
			if ($(this).prop('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());
		});

i don't think depends on other files... i tried now, before the button work with qty always 1 all products, now it doesn't work... !

EDIT: sorry man, i forgot the line var id_prd = $(item).val(); // val of the checkbox!

so it works but always adds 1

Edited December 16, 2014 by robynho90 (see edit history)

A-Z Hosting · December 16, 2014

As far as I can see it's not triggering anything, can you share the code you used to target the multi add button? The others work with multiple quantities

Thanks for taking a look at it Nemo. I did figure out what was right in front of my face in the javascript and I added multi_product_quantity to the quantity field input class. Now it fires and finds the value. Afterwards though if I could get it to push to the shopping cart instead of using the overlay then it would be perfect.

Here's my ajax-cart. Any idea how to force it to the shopping cart page summary?

ajax-cart.js

 //for multi_add 'add' buttons...
        $('.multi_add').unbind('click').click(function() {
                
            // get all items with values greater than 0
            var wanted_items = $('.multi_product_quantity').filter(function() {
                                    return parseInt($(this).val(), 10) > 0;
                                });
            if(wanted_items.length == 0)
                alert(noSelectionTxt);
            else {
                $.each(wanted_items , function(i, item) {                    
                    $(item).parent().parent().find('.ajax_add_to_cart_button').click();
                    $(item).parent().parent().find('.multi_product_quantity').val("0"); // clear the input value after adding to cart
                });
            }        
        });

//for every 'add' buttons...
$(document).on('click', '.ajax_add_to_cart_button', function(e){
e.preventDefault();
var idProduct =  $(this).data('id-product');
if ($(this).prop('disabled') != 'disabled')
ajaxCart.add(idProduct, null, false, this, $('#quantity_to_cart_'+idProduct+'').val());
});

Wil

Edited December 16, 2014 by A-Z Hosting (see edit history)

NemoPS · December 17, 2014

Ah, I did it recently by calling this after the loop has done its things, but keep in mind you need to deactivate the async option for your ajax call (ajax-cart.js)

window.location.href = "http:/mysite.com/index.php?controller=order-opc";

A-Z Hosting · December 17, 2014

but keep in mind you need to deactivate the async option for your ajax call (ajax-cart.js)

How does one deactivate the async option? I need it as it all is for the other categories. Remember this product list is only for a certain a-la-carte category.

NemoPS · December 19, 2014

Ah, sorry. Ajax-cart.js, find the "add" method, and set async: false for its ajax call (currently set to true)

nickosn · January 31, 2015

Hi nemo1,

Can this be applied to the product page?

I would like to add the accessories of a product above the add to cart button and when a customer select it it will be added to the cart together with the product

much like amazon does

Kind Regards

NemoPS · February 2, 2015

Well the product page uses a form instead of a link, and thus more work is required. You'd have to make sure the proper combo is also selected and mark those accessories with some kind of selector so they can be added as well. Tough, but possible

nickosn · February 2, 2015

Thanks Nemo1,

Would be a nice idea for a tutorial :-)

NemoPS · February 2, 2015

Why not Added to my TODOs

matiss.jekabsons · May 18, 2015

Hallo to all...

Is there some manual for Prestashop 1.6 from zero to finish?

If not... i would be happy to help to write it, but then i need to get working it on my Presta.

Tried many ways, but still not working :/

NemoPS · May 20, 2015

It's not exactly related to this thread, but anyway, they do have the doc: http://doc.prestashop.com though I can't say it's 100% complete

matiss.jekabsons · May 20, 2015

Well i mean manual for prestashop (1.6) right for this "multiple quantities" adding Because i am willing to implement that, too. But for now, without success

Edited May 20, 2015 by matiss.jekabsons (see edit history)

NemoPS · May 22, 2015

Oh, not that I know, but the principle here should be valid for 1.6 as well

jjryeste · May 23, 2016

Hello is possible affter add to carr

reset quantity input in box fpr customer

example one customer add input 17 items and checked bod , add to cart

17 item is possible reset to 1 in box for new purchase

tipe

// uncheck current element

$(value).removeAttr('qty');

NemoPS · May 26, 2016

$(this).parent().find('.multi_product_quantity').val('');

jjryeste · May 26, 2016

this code is for reset value

$(this).parent().find('.multi_product_quantity').val('');

NemoPS · May 27, 2016

you can just put '1' instead

jjryeste · May 30, 2016

ok perfect , thank you demo work in prestashop 1.6 http://www.punto-cruz.org/hilos/

lionel95200 · December 19, 2016

Hello,

Thanks for you tutorial it's very helpful but i need to add differents product on page product :

For exemple i am on a page product (pull) and i want to add in one click :

5 Small Size color blue

7 Medium Size color blue

12 Large Size color red

Do you know how can i do that ?

Thank you

Todor Inchovski · January 16, 2019

How can this be added to Prestahsop 1.7?

NemoPS · January 25, 2019

This http://nemops.com/prestashop-1-7-product-list-add-to-cart-button/#.XEpo11wzaUk
Then you just create a button in category.tpl that when triggered submits all of those one after another.
Didn't test it but it will probably work

736Online2 · January 26, 2019

On 1/24/2019 at 8:40 PM, NemoPS said:

This http://nemops.com/prestashop-1-7-product-list-add-to-cart-button/#.XEpo11wzaUk
Then you just create a button in category.tpl that when triggered submits all of those one after another.
Didn't test it but it will probably work

@NemoPS: This is kind of relevant, any quick way on updating this:

http://nemops.com/save-prestashop-custom-fields-add-to-cart-2/#.XEyrgVxKiUk

I have a post here on it and just discovered this thread thinking that it may be helpful:

Edited January 26, 2019 by 736Online2
Added more info (see edit history)

metalines · June 18, 2021

On 1/25/2019 at 1:40 AM, NemoPS said:

This http://nemops.com/prestashop-1-7-product-list-add-to-cart-button/#.XEpo11wzaUk
Then you just create a button in category.tpl that when triggered submits all of those one after another.
Didn't test it but it will probably work

Would be really greatful if you could ellaborate on this.

I need to write a function that gets all of the checked items and then updatecart but im not sure how to go about it.

Hope someone can help.

[FREE TUTORIAL] Adding multiple products and quantities to cart in 1 click

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment