Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Trigger Product page refresh when item is added to cart

ASTools
New Member
5 0 0

Hello everyone,
I am using the Dawn 7.0.1 theme for my shop. Is there a way to reload the product page once an item has been added to the cart with the "Add to Cart" button?

Replies 2 (2)

Liam
Shopify Staff
2677 288 737

Hi ASTools,

 

The product page shouldn't require a refresh when a product is added, as themes like Dawn use the Ajax API to update content (like the cart) dynamically - what would be the use-case you're looking to achieve here? Typically it's considered best UX if pages avoid refreshes, but if you really do need to force a reload you could use the JS reload() method with an onclick Event listener targetting the add to cart button. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

ASTools
New Member
5 0 0

Hello Liam, Thank you for the information. I wrote a new block in the schema for "Free Shipping". Here I have inserted a progress bar in a <div> that dynamically fills up to the current shopping cart value and shows how far the customer is from free shipping. The display of the progress bar works great, but is only updated when the page is reloaded. For this I have the function location.reload(); at the end of product-form.js. inserted. When items are added to the shopping cart, the entire page is now reloaded and the progress bar is updated. Of course it would be much nicer if not the entire page but only the block with the free shipping bar was reloaded. If I understand this correctly, can I realize this with jquery and ajax? Unfortunately, I am an absolute beginner here, is there any documentation from shopify on how exactly this works?