Challenge

The client wanted to have a price calculator for a product. It needed to be able to take a number in mm for width and height, calculate the area, and calculate a price based on the area multiplied by the unit price of 1m², so users could buy it.

The client didn’t want to use apps. He wanted to have this calculator custom developed in his theme.

Our solution

We had to give the customer a setting to set their unit price for 1m² and use this information to correctly calculate the price on product page while also using the numbers inputted by the user on the product page.

In order to allow users to purchase the product with the new calculated price, we had to create one additional dummy product with price of $0.01 so we could calculate the right quantity in order to set the calculated price as the Total Price in the order. This is crucial because Shopify only allows integers for the Qty, and Qty is needed to sell anything as per the following formula:

$$ UnitPrice * Qty = Total Price $$

Here is an example so we can better understand why this dummy product with price $0.01 is needed.

Let’s say the unit price for 1m² is:

$$ 1m² = \text\$10 $$

And the user inputs:

$$ \text\ width = 100mm, \text\ height = 50mm $$

The total area is:

$$ \text\ area = 5000mm² = 50m² $$

Price calculated for the user:

$$ 50m² * \text\$10 = \text\$50 $$

This is what we would see on the product page that is being calculated with these numbers:

$50 is now the total price or the calculated price. This is what the user needs to pay for. So since we have the dummy product with a unit price of $0.01 and we have the total price which is $50, we can get the right Qty number we need in order to sell this product. Again, this is needed because the Qty has to be an integer. It can’t contain decimals. So we end up with something like this at checkout: