Adding multiple products and quantities to Prestashop’s Cart

In today’s tutorial, we will see how to enable a ‘Bulk add to cart’ functionality in Prestashop, to allow customers to add multiple products and quantities to their cart with a single click!

  • Compatibility: Prestashop 1.5 (all versions), Prestashop 1.4 with slight changes

What we will do

The main purpose of this tutorial will be to add checkboxes so that customers can select which products they want, and add them to cart with a single click (provided that they are on the same page!). However, since we are at it, we will also add a text input so that they can choose how many items they want to add as well. This new box will also work with the regular ‘Add to cart’, so feel free to follow the last step only if you want! Let’s get started.

The checkboxes and trigger button

The very first thing we need to do is add a couple of checkboxes so that people can choose which products they want. Of course, after they do this they need to be able to add them to cart as well, therefore we also need a trigger button.

As always, I will be using the default theme for the demonstration, and line numbers and contents might change if you use a custom one.

Open up product-list.tpl, located in your theme’s folder. Choose a suitable place for the checkbox; I decided to add it right above the normal ‘Add to cart’. So, after line 58, or wherever else you want inside the block, add:

<span class="checktoadd">
	{l s='Check to add to cart'} <input type="checkbox" value="{$product.id_product}" class="add_me_to_cart"/>
</span>

Save and refresh a category page, you should see something like this:

Add multiple products to Prestashop's Cart in one click

Yeah, it looks odd, but it’s only to demonstrate the purpose! As you can see, we are giving the checkbox a value equal to the product id, so that we know which ones are checked.

Let’s now add the trigger: At the very end of the file, right before this:


	<!-- /Products list -->
{/if}

Add this:

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

Nothing special here, it’s a normal button without any anchor link. We have our ground ready: let’s move on!

As a final touch, we need a piece of text to inform our customers if no item is checked. Add the following at the very end of product-list.tpl


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

The multiple ‘Add to cart’ Javascript

In order to add those products to cart at once, we need, needless to say, javascript. We will simply extend the core ‘Ajax add to cart’ functionality; therefore, this method will not work for those who decided not to use ajax.

Depending on your theme, you might, or might not have the file we need in the theme’s folder. Reach it, then go to js/modules and look for blockcart. If it’s there already, access the folder and open ajax-cart.js. If not, as if you are using the default theme, go back to Prestashop’s root, then modules/blockcart, grab ajax-cart.js, copy and paste it in the previously mentioned folder. At the end, this is the file we need to edit: themes/THEMENAME/js/modules/blockcart/ajax-cart.js.

Open up the file, and locate the following snippet at the beginning of it:

	//for every 'add' buttons...
	$('.ajax_add_to_cart_button').unbind('click').click(function(){
		...
	}

Right before it, let’s start adding our 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 {
			}
			

		});

As a first step, target the click to out multi add button, and store all check items’ checkboxes inside a variable. If none is selected, we alert a message, else, let’s add them to cart!

		$('.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 each of the items stored in the variable, we grab the val() attribute of the checkbox, which is the product id. Then, we simply call the default ajaxCart.add function to add them. Note the following:


$(item).parent().parent().find('.ajax_add_to_cart_button')

We passed it as fourth parameter to the function. It is referring to the default ajax add to cart button, so that the base script can grab the product image for the ‘add to cart’ animation.

In the end, we uncheck the box.

Save and test, we should already be done for this first step!

Adding multiple quantities to Prestashop’s cart

As we are done with the first step, let’s take care of adding the quantity input boxes. It’s far easier than it looks. Once more, locate a suitable place for the new content. I will get rid of the ‘view’ button of the default theme, to avoid overcrowding each product block.

Therefore, locate the following snippet in product-list.tpl:

	<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

And replace it with:

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

Add multiple product quantities to Prestashop's Cart in one click

Messy. But once again, this is a simple demonstration.

Now, for the javascript part, go back to ajax-cart.js (if you haven’t followed the tutorial so far, refer back to the beginning of “The multiple ‘Add to cart’ Javascript”). let’s first add the quantity variable to the default button, locate the following:

	//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;
	});

Store the chosen quantity as a variable right after the product id:

		//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);
			return false;
		});

If quantity is 0, or a non-numeric value, we simply do not perform the action. Lastly, add the quantity as fifth parameter to the ajaxCart.add method

		//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;
		});

And we are done! At this point, we can amend the previous section’s code, and allow adding multiple products and multiple quantities together.


		$('.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) {
					 $(item).parent().parent().find('.ajax_add_to_cart_button').click();
				});
			}

		});

