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.