Jump to content

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


Go to solution Solved by Arpels,

Recommended Posts

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

Share this post


Link to post
Share on other sites
  • 10 months later...

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

Important Information

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