There is no point in calling the same code 2 times, therefore we can simply trigger the default ajax add to cart button for each product.

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Lobna Karoui

    How can I apply this feature with prestashop 1.7

  • ahmed rami

    greatful tutorial , is that useful for the case of pack product , in order to get products details in order invoice ??

  • adminmsm

    Hello Nemo,

    I want to add multiple quantities of a product to the shopping cart, but not using ajax, that is with ajax disabled. Is this possible?

    Thanks Kathleen

  • Anshul Gupta

    Hey nice tutorial.
    But I want add ons similar to this on my cart page. I want that when someone goes to the cart page it will show 2 checkboxes and when someone check the box that price will get updated in the cart. And I’m using woocommerce plugin so plz tell me what can I do in it. https://uploads.disquscdn.com/images/ddd227631a2294bda6e7b4639889f217da405c78a7b0fe4a29d0a99b035d6ca4.jpg
    I want it like this so if someone will help me it’ll be really helpful.

  • Marvin

    Hi Nemo,
    I know this tutorial is a bit old but the concept is useful. Thanks for this!

    Suggestion:
    Why not remove the checkbox and instead, let the quantity field do the action, meaning, all quantity field that has a value of >=1 it will added to cart, no need to tick a checkbox per prodcut. I think this is feasible but I don’t know where to start.

    Cheers!

    • NemoPS

      That’s a nice idea for sure! Something like a loop with .val() > 0 would do

      • Marvin

        Yeah, something like that!

  • PUZEL

    plz answer me

  • PUZEL

    hi
    i userd this code but no working
    plz check
    http://ps.puzel.ir/summer-dresses/5-printed-summer-dress.html

  • PUZEL

    hi
    i add your code to site
    but no working
    plz help
    i nees to code
    my address prouduct :http://ps.puzel.ir/summer-dresses/5-printed-summer-dress.html

  • ritchieee

    Hi Nemo, always enjoy your tips on here and the forums.

    I’d like to implement something similar but with the accessories on the product page. It’d be nice to be able to tick the accessories, get the price to increase and add them all to the cart in one go. Separately of course. Rather like combinations I guess.

    Any pointers would be greatly appreciated .Thanks

  • Sarfaraz Raj

    Can you provide a workaround for placing the combination list for the product as well in the product list and adding that particular combination to the cart with the selected quantity.

  • http://imantra.in/khulla_kharido/en/3-atta Aman

    Hi,

    We would like the quantity option next to the add to cart button where the user can specify the quantity and press add to cart and the specific quantity is added directly instead of the current option where you need to click the “Cart” to increase the quantity after pressing the initial add to cart option

    http://imantra.in/khulla_kharido/ this is what we are working and we wish to have a quantity add field before the add to cart button similar to this reference link: http://delhilibrary.com/prestashop/index.php?id_category=3&controller=category
    On the product listing page

    We tried adding the quantity field box which you can see on the following page but which is currently not rightly placed…(http://imantra.in/khulla_kharido/en/3-atta)
    But this doesn’t work or is placed properly.. if you add a different quantity you will see that it does not add that specific quantity.

    • greg

      i am having same problem – it all works perfectly, it’s just not passing the quantity to the cart. it always add qty 1.. i se you have it fixed on your site?. how did you fix it? something wrong in ajax-cart.js?

  • Samdani

    Hi,

    Thanks for this nice tutorial. I do have one question. When i implement both portions of your tutorial, i am unable to add multiple quantities of products. It only adds one of each of the product selected.

    e.g. It does not recognize the value of QTY variable you have declared in your code.

    Thanks,
    Samdani

    • http://imantra.in/khulla_kharido/en/3-atta Aman

      Dear all,

      i applied the tutorial explained on this page:

      http://mypresta.eu/e…oduct-list.html

      However, I have problem with Product-list.tpl
      After applying changes, the quantity field does not appear and the add to cart button doesn’t work any more. Where was I wrong?
      please check this link

      http://imantra.in/khulla_kharido/en/3-atta

      Thank you

      • Juan Jose

        Heelo is possible, before add to cart reset number , quantity in box type
        // remove qty

        $(item).removeAttr(‘quantity’);

        • NemoPS

          That would just remove the quantity attribute. If you want to erase products from the cart, you need to latch on ajaxCart.remove(idProduct …)

        • Juan Jose

          i need ,
          remove the amount or the number that put the customer at the box it and return to get 1

    • Antonio

      I made it work.. Had the same problem. Let me explain my solution.

      I tried the tutorial instructions over a Prestashop 1.6 installation. Found the same problem as described in the posts here above. To make it work (add multiple quantities of several products) you have to be careful in the last line of the multi-add button code

      $(item).parent().parent().find(‘.ajax_add_to_cart_button’).click();

      to count the right number of ancestors (“container tags” between the added checkbox item and the button container (which contains the .ajax_add_to_cart_button).

      In my case (clean Prestashop 1.6), because of the new template structure, which uses lost of nested div and span tags, I had to use 5 nested parent() functions

      $(item).parent().parent().parent().parent().parent().find(‘.ajax_add_to_cart_button’).click();

      You can count the number of steps navigating the page with Firebug.

      It worked perfectly both for the grid and the list view of products.

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: