In the teaCommerce_Advanced.js there is added a updating class to the productAddToCartWrap div element, when adding a product to the cart.
How can I add a updating class to the product container in the product list or another element outside the productAddToCartWrap div element, which has the javascript click event?
So when a product is added to the cart I want to display a preloader. I have added the lines with updateIcon below, but it seems to add it to all products on click.. jQEle use "this" and get the active productAddToCart element.. I'm not sure how to get an element outside that element..
/* When an add to cart button is clicked */ jQuery('.productAddToCart').live('click', function () { var jQEle = jQuery(this); var updateIcon = jQuery('.update_icon');
/* If the product allready have a pending add to cart running we do not want to make another one. in principle you could easily make the call again. This is just for demo purposes. You can make as many calls to the server as you like. */ if (!jQEle.parent().hasClass('updating')) { jQEle.parent().addClass('updating'); updateIcon.addClass('updating');
//Get the various elements and variables var product = jQEle.closest('.productToUpdate'), addingTxt = jQEle.attr('addingtxt'), quantityInput = product.find('input.quantity'), quantity = quantityInput[0] ? quantityInput.val() : 1, variant = product.find('select.productVariants'), productid = variant[0] ? variant.val() : product.attr('productid'), localSubmitTimer = new Date().getTime();
jQEle.attr('standardValue', jQEle.val()).val(addingTxt).attr('standardValue'); /* Add orderline is called using the Tea Commerce javascript API We subscribe to the return events to be able to update the css class of the button. */ TeaCommerce.addOrderLine(productid, quantity, { async: true, successfn: function (data) { //A timeout is set to show the user that the product has been added removeAddButtonUpdate(jQEle, localSubmitTimer); }, errorfn: function (data) { //Something went wrong. We should handle it here removeAddButtonUpdate(jQEle, localSubmitTimer); } }); } return false; });
Best practice JavaScript/jQuery would be to use "this" as a reference point. In this case the jQEle. You could then track up the dom tree to find whatever element wraps around your update icon, which sounds like the "product" element. To do that is quite simple:
Thanks.. that was what I was looking for.. I just needed to refer to "this", otherwise I set the updating class on all products in the list.. I could add the class to the update_icon element.. but if I add it to the container I can always refer to the elements inside the container in "updating state" ..
I think it will be best to add the class inside if (!jQEle.parent().hasClass('updating')) ?
/* When an add to cart button is clicked */ jQuery('.productAddToCart').live('click', function () { var jQEle = jQuery(this); var updateIcon = jQEle.closest('.product');
/* If the product allready have a pending add to cart running we do not want to make another one. in principle you could easily make the call again. This is just for demo purposes. You can make as many calls to the server as you like. */ if (!jQEle.parent().hasClass('updating')) { jQEle.parent().addClass('updating'); updateIcon.addClass('updating');
//Get the various elements and variables var product = jQEle.closest('.productToUpdate'), addingTxt = jQEle.attr('addingtxt'), quantityInput = product.find('input.quantity'), quantity = quantityInput[0] ? quantityInput.val() : 1, variant = product.find('select.productVariants'), productid = variant[0] ? variant.val() : product.attr('productid'), localSubmitTimer = new Date().getTime();
jQEle.attr('standardValue', jQEle.val()).val(addingTxt).attr('standardValue'); /* Add orderline is called using the Tea Commerce javascript API We subscribe to the return events to be able to update the css class of the button. */ TeaCommerce.addOrderLine(productid, quantity, { async: true, successfn: function (data) { //A timeout is set to show the user that the product has been added removeAddButtonUpdate(jQEle, localSubmitTimer); }, errorfn: function (data) { //Something went wrong. We should handle it here removeAddButtonUpdate(jQEle, localSubmitTimer); } }); } return false; });
function removeAddButtonUpdate(jQEle, localSubmitTimer) { localSubmitTimerEnd = new Date().getTime() - localSubmitTimer;
//Check the timeout to see if it took at least half a second if (localSubmitTimerEnd < submitTimerMin) {
//If the return call was too fast we delay the call for window.setTimeout(function () { removeAddButtonUpdate(jQEle, localSubmitTimer); }, localSubmitTimerEnd); return false; } jQEle.parent().removeClass('updating'); jQEle.closest('.product').removeClass('updating'); jQEle.val(jQEle.attr('standardValue')); }
Add updating class to product container
Hi..
In the teaCommerce_Advanced.js there is added a updating class to the productAddToCartWrap div element, when adding a product to the cart.
How can I add a updating class to the product container in the product list or another element outside the productAddToCartWrap div element, which has the javascript click event?
So when a product is added to the cart I want to display a preloader. I have added the lines with updateIcon below, but it seems to add it to all products on click.. jQEle use "this" and get the active productAddToCart element.. I'm not sure how to get an element outside that element..
/Bjarne
Hi Bjarne,
Best practice JavaScript/jQuery would be to use "this" as a reference point. In this case the jQEle. You could then track up the dom tree to find whatever element wraps around your update icon, which sounds like the "product" element. To do that is quite simple:
jQEle.closest('.product').addClass('updating')
Note: Make sure that your product has the class "product"
Now all you need to do i css to get the rest working. Maybe something like this:
.product.updating .update_icon { display:block; }
Hope that is what you need.
/Rune
Hi Rune
Thanks.. that was what I was looking for.. I just needed to refer to "this", otherwise I set the updating class on all products in the list..
I could add the class to the update_icon element.. but if I add it to the container I can always refer to the elements inside the container in "updating state" ..
I think it will be best to add the class inside if (!jQEle.parent().hasClass('updating')) ?
and then the css is quite simple:
You can check it out here :) http://d25283583.u359.surftown.dk/da/produkter/ionflow.aspx
/Bjarne
is working on a reply...