Jump to content

[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)
Link to comment
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
Link to comment
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
Link to comment
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

 

 

Link to comment
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 :)

Link to comment
Share on other sites

  • 6 months later...

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?

Link to comment
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 :)

Link to comment
Share on other sites

  • 4 weeks later...

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)

Link to comment
Share on other sites

  • 1 month later...

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>
Link to comment
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

Link to comment
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)
Link to comment
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 :(

Link to comment
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);
		});
Link to comment
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?

Link to comment
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 :(

Link to comment
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
Link to comment
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.

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

  • 3 months later...

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!

Link to comment
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

Link to comment
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)
Link to comment
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 [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 by robynho90 (see edit history)
Link to comment
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)
Link to comment
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";

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
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

Link to comment
Share on other sites

  • 3 months later...
  • 1 year later...

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

Link to comment
Share on other sites

  • 6 months later...

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


Link to comment
Share on other sites

  • 2 years later...
  • 2 weeks later...
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)
Link to comment
Share on other sites

  • 2 years later...
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...