Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing Product Pricing using Javascript


thysquarespace

Question

I am able to change the options on product variant drop downs using javascript. But the price is not changing according to the selected options. Any help is appreciated. Thanks.

Edited by thysquarespace
Initial Revision
Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

Is this question related to this one? - Customising a Product

It will help if you can provide a working link to the site and a table of the way pricing works. Without those it's difficult for the community to understand the context or to consider possible solutions.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
  • 0

@Paul2009 Yes the questions are related, I created this question to give clearer details on my requirement. Here is working link https://www.myflexframe.com/shop/flexframe-dr285
Please enter values in the width, height inputs. You can see the price text[without $ sign] below the product price, updates which is calculated price from my script. Also the variant dropdown values change, but the [actual]price is not updating. When you click Add to Cart it shows alert to select height, width which are already changed through script.

Edited by thysquarespace
Initial Revision
Link to post
  • 0

@Paul2009 Yes the questions are related, I created this question to give clearer details on my requirement. Here is working link https://www.myflexframe.com/shop/flexframe-dr285
Please enter values in the width, height inputs. You can see the price text[without $ sign] below the product price, updates which is calculated price from my script. Also the variant dropdown values change, but the [actual]price is not updating. When you click Add to Cart it shows alert to select height, width which are already changed through script.

Link to post
  • 0

You won't be able to programmatically change the actual price because it is fixed but one solution would be to add variants for different areas, calculate the area (based on user input) and then select the nearest variant, thus changing the price to match that variant's pricing.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
  • 0

You won't be able to programmatically change the actual price because it is fixed @Paul2009 Ok, got it. But this
is a variable product. So I am already getting user input (enter 7,7 for width, height) > calculating nearest variant > updating the variant in product dropdown (updates 9,9 for width, height dropdown) based on that.

What is not working is after the values change on dropdown, the price is not changing. But if I change the values on dropdown manually the price changes. You can check the same on the above link. So all I need to do is to trigger the price change [call the function?] but unable to do so.

Link to post
  • 0

you need to update the product-variants element dataset

 

var productEl = document.querySelector(".product-variants");
var productDataset = productEl.dataset;
var variants = JSON.parse(productDataset.variants);
productDataset.variantInStock = "true";
productDataset.unselectedOptions = "[]";
// this will select the first variant. change this to whatever logic you have to select the right variant
productDataset.selectedVariant = JSON.stringify(variants[0]);

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...