Jump to content
vekia

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


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

×

Important Information

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