Jump to content

[SOLVED] Add quantity box to product listing


 Share

Recommended Posts

Hi, i would be gratefull for some help if anyone has done this before.

I want to add a quantity box to the product listing pages (similar to on the full view product page.

I have copied the following code from product.tpl to product-list.tpl, and have managed to get the quantity box to show up, but no matter what value i put in the quantity box, when i add to cart, it only add one item.

In product-list.tpl i have added the following:

 <!-- add to cart form-->
       <form id="buy_block" action="{$base_dir}cart.php" method="post">

                   <!-- quantity wanted -->

quantity == 0) || $virtual} style="display:none;"{/if}>
{l s='Quantity :'}
               <input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />

                   </form>



and then edited the follwing:

{l s='Add to cart'}



If anyone has any idea how to do this i would really appreciate it. Im sure it cant be that difficult.

Share this post


Link to post
Share on other sites

  • 2 weeks later...

A way to do this, with 2 modifications.

This works only when Ajax is activated in BlockCart module configuration.

In the theme directory, file product-list.tpl, replace :

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Add to cart'}
{else}

BY (2 lines inserted)

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Quantity :'}
   <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
{l s='Add to cart'}
{else}



In the module blockcart, file ajax-cart.js, in the first block " for every 'add' buttons.", replace :

ajaxCart.add(idProduct, null, false, this);

BY

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct));

  • Like 1

Share this post


Link to post
Share on other sites

Thanks ningu. It works great.

At the first time I can't get it to work but i made a change in your code.

Where you put:
ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct));

I changed:
ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val());

Thanks a lot

Share this post


Link to post
Share on other sites

  • 4 weeks later...
  • 1 month later...

modul theme ?

erorf.jpg

In product-list.tpl i have added the following:
------------------------------------------------------------------------------------------

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Add to cart'}
{else} 



reaple

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
{l s='Quantity :'}
   <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
{l s='Add to cart'}
{else}







---------------------------------------------------------------------------------
---------------------------------------------------------------------------------
in the module blockcart, file ajax-cart.js

ajaxCart.add(idProduct, null, false, this); 




reaple


ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct)); 



---------------------------------------------------------------------------------
---------------------------------------------------------------------------------

esoes :) help me pls

Share this post


Link to post
Share on other sites

  • 1 month later...

change product-list.tp according to the previous reply and

in the module blockcart, file ajax-cart.js

ajaxCart.add(idProduct, null, false, this); 



Replace with

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val()); 



It is working

Share this post


Link to post
Share on other sites

EDIT: I found that this is a bug with the wishlist block. Unrelated to the code posted here.


The items are not getting added to the order detail on order.php.

What do I need to add there? They are coming through in the final order though.

17848_44LoFK4GkXYXrN592HqW_t

Share this post


Link to post
Share on other sites

  • 4 weeks later...

I've add a field in database with granularity quanitity:
exemple

DVD-R Verbatim in spindle 25pk. I've the price for single DVDs, 0.20€ but the customers need to add block of 25pz. The granularity is 25

I want that if the user does not put 25pz or multiple (50,27,100,125 etc.) comes out an alert with an error message.

how do I do?

Share this post


Link to post
Share on other sites

  • 4 months later...
  • 3 weeks later...
change product-list.tp according to the previous reply and

in the module blockcart, file ajax-cart.js
ajaxCart.add(idProduct, null, false, this); 



Replace with

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val()); 



It is working



Do this again.

Share this post


Link to post
Share on other sites

  • 1 month later...

Aloha. it's very simple but very usable...except one thing - in the box i writing for example 10 pcs, clicking add to cart and ajax adding only1 pcs. What the hell??? Installed and checked already 20 times and i need you help wisemen ! I'm using prestashop 1.3.1.

Share this post


Link to post
Share on other sites

Aloha. it's very simple but very usable...except one thing - in the box i writing for example 10 pcs, clicking add to cart and ajax adding only1 pcs. What the hell??? Installed and checked already 20 times and i need you help wisemen ! I'm using prestashop 1.3.1.


