[SOLVED]Quantity field with -/+ buttons in product list 1.6.1.x

[Arpels]

Hello,

 

I've seen many post on this forum, several website (including Vekia's) to proceed with this manipulation but with no luck for the critical part : Add to cart button include the quantity desired.

 

Before going further, I point out that the code is based on my theme (no big change regarding the default)

 

Here is how I proceed : 

 

• Added the following code to product-list.tpl in theme/my-theme/product-list.tpl :

<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)}
	 <a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_decr">
	 <span><i class="fa fa-minus"></i></span></a>

	 <input type="text" min="1" name="qty_{$product.id_product|intval}" id="quantity_wanted_{$product.id_product|intval}" class="text" value="1" size="2" readonly>

	 <a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-plus product_quantity_incr">
	 <span><i class="fa fa-plus"></i></span></a>

• Added the following code to ajax-cart in theme/my-theme/js/module/blockcart/ajax-cart.js :

// The button to increment the product value
$(document).on('click', '.product_quantity_incr', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
		quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(quantityAvailableT);
});


 // The button to decrement the product value
$(document).on('click', '.product_quantity_decr', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal) && currentVal > 1)
        $('input[name='+fieldName+']').val(currentVal - 1).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});


//JS Object : update the cart by ajax actions
var ajaxCart = {
	nb_total_products: 0,
	//override every button in the page in relation to the cart
	overrideButtonsInThePage : function(){
		//for every 'add' buttons...
		$(document).on('click', '.ajax_add_to_cart_button', function(e){
/* 		$(document).off('click', '.ajax_add_to_cart_button').on('click', '.ajax_add_to_cart_button', function(e){
 */			e.preventDefault();
 			var idProduct =  parseInt($(this).data('id-product'));
			if ($(this).prop('disabled') != 'disabled')
				/* DEBUT AJOUT ADD QUANTITY */
 				ajaxCart.add(idProduct, null, false, this, $('quantity_wanted_'+idProduct+'').val());
				/* FIN AJOUT ADD QUANTITY */
		});

What happens ? : 

 

• Button -/+ are working
• Desired quantity is not taken into account BUT, each time I add a product, the quantity is auto incremented (1st click = 1 / 2nd click=2 and so on)

I've tried many things : 

 

• Checking the default bootstrap code to see how it's done for the product page
• Checking my theme code to see how it's done for the product page, which should be more meaningfull regarding above. 

I've noticed that things are done differently for the product page :

 

• ajax-cart.js from default-bootstrap :

//JS Object : update the cart by ajax actions
var ajaxCart = {
	nb_total_products: 0,
	//override every button in the page in relation to the cart
	overrideButtonsInThePage : function(){
		//for every 'add' buttons...
		$(document).off('click', '.ajax_add_to_cart_button').on('click', '.ajax_add_to_cart_button', function(e){
			e.preventDefault();
			var idProduct =  parseInt($(this).data('id-product'));
			var idProductAttribute =  parseInt($(this).data('id-product-attribute'));
			var minimalQuantity =  parseInt($(this).data('minimal_quantity'));
			if (!minimalQuantity)
				minimalQuantity = 1;
			if ($(this).prop('disabled') != 'disabled')
				ajaxCart.add(idProduct, idProductAttribute, false, this, minimalQuantity);
		});
		//for product page 'add' button...
		if ($('.cart_block').length) {
			$(document).off('click', '#add_to_cart button').on('click', '#add_to_cart button', function(e){
				e.preventDefault();
				ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
			});
		}

• ajax-cart.js from my theme :

//JS Object : update the cart by ajax actions
var ajaxCart = {
	nb_total_products: 0,
	//override every button in the page in relation to the cart
	overrideButtonsInThePage : function(){
		//for every 'add' buttons...
		$(document).on('click', '.ajax_add_to_cart_button', function(e){
			e.preventDefault();
 			var idProduct =  parseInt($(this).data('id-product'));
			if ($(this).prop('disabled') != 'disabled')
				/* DEBUT AJOUT ADD QUANTITY */
 				ajaxCart.add(idProduct, null, false, this, $('quantity_wanted_'+idProduct+'').val());
				/* FIN AJOUT ADD QUANTITY */
		});
		//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_wanted').val(), null);
		});

I think i'm clause to the solution, but for now, I can't make it work.

I feel the issue is located in the JS file because all arguments and parameters matches between .TPL and .JS.

 

It might be related to how the value is passed to the ajaxCart.add function.

 

If a wizard can help me out, it would be great.

 

Thanks anyway for ready this

 

Prestashop version : 1.6.1.3

Edited March 23, 2017 by Arpels (see edit history)

[Arpels]

Ok so I found my issue, I had another JS that bypassed the function.

 

I made it worked.

 

For info, Vekia's tutorial does work.

 

 

[zalej]

share with us