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

Solved
BVPark
Tourist
9 0 2

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.

Accepted Solution (1)

Accepted Solutions
Guleria
Shopify Partner
2011 426 620

This is an accepted solution.

Hello 

  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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.

View solution in original post

Replies 15 (15)
Guleria
Shopify Partner
2011 426 620

This is an accepted solution.

Hello 

  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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
BVPark
Tourist
9 0 2

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
Shopify Partner
2011 426 620

Put it in custom.js under assets.

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
BVPark
Tourist
9 0 2

Thank you!   this worked perfectly.

BVPark
Tourist
9 0 2

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
Shopify Partner
2011 426 620

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%}

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
Buy me a coffee My PayPal
Try GEMPAGES page builder.
BVPark
Tourist
9 0 2

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
Tourist
4 0 6

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
Tourist
5 0 1

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
New Member
1 0 0

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
Tourist
3 0 2

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
Tourist
10 0 10

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
New Member
1 0 0

Screenshot_20210211-120949_Chrome.jpg

Screenshot_20210211-120949_Chrome.jpg

Screenshot_20210211-122915_Chrome.jpg

MScreenshot_20210211-123005_Chrome.jpg

 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
New Member
1 0 0
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
Excursionist
32 0 2

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