Jump to content
NemoPS

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

Recommended Posts

Whaaat! You are my savior :D 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 by Beluga (see edit history)

Share this post


Link to post
Share on other sites

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 by Beluga (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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 by alsitn (see edit history)

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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 by Beluga (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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

<p><a id="ajaxButton_0" class="exclusive ajax_add_to_cart_button" title="Add to cart" href="/cart?qty=1&id_product=182&token=$token=Tools::getToken(true)&add" rel="ajax_id_product_182">Add to cart</a></p>

 

But this only adds ID# 182...

<p><a id="ajaxButton_0" class="exclusive ajax_add_to_cart_button" title="Add to cart" href="/cart?qty=1&id_product=182&id_product=183&id_product=184&id_product=185&token=$token=Tools::getToken(true)&add" rel="ajax_id_product_182">Add to cart</a></p>

 

Any ideas?

 

THANKS

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by SupremeSource (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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. 

 

<div class="button-container col-xs-7 col-md-12">
<input type="text" name="ajax_qty_to_add_to_cart[10]" id="quantity_to_cart_10" value="1" size="2" maxlength="3">
<a class="button ajax_add_to_cart_button btn btn-default" href="http://www.sienra.com.uy/tienda/index.php?controller=cart&add=1&id_product=10&token=8cf23b0eeaa366f49ea9c37aabf1c40d" rel="nofollow" title="Añadir a carrito" data-id-product="10">
<span>Añadir a carrito</span>
</a>
 
</div>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

 

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

 

 <input type="text" name="ajax_qty_to_add_to_cart[11]" id="quantity_to_cart_11" value="1" size="2" maxlength="3" ;="">

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by TimK (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by TimK (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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');

  • Like 1

Share this post


Link to post
Share on other sites

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 :P)

		$('.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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by A-Z Hosting (see edit history)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 license@prestashop.com 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 <contact@prestashop.com>
*  @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 by robynho90 (see edit history)

Share this post


Link to post
Share on other sites

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 by A-Z Hosting (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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');

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

this code is for reset value

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

Share this post


Link to post
Share on other sites

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


Share this post


Link to post
Share on other sites
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

@NemoPSThis 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 by 736Online2
Added more info (see edit history)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More