Variant Selected, Want to Reload Page Contents. Dawn 7.0

Store Design
1

I am wondering if anyone can supply me a code to post so that when i click on my variant i have selected the page reloads.

Thanks!

2

For Dawn based themes you can either listen on the html custom elements like | , or the source input typically ‘input[name=“id”]’ in product forms that is made to dispatch a change event after variant functions run.

https://github.com/Shopify/dawn/blob/main/assets/global.js#L813

Below is a basic starting example with a parameter to pass in a callback function to trigger when the variant event happens.

function variant_change_listener(callback){
 const selector = 'input[name="id"]';
 const emitting_element = document.querySelector(selector);

 emitting_element.addEventListener('change', function(){
  callback ? callback() : console.log("variant changed, but no callback function");
 });
}
// either call listening function directly in flow of document or set it to run after document ready
variant_change_listener();
1 Like
3

This is PageFly - Free Landing Page Builder.

You can try this code, but should change the query selector to match with your structures.

Step1: Online store > Themes > Edit code > search for your theme.liquid

Step2: Paste the code to above

Hope this can help you solve the issue

Best regards,

PageFly

4

Hi @Bmagnus ,

Please go to global.js file, find ‘VariantSelects’ and add code here:

Screenshot.png
Screenshot.png1164×836 53.1 KB

Code:

location.reload();

Hope it helps!

2 Likes
5

Not function this in Dawn theme

6

Not function this in Dawn theme

7

Thanks heaps for this.. Helped me heaps.. I was using some script logic that would refresh even when opening an image.

8

This worked perfectly for me, thank you!