Starter Kit Cart Page Multiple Clicks on Plus / Minus
Hi there
We have developed a site based on the starter kit.
On the day before "go live" we realised that a trigger happy punter can cause the mini cart to get out of sync with the products ordered by multiple quick clicks on the plus and minus buttons on the cart page.
I therefore tried disabling the button once clicked and enabling it again after the cart has updated. To date i have had no success.
Just wondering if anyone else has struck this problem, and if so, how you solved the issue ?
I guess it's possible to "stress" the javascripts by clicking very fast on the plus minus buttons. I would give that sacrifice for the speed of the cart when clicking it in a more normal pace. On all the webshops we have built on the starter kit it has never been a problem on the live webshops. Users don't do that in a real case scenario.
If it is a problem for you guys you could easily make a simple "lock" on the add to cart function in teacommerce_advanced.js. Just create a global boolean variable. Set it to false by default. Then when the plus/minus buttons are clicked (Find the event in the teacommerce_advanced.js) set the boolean to true. Now hook into the success and error callbacks on the TeaCommerce.addOrderLine call, where you set the boolean to false again. Now you can wrap the whole thing in an if statement only alowing the command to be sent when the boolean is false.
Note that the cart experience for the user might feel slower if they actually do want to add a couple more of a certain item. Now they will need to wait for the server to respond.
I was adding a cssClass to the clicked button and then checking if the button had the cssClass. This simply wasn't working albeit the logic seemed correct.
So in desparation I changed the following line from:
jQuery('.minus, .plus').live('click', function () {
to:
jQuery('.minus, .plus').click(function () {
and now things are working as expected.
I am not a JavaScript / jQuery guru so don't fully appreciate why live() was treating things differently, but hey, it is working and so I am a happy person.
I believe it's because of the way live() works, and it might very well be a little slower and therefore allowing multiple clicks to be on it's way before firing the first event. That means your "state" (The css class) will not be set when the second event is fired. Something like that.
Good report anyways. I'm currently working on the starter kit v2 for Tea Commerce v2.0, and I will certainly consider your findings. Plus the live method have been deprecated in the newest versions of jQuery. Might have something to do with your problem as well.
Starter Kit Cart Page Multiple Clicks on Plus / Minus
Hi there
We have developed a site based on the starter kit.
On the day before "go live" we realised that a trigger happy punter can cause the mini cart to get out of sync with the products ordered by multiple quick clicks on the plus and minus buttons on the cart page.
I therefore tried disabling the button once clicked and enabling it again after the cart has updated. To date i have had no success.
Just wondering if anyone else has struck this problem, and if so, how you solved the issue ?
Cheers, Nigel
Hi Nigel,
I guess it's possible to "stress" the javascripts by clicking very fast on the plus minus buttons. I would give that sacrifice for the speed of the cart when clicking it in a more normal pace. On all the webshops we have built on the starter kit it has never been a problem on the live webshops. Users don't do that in a real case scenario.
If it is a problem for you guys you could easily make a simple "lock" on the add to cart function in teacommerce_advanced.js. Just create a global boolean variable. Set it to false by default. Then when the plus/minus buttons are clicked (Find the event in the teacommerce_advanced.js) set the boolean to true. Now hook into the success and error callbacks on the TeaCommerce.addOrderLine call, where you set the boolean to false again. Now you can wrap the whole thing in an if statement only alowing the command to be sent when the boolean is false.
Note that the cart experience for the user might feel slower if they actually do want to add a couple more of a certain item. Now they will need to wait for the server to respond.
/Rune
Hi Rune
Thanks for your feedback - appreciate it.
I have been trying to do as you suggest and add/remove a disabled attribute to the clicked button but so far it's not worked.
I will keep perservering and if I manage to get it working will post the solution here just in case others feel the need to cover the same scenario.
Cheers, Nigel
Maybe take a look at the javascript for the add to cart functionality also in the teacommerce_advanced.js. There we do something like it by default.
/Rune
Hi Rune
Finally got things working as desired.
I was adding a cssClass to the clicked button and then checking if the button had the cssClass. This simply wasn't working albeit the logic seemed correct.
So in desparation I changed the following line from:
jQuery('.minus, .plus').live('click', function () {to:
jQuery('.minus, .plus').click(function () {and now things are working as expected.
I am not a JavaScript / jQuery guru so don't fully appreciate why live() was treating things differently, but hey, it is working and so I am a happy person.
Cheers, Nigel
Addendum - changing live() to on() also works..
Nigel
Hi Nigel,
I believe it's because of the way live() works, and it might very well be a little slower and therefore allowing multiple clicks to be on it's way before firing the first event. That means your "state" (The css class) will not be set when the second event is fired. Something like that.
Good report anyways. I'm currently working on the starter kit v2 for Tea Commerce v2.0, and I will certainly consider your findings. Plus the live method have been deprecated in the newest versions of jQuery. Might have something to do with your problem as well.
Thanks for your input.
/Rune
is working on a reply...