after this reply, my damn cart now working pretty well...something mistic, but cart working...yessssss

Share this post


Link to post
Share on other sites

  • 4 weeks later...
  • 1 month later...

mmm... I am sorry to tell that in Firefox doesnt work. i was debugging a bit and when you type the quantity and click add cart, the default value of 1 doesnt change and always 1 item is added... plus the disable function doesnt work either...

someone found a fix for this?

thanks!
jose

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 3 weeks later...

This is a great functionality to add to the store, however, if products have different combinations/attributes, this will not work to include those instances. On products with just one size/type/color/etc., sure, but anything else is lost :(

Share this post


Link to post
Share on other sites

Dude, yes, I saw that! Its a great addition...does it get away from bogging down the loadtime?...or is it still the same concept? I love your site, and have purchased from it before, thanks for the great addition, and for your post :)

Share this post


Link to post
Share on other sites

It loads all the attribute info using JavaScript, it shouldn't affect load speed that much, especially if you don't have a few hundred combinatons per product.

I've had. Few customers buy it, and have not received any responses about slowdown related to the module.

Share this post


Link to post
Share on other sites

  • 4 weeks later...
mmm... I am sorry to tell that in Firefox doesnt work. i was debugging a bit and when you type the quantity and click add cart, the default value of 1 doesnt change and always 1 item is added... plus the disable function doesnt work either...

someone found a fix for this?

thanks!
jose


Will you give me the codes? Pls..

Share this post


Link to post
Share on other sites

  • 3 months later...
  • 2 weeks later...
  • 3 weeks later...

It does work as I did this mod to my store at www.dieselsurplusstore.com and my once zipping along site is like molasses..

This is just a quantity box.. why is it slowing it down so much? Was fine before this change..

Also to see it in the cart sometimes I have to refresh.. any suggestions?

Share this post


Link to post
Share on other sites

  • 2 weeks later...

THIS SITE WAS ONCE REALLY FAST AT GETTING RESPONSES.. NOW NEW VERSION WITH MAJOR ISSUES AND NO HELP.
Can I get some help pretty please? I have several sites now on the new versions.. I know your working hard on Prestashop 2 but in the interim.. please guys.. help out the little people who have been loyal all along.

The problem with this fix is that it will work if you do something to trigger the page to refresh.. otherwise you can enter the quantity and click add to cart and it does not.. but then hit checkout and it works. Why is the add to cart button not triggering the addition of the entered quantity to the cart?

I need help to figure this out please.

Thanks.

  • Like 1

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 1 month later...

Hi All

First of all thanks to ningu for your code biggrin.gif

 

I have add small peace of code to run above code in both condition ajaxcart is activate or deactivated

(jquery code in product-listing.tpl file)

 

 

 

Here is complete code below some time editor parse code so for convinece I have attached text file having complete code

 

in theme->prodcut-list.tpl

Replace

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
   {l s='Add to cart'}
{else}

 

with the following code

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
   {l s='Quantity :'}
   <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
   {l s='Add to cart'}
{else}

 

 

 

In the module->blockcart->ajax-cart.js

ajaxCart.add(idProduct, null, false, this);

 

 

 

Replace with

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val()); 

 

 

 

In theme->product-list.tpl add following lin at the top of page

{literal}
<script type="text/javascript">
$(document).ready(function(){
 $(".ajax_add_to_cart_button").click(function(){
var f=$(this).attr('href');
var id = f.split('&')[1].split('=')[1];
var p="#quantity_wanted_"+id;
var qty=$(p).attr('value');
g=f+"&qty="+qty;
window.location=''+g;
return false;
 });
});
</script>
{/literal}

  • Like 1

Share this post


Link to post
Share on other sites

  • 4 weeks later...

Hello, My problem is that when I buy at checkout I get this error Fatal error (OrderHistory -> id_order_state is empty) my version is 1.4.4 and see if you can help me that do not know if the problem is the product-list.tpl or ajax-carts.tpl. thanks. thanks.

