Time required to change quantities on Product Pages

[Joey]

Hi guys,

It's taking between 1-1.5 seconds for a product page to refresh after adjusting the quantity (clicking the touchspin button up or down).  I've been told that this is a host thing as its all TFFB time... fine so my host stinks, I get that.  This wasn't an issue with 1.6 but whatever.  The issue here is that the add to cart button doesn't resolve until that 1-1.5 seconds is over.  What's happening is that if someone clicks on the touchspin to adjust the quantity, they will often click "add to cart" before the page refreshes... so they are able to add more products to a cart than is available.  

Does anyone know a way to disable the add to cart button until the page refreshes with new quantity?  

[Joey]

We also see adds to cart that produce nothing... if someone adjusts the touchspin up and then clicks add to cart too quickly nothing gets added

[JBW]

15 hours ago, Joey said:

Does anyone know a way to disable the add to cart button until the page refreshes with new quantity?  

You can add some Javascript to do this e.g. (for classic theme):

prestashop.on('updateProduct', function(){ $(".add-to-cart").attr("disabled", true); }); 
prestashop.on('updatedProduct', function(){ $(".add-to-cart").attr("disabled", false); });

 

[Joey]

Thanks for this... any idea what file to modify?  It looks like the product controller is called every time the quantity is changed.  Would the code go in the productcontroller.php file?

[Joey]

Or... would this be a function of the cart module?

[JBW]

It's a simple JavaScript code. You can add it to your themes custom.js file.

[Joey]

That's not what I mean.. I meant where should this code be called?  It looks like when the touchspin button is clicked a function called add-to-cart-or-refresh is posted... ideally I'd like to disable the add to cart button until this function completes(This is what I'm seeing is called when inspecting the product page):  It also looks like this is a cart function?  Anyway, someone who knows more about how prestashop works should comment on this!

 

<form action="https://www.canadacardworld.com/cart" method="post" id="add-to-cart-or-refresh">
<input type="hidden" name="token" value="ea7187fc0b04fa50ea4412061467c12c">
<input type="hidden" name="id_product" value="3370" id="product_page_product_id">
<input type="hidden" name="id_customization" value="0" id="product_customization_id">
<div class="product-variants">
  </div>

 

[JBW]

The Prestashop cart works with AJAX requests. The code I have posted is doing exactely what you requested:, it deactivates the add to cart button until the quantity update is done. on your product page. you can test it by posting it into your browsers JS console.

[Joey]

Oh my... I didn't realize how simple this was... adding the code you mentioned to the custom.js file worked!  How does it work though?  Is the custom.js file triggered on every action?  Cool, I appreciate the help.

[Joey]

Actually, i need some additional logic.  I want the second line to only be called if the quantity chosen is equal to or less than the amount in stock.  I assume an if condition would solve that, but I don't know what components to check.  Let me know if you can help!

[Joey]

Got it:

 

prestashop.on('updateProduct', function(){ $(".add-to-cart").attr("disabled", true); }); 
if ($product.update_quantity_url <= $product.quantity){
prestashop.on('updatedProduct', function(){ $(".add-to-cart").attr("disabled", false); });
}