• 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:

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" />

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.

The post Adding multiple products and quantities to Prestashop’s Cart appeared first on NemoPS.