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

Store Design
1

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.

2

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

3

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.

4

Put it in custom.js under assets.

5

Thank you! this worked perfectly.

6

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.

7

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

8

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.

9

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?

10

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.

11

Hi,

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

12

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.

13

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

14

Screenshot_20210211-120949_Chrome.jpg
Screenshot_20210211-120949_Chrome.jpg720×1600 150 KB

Screenshot_20210211-120949_Chrome.jpg
Screenshot_20210211-120949_Chrome.jpg720×1600 150 KB

Screenshot_20210211-122915_Chrome.jpg
Screenshot_20210211-122915_Chrome.jpg720×1600 145 KB

M

Screenshot_20210211-123005_Chrome.jpg
Screenshot_20210211-123005_Chrome.jpg720×1600 222 KB

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.

15 
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

16

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

{% for option in product.options_with_values %}

{{ option.name }}
{% endfor %}

{% endif %}

{% endif %}

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

17

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 :slightly_smiling_face:

18

@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 tag and keep notes you have to make changes in it a/to the theme you are using.

19

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

20

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