Jump to content

Changing Product Pricing using Javascript

Recommended Posts

  • Replies 9
  • Views 1.8k
  • Created
  • Last Reply

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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

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

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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...

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.