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

Solved
Tourist
8 0 0

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.

0 Likes

Success.

Excursionist
132 20 23

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.
My Email: guleriathakur43@gmail.com
If helpful then please Like and Accept Solution.
If you happy and want to donate small, click here: Paypal
1 Like
Tourist
8 0 0

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.

0 Likes
Excursionist
132 20 23

Put it in custom.js under assets.

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
If helpful then please Like and Accept Solution.
If you happy and want to donate small, click here: Paypal
1 Like
Tourist
8 0 0

Thank you!   this worked perfectly.

0 Likes
Tourist
8 0 0

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.

0 Likes
Excursionist
132 20 23

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.
My Email: guleriathakur43@gmail.com
If helpful then please Like and Accept Solution.
If you happy and want to donate small, click here: Paypal
0 Likes
Tourist
8 0 0

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.

0 Likes