Need to auto refresh when variant is chosen

Technical Q&A
1

Running into an issue.

Whenever the customer chooses a variant (ex. size 1 or size 2. different price breaks for different sizes), theres a price break table that is displayed. The table stays on the price breaks for size 1, and will not change to the correct table until you manually refresh.

Is there any way to auto refresh the page when the customer changes the variant/size? I am using the Masonry theme and using Bold Custom Pricing- Wholesale.

2

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 every-time when variant change. but may be you have to make changes in it a/to your theme code.
You can use in theme.js or related file a/to theme you used.

Thanks

3

Hello,

I use this code, but it does not work for me. What do I need to adjust for the Debut theme? Do you have a tip for me?

I would be very happy if you could help me.

Thanks a lot!

4

Hi,

Where abouts do you paste this into the code?

Thanks in advance.

5

I tried this on Envy theme and it didn’t work.

I have a code the creates a link to a tool based on the product id, when a variant is chosen I need the code to refresh so that the new link is generated.

6

Did you have any luck solving this issue in Debut? I have the same problem…

7

yes, but you have I had add a link to the page based on a tag, it does not automatically refresh the page… so not ideal but it works!

{% if product.tags contains ‘variations’ %}
If you choose a different color, please click here to refresh.



{% endif %}

8

I have pasted this code within the product.liquid page of my site and it works great to change the image to the variant image in Firefox. However, the issue I’m running into is within Chrome and Safari, when the page reloads, the “checked” variant stays on the first variant on the page even though the image and the product ID within the url is correct (and if you hit ‘add to cart’ the correct product is added). Is there a way to show the correct variant selected in the list?

Here’s one of the products with variants: https://phoenixrope.com/collections/commercial-paracord/products/650-commercial-paracord

Thank you!

9

This part is not covered in this script. btw to do this you have to implement a liquid logic.
If url contains specific variant then make the specific variant selected.
Now: This is just an idea you can implement it a/to theme code you are using.

10

This part is not covered in this script. btw to do this you have to implement a liquid logic.
If url contains specific variant then make the specific variant selected.
Now: This is just an idea you can implement it a/to theme code you are using.

Thank you for the quick reply! How would I go about achieving this?

11

As I said implement a liquid logic a/to the theme code you are using.

12

I’m sorry to sound dense, but I don’t know how to write that type of logic.