Auto Refresh Cart Display for Added Products
closed
S
Shivam Kapoor
We propose developing a feature that automatically refreshes the cart display in various themes when a product is added to the cart. The main challenge is that there is no theme-agnostic way to implement this functionality, which means that it will likely require theme-specific code. By addressing the diverse needs of themes, we can improve the user experience and ensure that customers see the most up-to-date cart content immediately after adding products.
If you'd like us to add this feature to our app, please upvote and comment on this thread.
P.S. This feature request was generated via AI, based on the conversation with the customer.
Tobe Osakwe
Ultimately, I understand how important it is to have a seamless solution, so we've decided to go with the only feasible solution: developing specific integrations with individual themes and apps, when possible.
This will take some time. Instead of having one big thread for supporting cart refresh in all themes, each thread will get its own thread.
Best,
Tobe
Tobe Osakwe
closed
Unfortunately, we were not able to find a solution for auto-refreshing the cart display that:
- Works in all themes
- Supports cart drawers
Even if we refreshed the cart display using the Section Rendering API, various themes may have event listeners attached to the old elements, so this led to issues where quantity inputs stopped working.
The best workaround right now:
Our app will dispatch a
regios-dopp:auto-add-to-cart:update
event after adding items to the cart. We recommend adding custom code to your cart to listen for this event and trigger a reload of the cart/cart drawer section on your site.Tobe Osakwe
There
might
be a theme-agnostic approach to refreshing cart drawers as well, even if they are not contained within a .shopify-section
.We can try loading the updated contents of the entire page using the
window.fetch
API, and then find the matching cart form (based on its index within the page), and overwrite the current one's inner HTML with that.That solution, however, still won't be able automatically
open
a cart drawer.As you can imagine, there are tons of theme and app-specific quirks to each cart drawer that greatly complicate a potential implementation of this feature.
Tobe Osakwe
We were able to find a theme-agnostic method for updating the cart display.
It turns out that, on the cart page, there will typically be a
form[action="/cart"]
element.If this is surrounded by a
.shopify-section[id]
element, then we can use Shopify's Section Rendering API to reload its contents.As for cart drawers, they might not be contained with a section, which could pose a significant challenge when trying to refresh their contents automatically.
Stay tuned for updates about this addition to our app.
Unfortunately, because Black Friday is tomorrow, and we are dealing with a high volume of support tickets, we can't promise this will be live by then.
Tobe Osakwe
under review
I've invested a significant time into researching how to implement this.
Unfortunately, it seems like the only option to do this out-of-the-box would be to add dedicated integrations for every theme/app out there. We would like to avoid this at all costs, because it's not scalable and leads to tons of additional work due to subtle incompatibilities between various versions of themes and apps.
Our app will dispatch a
regios-dopp:auto-add-to-cart:update
event after adding items to the cart. We recommend adding custom code to your cart to listen for this event and trigger a reload of the cart/cart drawer section on your site.We won't be closing this outright at this time, as there may be a possibility for us to detect and reload cart/cart drawer sections in a theme-agnostic way using the Section Rendering API. However, it might not turn out to be possible.