Share this post


Link to post
Share on other sites

  • 4 weeks later...

I did not get sucess :(...please help, have amended the below changes in Product-list.tpl

 

Before

{if ($product.allow_oosp || $product.quantity > 0)} <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
{else}

 

As suggested I changed with below

 

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}  {l s='Quantity :'}
		  <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
   {l s='Add to cart'}
 {else}

 

With the above change i got quantity box in my product list but it disable the Add to Cart button and without that Quantity button is of no use.please find the attached screenshot

Please help me to resolve the issue.

post-289968-0-56079900-1318823744_thumb.jpg

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 7 months later...

i have added your code and quantity box is working properly on product-list.tpl but on order page if some updates the quantity or delete the product ...it will cause problem and not updates the total amount of order... for reference please check the snapshot attached...

 

and if anyone has solution to it Please help.

Thanks

post-252331-0-97319000-1340751308_thumb.gif

Edited by faDdy (see edit history)

Share this post


Link to post
Share on other sites

  • 4 weeks later...

i have added your code and quantity box is working properly on product-list.tpl but on order page if some updates the quantity or delete the product ...it will cause problem and not updates the total amount of order... for reference please check the snapshot attached...

 

and if anyone has solution to it Please help.

Thanks

 

Hi faDdy,

 

I have applied solution #3, it works perfectly on products list.

 

I have double checked the shopping cart summary, and the + - buttons are working as well, correctly updating the total amount.

 

Which Presta version are you running?

 

As I said, it's correctly working for me on ajax mode, Prestashop 1.4.8.2

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 3 weeks later...
Hi All First of all thanks to ningu for your code biggrin.gif I have add small peace of code to run above code in both condition ajaxcart is activate or deactivated (jquery code in product-listing.tpl file) Here is complete code below some time editor parse code so for convinece I have attached text file having complete code in theme->prodcut-list.tpl Replace
 {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2} {l s='Add to cart'} {else} 

with the following code

 {if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2} {l s='Quantity :'}  {l s='Add to cart'} {else}

In the module->blockcart->ajax-cart.js

 ajaxCart.add(idProduct, null, false, this);

Replace with

 ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val()); 

In theme->product-list.tpl add following lin at the top of page

 {literal} {/literal}

 

In version 1.4.8 the product-list.tpl code should be changed from

 

{if ($product.allow_oosp || $product.quantity > 0)}
<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>

 

to

 

{if ($product.allow_oosp || $product.quantity > 0)}
{l s='Quantity :'}
<input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>

Share this post


Link to post
Share on other sites

  • 4 weeks later...

1) Copy

modules\blockcart\ajax-cart.js

in

\themes\yourtheme\js\modules\blockcart\ajax-cart.js

 

2) in theme->product-list.tpl :

Put after {if ($product.allow_oosp || $product.quantity > 0)}

 

{l s='Quantity :'}

<input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />

 

 

3) In the \themes\yourtheme\js\modules\blockcart\ajax-cart.js :

 

ajaxCart.add(idProduct, null, false, this);

Replace with

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val());

 

4) In theme->product-list.tpl add following lin at the top of page :

 

{literal}

<script type="text/javascript">

$(document).ready(function(){

$(".ajax_add_to_cart_button").click(function(){

var f=$(this).attr('href');

var id = f.split('&')[1].split('=')[1];

var p="#quantity_wanted_"+id;

var qty=$(p).attr('value');

g=f+"&qty="+qty;

window.location=''+g;

return false;

});

});

</script>

{/literal}

 

Enjoy...

Share this post


Link to post
Share on other sites

  • 4 weeks later...
  • 9 months later...
  • 2 months later...

I read this topic but now it's seems working... I don't know why... But sometime when I submit a custom quantity it's the default value (1) that being  sent

 

can you share url to your website? i will inspect it, maybe i will find where the problem is

Share this post


Link to post
Share on other sites

  • 2 months later...

Hi Vekia,

 

