I have created a page which let's the user build their desired product. Based on the user input I calculate dimensions and price of the final product. I tried using a few applications but none of them seemed to offer all the functionality that I need.
Is there any way I can achieve the outcome I need?
If you already have product created you can use cart/add.js endpoint which is documented here https://shopify.dev/docs/themes/ajax-api/reference/cart
It can be called from the shopify page
If you also want to create product first than you should use shopify api (it cannot be done from the page, so you'll have to use another server to do that)
Add to cart will only work for an existing product.
What I am looking for is something like this
The user enters the size and then the final price is reflected. I believe they are using a custom product template which takes the user input does calculations in the background and shows the final price.
You are right. The price is calculated on the product page only. If you look on their request to /cart/add.js, then you'll see that thay always add to cart the same product (they do not create a new product every time)
So even when I make a product for 219.89
I still get a base product in my cart for 39.89
Also they add separate product for tie backs (I choose 12 tie backs and they added another product with quantity 12)
So they have one existing product which is added to cart regardless what have been created on the constructor page (I believe that they save parametes of constructed products in cart attributes). It means that price is only calculated there, and they don't create another product with this price. So thats why you don't see the correct price in the cart
You can use the same method if these limitations are aceptable for you. In other case you have to use shopify api to create seperate products every time. To do this you'll need a third party server wich will get requests from the constructor page and create products in shopify using api.