Changing Product Pricing using Javascript

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.

@Paul2009 can you please share your thoughts on this? Thanks in advance.

@Paul2009 can you please share your thoughts on this? Thanks in advance.

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.

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

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

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.

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.

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]);

aneudy's solution worked for me, i needed to execute that code after programatically changing the value of the select field.