I followed your guide and I have the same issue as Promod (only adding 1 unit to cart).

 

The link to my website is:

http://www.linkportnet.com/Prestashop/index.php?id_category=5&controller=category 

 

I have tried for some days your instructions but with no success.

Can you please check?

 

Thanks.

you havent got ajax cart feature turned on, this is why it doesn't work

Share this post


Link to post
Share on other sites

Hi Vekia,

 

Thanks for the help. However, I see that my ajax cart feature is on. Strange. 

 

Here is my question: Which blockcart module is being activated? I mean, I see the folder "blockcart" in /modules or /themes/default or /themes/mytheme/modules

 

I will replace the original "blockcart" folder with the one you tell me.

 

Sorry for the noob question.

 

Thanks.

Share this post


Link to post
Share on other sites

  • 4 weeks later...

change product-list.tp according to the previous reply and

 

in the module blockcart, file ajax-cart.js

ajaxCart.add(idProduct, null, false, this);

Replace with

ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val());

It is working

 

I tried this on PS 1.5.6.2 and it works also here. Well gone gays.  Of course thus works just with previous post. 

Share this post


Link to post
Share on other sites

  • 4 weeks later...

Sory! This is joke!!!

 

Hi All
First of all thanks to ningu for your code biggrin.gif

I have add small peace of code to run above code in both condition ajaxcart is activate or deactivated
(jquery code in product-listing.tpl file)



Here is complete code below some time editor parse code so for convinece I have attached text file having complete code

in theme->prodcut-list.tpl
Replace

{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
    {l s='Add to cart'}
{else}
with the following code
{if ($product.allow_oosp OR $product.quantity > 0) && $product.customizable != 2}
    {l s='Quantity :'}
    <input type="text" name="ajax_qty_to_add_to_cart[{$product.id_product|intval}]" id="quantity_wanted_{$product.id_product|intval}" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
    {l s='Add to cart'}
{else}


In the module->blockcart->ajax-cart.js
ajaxCart.add(idProduct, null, false, this);


Replace with
ajaxCart.add(idProduct, null, false, this, $('#quantity_wanted_'+idProduct).val());


In theme->product-list.tpl add following lin at the top of page
{literal}
<script type="text/javascript">
$(document).ready(function(){
  $(".ajax_add_to_cart_button").click(function(){
 var f=$(this).attr('href');
var id = f.split('&')[1].split('=')[1];
var p="#quantity_wanted_"+id;
var qty=$(p).attr('value');
g=f+"&qty="+qty;
window.location=''+g;
return false;
  });
});
</script>
{/literal}

 

Share this post


Link to post
Share on other sites

  • 2 weeks later...

I did the changes from your site Vekia and the cart button is not working. When add to cart, nothing happens, after page refresh, the products do appear in the cart (ajax enabled). Cleared cache, shop cache ...

PrestaShop™ 1.5.6.0

Share this post


Link to post
Share on other sites

I did the changes from your site Vekia and the cart button is not working. When add to cart, nothing happens, after page refresh, the products do appear in the cart (ajax enabled). Cleared cache, shop cache ...

PrestaShop™ 1.5.6.0

 

it just mean that you probably did something wrong

please share url to your website where you use this modification - i will inspect it for potential breakpoints 

Share this post


Link to post
Share on other sites

Hi everybody! I am creating a shop (PS 1.6) in localhost and I've tried to do everything you said but does not work me. I fear that your code does not work for version 1.6, someone tested it?

 

I need edit the producth list:

  • resize the row height to 200px 
  • add the quantity box with -/+ in product-lisitng of categories. Somethin like this:

product_list.png

Share this post


Link to post
Share on other sites

  • 2 weeks later...

any chance to see it live somewhere?

guide is based on 1.5 - i never tested this guide in 1.6 release,

so it's great time to do it :)

 

apparently, it's not working on 1.6  :(

and i hope it can be done like how it's presented in product page, just a "+" & "-" button to add and reduce quantity :)

Share this post


Link to post
Share on other sites

  • 3 weeks later...