Variant Selected, Want to Reload Page Contents. Dawn 7.0

[Bmagnus]

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!

[PaulNewton]

For Dawn based themes you can either listen on the html custom elements like <variant-radios>|<variant-selects> , 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();

[CarlosC24]

This worked perfectly for me, thank you!

[PageFly-Victor]

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 </head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function() {
    $('.single-option-selector').on('change', function(){
        setTimeout(function(){ 
          if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });
</script>

Hope this can help you solve the issue 

Best regards,

PageFly

[Litos · Accepted solution]

Hi @Bmagnus,

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

Code:

location.reload();

Hope it helps!

[ShiitifffyUser]

Not function this in Dawn theme

[ShiitifffyUser]

Not function this in Dawn theme

[Yehya]

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