Reload product page when a variant is selected

Tourist
10 0 1

Hi,

I have Afterpay on my site and it displays the fortnightly payments on the product page for a product.  If a variant with a different price is selected, the product price is changed, but the Afterpay fortnightly payment information is not updated.  How do I force the page to reload if a variant is selected?

https://www.kitchentemple.com.au/products/uppercup-coffee-cup-dusty-pink?variant=996733714456

Thanks

 

 

0 Likes
Shopify Expert
9807 92 1560

Rather than force the page to reload you'll want to look into adjusting the JavaScript on the site so it changes the Afterpay value as well. 

A reload is not a good idea since most themes select a variant automatically on page load. This means the page would load, auto select a variant, then reload (and potentially do so forever).

Also moving this to the Design section since Shopify Scripts App is not related to this convo.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
10 0 1

Thanks very much

0 Likes
New Member
1 0 0

You are best to just use the snippet provided by Afterpay to achieve this https://static.secure-afterpay.com.au/afterpay-shopify-product.txt

0 Likes
Shopify Expert
9807 92 1560

That won't work for all themes but it's a good starting place.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
4 0 0

Im having a similar problem. I added code to my product page to show a premium member price based on a discount percentage. It works but it doesnt update automatically when a new variant is selected. You have to refresh the page and then it will show the updated premium member price. I'm also using the bold memberships app.

 

<div class="product__price">
{% include 'product-price', variant: current_variant %}
</div>

<h4 style="color: #fc7e76"><a href="https://bundlesbuyersclub.com/pages/bbc-membership" target="_blank">Premium Member price:</a> {{ bold_variant_price | times: 0.52 | money }}</h4>

Annotation 2019-08-01 142316.jpg

 

Java is over my head, I wouldnt what I was looking at if it was right infront of my face.  But from some of the posts I've read I'm thinking that might be my problem. Any thoughs on a solution here? I was even thinking maybe I could just add a "See Price" button under "premium member price" that refreshes the page.

0 Likes
Tourist
4 0 1
jQuery(function() {
    $('.single-option-selector').on('change', function(){
        setTimeout(function(){ 
          if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

Adding this script inside a script tag should do the auto page reload on variant selection. 

1 Like
New Member
4 0 0

Thanks it worked out!

0 Likes
Excursionist
14 0 5

@Nitin_Kujur Would like to see if this solution works for me but not sure exactly where I need to paste that code. Virtually every product I sell has more than one variant and none of my quantities on hand update.

0 Likes