Reload product page when a variant is selected

Amy31
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
Jason
Shopify Expert
10275 144 1943

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.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Amy31
Tourist
10 0 1

Thanks very much

0 Likes
Paul_McGuane
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
Jason
Shopify Expert
10275 144 1943

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

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Gokichan
Tourist
4 0 1

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
Nitin_Kujur
Shopify Partner
78 19 28
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. 

Gokichan
Tourist
4 0 1

Thanks it worked out!

renwill
Excursionist
18 0 12

@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
Nitin_Kujur
Shopify Partner
78 19 28

Pasting this code at the end of the product.liquid file should do the job. 

 

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

 

0 Likes