Need a page refresh everytime a variant changes to get the correct code to load.

[BVPark]

I have a product that is a cash donation product.  i've added a custom amount variant and want the quantity box to show when the custom variant is chosen.  this works but only if i manually refresh the page and most people that visit the sit e aren't going to do this.  how do i get this page to refresh automatically when the variant changes, or is there a better way.

{% if product.selected_variant.id == 30370837430349 %}
    <div class="product-form__item product-form__quantity-selector">
      <label class="product-form__quantity-label{% unless section.settings.show_variant_labels %} product-form__quantity-label--hidden{% endunless %}" for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <input class="product-form__quantity-input" type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*">
    </div>
  {% endif %}

this is the "if" statement and code i have used.

i'm using shopify's free narrative theme.

[Guleria · Accepted solution]

Hello BVPark,

  jQuery(function() {
    $('.single-option-selector').on('change', function(){
        setTimeout(function(){ 
          if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

use this script, it will reload page on variant selection.
Thanks

[BVPark]

Thanks for the help.  Could you tell me where to put the script exactly?  I assume this goes in the theme.js file?  sorry i'm new to shopify and just learning.

[Guleria]

Put it in custom.js under assets.

[BVPark]

Thank you!   this worked perfectly.

[BVPark]

is there a way to specify the page that reloads?  it seems to reload every product page that contains variants.  i really only need this for one of my products.

[Guleria]

They are different way to do this, check this basic one

{% if product.title == 'Test product name' %}
// Include your script, but in this you have to place js script in product.liquid or a/to your need.
{% endif%}

[BVPark]

Thanks.  I tried this but couldn't get it to work.  I'll go back to the way it was before because it was working great.  Thanks again.

[Californiacut]

Hi - I would love to use this code too.  My shop uses Brooklyn theme and i do not see a custom.js under assets.  Can you advise on where I can paste it?

[warrentyy]

This was a huge help, thanks @BVPark.

@Californiacut I didn't have a custom.js file either but look under Assets for something like theme.js, or similar and just paste the code at the bottom. I use Minimal and it was under theme.js.

[TIH]

Hi,

I am trying to do something similar. I'd like to have the page refresh when the selected variant is out of stock. 

[ShiitifffyUser]

Hi use the Simple Theme when i bind this code in my Theme.js but he relod the Product Page again and agein when variant sold out is.

[DenisAt]

Thanks Guleria, 

you are awesome!!! That code worked. I did not had a custom.js, but when I out it in the theme.js - everything works fine now. 

I will save your contact information in case of a customization or problems, which I can't do myself. It looks like you are a very knowledgeable & nice guy, too.

I am sure there will be something in the future where I will need help from an expert like you. 

Thanks again for sharing that solution!!

[Jordanvankampen]

 

 

M

 

 I have variants that doesn't work unless I refresh the page. I went to edit codes found a variant code as you can see in the screen shot I haven't touched it yet. I am trying to figure it out. If I would to ask for help would you help me with this. My email is jordanvankampen@yahoo.com. I will email this too. 

[TETG]

jQuery(function() {
    $('.single-option-selector').on('change', function(){
        setTimeout(function(){ 
          if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

Hi Guleria,

This code refresh really too slow. Is there any way to refresh the page as fast as we select the variant product? 

Regards

[nealm759]

This is not working for me, but i am on a different theme. My selector code is 

 {% for option in product.options_with_values %}

                  <div class="product-form-option {% if section.settings.image_size == 'large' %}col-md-12{% else %}col-md-6{% endif %} col-sm-12 col-12{% if hide_default_title == true %} hide{% endif %}">

                    <div class="input-field product-option-select">

                      <wetheme-dropdown fit="parent">

                        <select id="SingleOptionSelector-{{ forloop.index0 }}"{% if option.values.size == 1 %} disabled{% endif %}>

                            {% if pick_an_option and option.values.size > 0 %}

                              <option value="" selected="selected" data-placeholder>Pick a {{ option.name }}</option>

                            {% endif %}

                            {% for value in option.values %}

                                {% if pick_an_option and option.values.size > 0 %}

                                    {% assign props = '' %}

                                {% elsif option.selected_value == value %}

                                    {% assign props = 'selected' %}

                                {% else %}

                                  {% assign props = '' %}

                                {% endif %}

                                <pre>{{ product.options_with_values.size }}</pre>

                                {% comment %}Hide out of stock variants{% endcomment %}

                                {% if product.options_with_values.size == 1 and section.settings.hide_out_of_stock %}

                                  {% assign hide = true %}

                                  {% for v in product.variants %}

                                    {% if v.option1 == value and v.available %}

                                      {% assign hide = false %}

                                    {% endif %}

                                  {% endfor %}

                                {% else %}

                                  {% assign hide = false %}

                                {% endif %}

                                {% unless hide %}

                                  <option {{ props }} value="{{ value | escape }}">{{ value }}</option>

                                {% endunless %}

                            {% endfor %}

                        </select>

                        <label for="SingleOptionSelector-{{ forloop.index0 }}">{{ option.name }}</label>

                      </wetheme-dropdown>

                    </div>

                 </div>

                 {% endfor %}

                {% endif %}

  {% endif %}

  <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="form-control original-select product-form__variants no-js">

  {% for variant in product.variants %}

  {% if variant.available %}

  <option {% if variant == current_variant %} selected="selected" {% endif %} value="{{ variant.id }}">

  {{ variant.title }} - <span class="money">{{ variant.price | money }}</span>

  </option>

  {% else %}

  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>

  {% endif %}

  {% endfor %}

  </select>

Wondering if maybe it just isn't working due to naming?? 

[devVincent]

Love that solution. But i am struggeling a bit to include it into my code. Would love it if you could help me out! Just let me know 🙂

[Guleria]

@devVincent

 Firstly, I don't think refreshing the product page on variant change is a solution. 

I think you have to check the existing JS functions. But still if you want to use this solution use this script in theme.liquid just before </body> tag and keep notes you have to make changes in it a/to the theme you are using.

[Californiacut]

Yeah I’m going to ditch the whole them altogether. You’re right that it’s
not a solution to refresh the page. It’s just a feature that would be good
to have but which isn’t available

[Bambusbasis]

Hi @Guleria,
I am currently trying to add your code too because I need to reload the product page when selecting the variant. Can you tell me if the code also works with Craft Theme? I put it into the theme.liquid befor the closing </body>-Tag, but it doesn't work. And I have no custom.js or theme.js. Can you explain me what i'm doing wrong?

You would really be a big help!
Best regards
Daniela

[Guleria]

Hello @Bambusbasis ,

First check the variant option you have with craft theme is using select box (drop-down) or radio buttons or something else. If theme is is using select box or radio button then pick the class name and  replace it with 

single-option-selector

Next step check field have same name 

[name="id"]

if in your theme case its different please replace it too.

Thanks
 

[Bambusbasis]

I'm very happy that you help me! But I have some trouble understanding what you mean.

I think in my case it is using radio buttons. But I don't know where to check the class name. And how i find out if the field has the same name, i don't know either.

Can you explain it to me a bit more precisely?

Thanks

[Bambusbasis]

Hello @Guleria,

I think now I found the information in the code:

If I understood correctly, this is the class name I need:

product-form-input

And the theme is using radio buttons. But what is the field name you mean?

I know I'm not a pro, but I hope you will help me anyway.

Best regards

Daniela

[Guleria]

jQuery(function() {
    $('.product-form-input [name=Breite]').on('change', function(){
        setTimeout(function(){ 
          if($(this).val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

Note: Code is not tested I just rewrite the existing solution a/to the screen-shot you shared. 

[Bambusbasis]

Hey @Guleria,

thanks for your help! It's not the solution yet, but I understand the code a bit better now.
However, I still have to ask a friend if he can explain the connections to me better.😅

Wish you a nice weekend!

Best regards
Daniela

[Bambusbasis]

I've finally been able to implement the desired behavior of our online shop 🙂

We are using Craft Version 8.0.0

In product-variant-options.liquid I assigned a class to the option buttons (line 52):

And added in main-product.liquid the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".refresh-button").on("change", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

@GuleriaThx for your help!

[hasibalhasan]

I'm using 'Prestige' theme I recently added "Color swatch" to the "Frame Swatch" function but when I select the first value change it is working fine. But when I select the frame variant the price doesn't change. If I select a frame and then if I refresh this page then the price changes.