Jump to content

Changing Product Pricing using Javascript

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

@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 comment

@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 comment

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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 comment
  • 1 year later...

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 comment
  • 8 months later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.