Replies: 5 comments
-
Hi @thagxt . |
Beta Was this translation helpful? Give feedback.
-
Sure, the button works fine when it's inside the But in my case: I've a "loader indicator" in the header of the website, and since it is outside I know I can do it via JS, however it would be handy to have a class that's being added from the script directly. |
Beta Was this translation helpful? Give feedback.
-
I see. So I would prefer to solve this case by extending the library using custom JavaScript and Liquid Ajax Cart API rather than including the code to the library. I'm sure you know, but just in case I'm going to leave the code here how to add/remove CSS class on adding a product: document.addEventListener('liquid-ajax-cart:request-start', event => {
const {requestState} = event.detail;
if (requestState.requestType === 'add') {
document.body.classList.add('js-ajax-cart-adding-to-cart');
}
});
document.addEventListener('liquid-ajax-cart:request-end', event => {
const {requestState} = event.detail;
if (requestState.requestType === 'add') {
document.body.classList.remove('js-ajax-cart-adding-to-cart');
}
}); Btw if the only thing that doesn't fit your needs of the window.liquidAjaxCart.conf("updateOnWindowFocus", false); Let me know if I didn't get your question correctly. |
Beta Was this translation helpful? Give feedback.
-
Thanks for your prompt response, as always. I appreciate your thoughts on the matter and understand where you're coming from; the current approach, as you mentioned, makes sense for most use cases; however, having a global class added to the HTML tag for a fundamental action such as the "add to cart" one can be useful in cases like mine or others where you need to control things outside the currently observed regions, in my opinion. Anyway, I recognize that you may not want to bloat the script because it is easily attainable with a few lines of JS and can be left optional. |
Beta Was this translation helpful? Give feedback.
-
Yeah, I would prefer to cover such cases via using Liquid Ajax Cart JS API - that is why I provided it 🙂 |
Beta Was this translation helpful? Give feedback.
-
Summary
Add an additional class that gets added when a product is in the process of being added to the cart.
Current Behavior
The
.js-ajax-cart-processing
class is currently added whenever the page goes out of focus and back into focus. This makes it unreliable for detecting when a specific product is being added to the cart.Expected Behavior
.js-ajax-cart-adding-to-cart
that gets added to the page when a product add to cart request begins..js-ajax-cart-adding-to-cart
when the add to cart request finishes.Reason
We need a reliable way to detect when an individual product is in the process of being added to the cart. This will allow things like:
Without a dedicated class for add to cart in progress, these types of UX enhancements are difficult.
Let me know if any clarification or additional details are needed!
Beta Was this translation helpful? Give feedback.
All reactions