Solved

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

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)

Developer-G
Shopify Partner
3033 593 846

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 26 (26)

Developer-G
Shopify Partner
3033 593 846

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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.

Developer-G
Shopify Partner
3033 593 846

Put it in custom.js under assets.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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.

Developer-G
Shopify Partner
3033 593 846

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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
6 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
Visitor
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
5 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
Excursionist
12 0 11

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

devVincent
Visitor
1 0 0

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 🙂

 

Developer-G
Shopify Partner
3033 593 846

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Californiacut
Tourist
6 0 6
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
Bambusbasis
Explorer
56 1 9

Hi @Developer-G,
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 </body>-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

Developer-G
Shopify Partner
3033 593 846

Hello @Bambusbasis ,

 

First check the variant option you have with craft theme is using select box (drop-down) or radio buttons or something else. If theme is is using select box or radio button then pick the class name and  replace it with 

single-option-selector

Next step check field have same name 

[name="id"]

if in your theme case its different please replace it too.

 

Thanks
 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Bambusbasis
Explorer
56 1 9

I'm very happy that you help me! But I have some trouble understanding what you mean.

I think in my case it is using radio buttons. But I don't know where to check the class name. And how i find out if the field has the same name, i don't know either.

Can you explain it to me a bit more precisely?

Thanks

Bambusbasis
Explorer
56 1 9

Hello @Developer-G,

I think now I found the information in the code:

Bildschirmfoto 2023-03-16 um 20.35.55.png

If I understood correctly, this is the class name I need:

product-form-input

And the theme is using radio buttons. But what is the field name you mean?

 

I know I'm not a pro, but I hope you will help me anyway.

 

Best regards

Daniela

Developer-G
Shopify Partner
3033 593 846
jQuery(function() {
    $('.product-form-input [name=Breite]').on('change', function(){
        setTimeout(function(){ 
          if($(this).val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

 

Note: Code is not tested I just rewrite the existing solution a/to the screen-shot you shared. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Bambusbasis
Explorer
56 1 9

Hey @Developer-G,

thanks for your help! It's not the solution yet, but I understand the code a bit better now.
However, I still have to ask a friend if he can explain the connections to me better.😅

Wish you a nice weekend!

Best regards
Daniela

Bambusbasis
Explorer
56 1 9

I've finally been able to implement the desired behavior of our online shop 🙂

 

We are using Craft Version 8.0.0

 

In product-variant-options.liquid I assigned a class to the option buttons (line 52):

 

Bambusbasis_0-1680000217745.png

 

And added in main-product.liquid the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".refresh-button").on("change", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

 

@Developer-GThx for your help!

hasibalhasan
Shopify Partner
3 0 0

I'm using 'Prestige' theme I recently added "Color swatch" to the "Frame Swatch" function but when I select the first value change it is working fine. But when I select the frame variant the price doesn't change. If I select a frame and then if I refresh this page then the price changes.