Solved

Variant Selected, Want to Reload Page Contents. Dawn 7.0

Bmagnus
Visitor
3 0 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!

Accepted Solution (1)

Litos
Globetrotter
688 169 143

This is an accepted solution.

Hi @Bmagnus,

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

Screenshot.png

Code:

location.reload();

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.

View solution in original post

Replies 7 (7)

PaulNewton
Shopify Partner
6275 574 1324

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();

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


CarlosC24
Shopify Partner
1 0 0

This worked perfectly for me, thank you!

PageFly-Victor
Shopify Partner
7865 1785 3058

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
Globetrotter
688 169 143

This is an accepted solution.

Hi @Bmagnus,

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

Screenshot.png

Code:

location.reload();

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
Genkidama
Tourist
5 0 2

Not function this in Dawn theme

Genkidama
Tourist
5 0 2

Not function this in Dawn theme

Yehya
Visitor
2 0 0

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