[Tutorial] quantity field in category view (product listing) PrestaShop 1.6

[vekia]

If you're wondering how to add quantity field to your online store based on PrestaShop 1.6 default bootstrap template, take a look on this guide: quantity field in category view PrestaShop 1.6

 

 

showcase of feature:

[papich]

Hi,

 

thanks for this no module fr this?

 

Can you display in all product listing?(homepage, category, promotion, new products....)

 

can you use it for display attributes and other things like stock and shipping?

 

i think you need to add -  and + like in product page

[haypro]

i think you need to add -  and + like in product page

 

Now you can do this. Just add following code into 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);
});

And into product-list.tpl

<input type="number" min="1" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text" value="1" />
<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_decr">
	<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_incr">
	<span><i class="icon-plus"></i></span>
</a>

Edited October 6, 2015 by haypro (see edit history)

[oksigraf]

Hi,

do you know how can I change this code if i have also multiply quantities? (I'm selling product by packs, for example by 6,12,18 etc.)  I have made the modification for product page, but I can't do it for my product list. So far I have made code that allow to show minimal quantity on product list, but my plus and minus button are still adding +1 and -1 when minimal quantity is added.

So I suppose I have to make

$('input[name='+fieldName+']').val(currentVal + MinimalQuantity).trigger('keyup');

instead of

$('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');

but it isn't working.

 

Please, help me.

[haypro]

Hi,

do you know how can I change this code if i have also multiply quantities? (I'm selling product by packs, for example by 6,12,18 etc.)  I have made the modification for product page, but I can't do it for my product list. So far I have made code that allow to show minimal quantity on product list, but my plus and minus button are still adding +1 and -1 when minimal quantity is added.

So I suppose I have to make

$('input[name='+fieldName+']').val(currentVal + MinimalQuantity).trigger('keyup');

instead of

$('input[name='+fieldName+']').val(currentVal + 1).trigger('keyup');

but it isn't working.

 

Please, help me.

Hello!

Make sure that you are using the variable minimalQuantity instead MinimalQuantity.

[oksigraf]

Thanks for the answer.

I have made minimalQuantity like you said, now it is like this:

    // 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 + minimalQuantity).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 - minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

but it is still nothing, I can say that nothing happens when I click + or - button.

I made a modification on your code in product-list.tpl to show minimal quantity in box instead of 1:

           <input type="number" min="1" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product.minimal_quantity > 1}{$product.minimal_quantity}{else}1{/if}{/if}" />
                            
<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_decr" 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_incr" style="clear:none;">
    <span><i class="icon-plus"></i></span>
</a>

And minimal quantity is shown, but I don't think my modification is the problem, because it was the same problem before I made it. On the other side, I have made modification on product.js for the product site to have multiply quantities:

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!allowBuyWhenOutOfStock && quantityAvailable > 0)
        quantityAvailableT = quantityAvailable;
    else
        quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('input[name='+fieldName+']').val(currentVal + minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(quantityAvailableT);
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', 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 - minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

And on product side it works perfectly. Do you know what I'm doing wrong? Maybe I have to add something else? Or in the other place? Please answer.

 

 

[haypro]

Thanks for the answer.

I have made minimalQuantity like you said, now it is like this:

    // 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 + minimalQuantity).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 - minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

but it is still nothing, I can say that nothing happens when I click + or - button.

I made a modification on your code in product-list.tpl to show minimal quantity in box instead of 1:

           <input type="number" min="1" name="qty_{$product.id_product|intval}" id="quantity_to_cart_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product.minimal_quantity > 1}{$product.minimal_quantity}{else}1{/if}{/if}" />
                            
<a href="#" data-field-qty="qty_{$product.id_product|intval}" class="btn btn-default button-minus product_quantity_decr" 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_incr" style="clear:none;">
    <span><i class="icon-plus"></i></span>
</a>

And minimal quantity is shown, but I don't think my modification is the problem, because it was the same problem before I made it. On the other side, I have made modification on product.js for the product site to have multiply quantities:

// The button to increment the product value
$(document).on('click', '.product_quantity_up', function(e){
    e.preventDefault();
    fieldName = $(this).data('field-qty');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!allowBuyWhenOutOfStock && quantityAvailable > 0)
        quantityAvailableT = quantityAvailable;
    else
        quantityAvailableT = 100000000;
    if (!isNaN(currentVal) && currentVal < quantityAvailableT)
        $('input[name='+fieldName+']').val(currentVal + minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(quantityAvailableT);
});
 // The button to decrement the product value
$(document).on('click', '.product_quantity_down', 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 - minimalQuantity).trigger('keyup');
    else
        $('input[name='+fieldName+']').val(1);
});

And on product side it works perfectly. Do you know what I'm doing wrong? Maybe I have to add something else? Or in the other place? Please answer.

Did you change .product_quantity_up & .product_quantity_down in product.js to .product_quantity_decr and product_quantity_incr?

[oksigraf]

Yes, I have made it too. I have changed ajax-cart.js file, in product.js I have still up and down. In ajax-cart.js was up & down, when I clicked on + or - button I was moving to the top of the site (and nothing else happens), but when there is incr & decr just nothing happens. Now the code is like I send before. Maybe I forget about something else? Or maybe I have to do it in different file?

[haypro]

Yes, I have made it too. I have changed ajax-cart.js file, in product.js I have still up and down. In ajax-cart.js was up & down, when I clicked on + or - button I was moving to the top of the site (and nothing else happens), but when there is incr & decr just nothing happens. Now the code is like I send before. Maybe I forget about something else? Or maybe I have to do it in different file?

 

I'm gonna test it on my store. It'll take a while.

[peperrrr]

Good morning from Spain,

Thanks for the great guide to Vekia

How to add quantity field on product lists

https://mypresta.eu/...oduct-list.html

Everything perfect and very well explained.

But I have a problem and took several days trying to fix it.
When I put a larger amount than 1 just add me to Basket 1 single unit.
Grateful that they could help me.

A greeting.

[malloco]

Hi everyone,

I'm doing this in my mobile template in category-product-list.tpl. the problem is that I only add 1 single unit per product. I think I should change something in cart.js but i don't know what.

Can anybody help me? thank you so much in advance

[malloco]

please, any ideas? I would like to solve this doubt. Thank yo so much!!!

[koca]

Hello, how can I do this for 8.0.1?

I want to create a quantity field in the product list and is it possible with the +,- box?

[koca]

This is exactly what I want, can I show my product list like this?