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. 

[Genkidama]

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??