Shopify Product Price Calculation Problem

Other Questions Shopify
1

I’m having trouble with my Shopify price calculations and could really use some help. My JavaScript code works perfectly when I comment out a specific line, but breaks completely when I include it.

The issue is that when I try to use the money_without_trailing_zeros filter, my calculations stop working. Without this filter, Shopify seems to treat £20.00 as £2000 in my JavaScript, which messes up everything. I need to format the price correctly but keep the calculations functional.

Here’s my current code:

<p>Current Price: {{ item.price | money_without_trailing_zeros }}</p>
<label for="area-needed">Square Meters Required</label>
<input type="number" id="area-needed" name="custom[area_needed]" required min="1" max="999" placeholder="Enter area">

Calculated Packages: <span id="result_packages"></span>
Final Cost: <span id="result_cost"></span>
Cost Per Package: <span id="result_package_price"></span>
Package Coverage: <span id="result_coverage"></span>

var areaInput = document.querySelector("#area-needed");
var resultPackages = document.querySelector("#result_packages");
var resultCost = document.querySelector("#result_cost");
var resultPackagePrice = document.querySelector("#result_package_price");

const packageSize = {{ coverage }};
const itemPrice = {{ item.price }};
// This line breaks everything when uncommented:
// var formattedPrice = {{ item.price | money_without_trailing_zeros }};

function calculateCoverage(){
    var requiredArea = document.getElementById("area-needed").value;
    var totalCost = itemPrice * requiredArea;
    var packagesNeeded = requiredArea / packageSize;
    var packageCost = itemPrice * packageSize;
    
    resultPackages.innerHTML = packagesNeeded;
    resultCost.innerHTML = totalCost;
    document.getElementById("result_package_price").innerHTML = packageCost;
    document.getElementById("result_coverage").innerHTML = packageSize;
}

areaInput.addEventListener("input", calculateCoverage);

Any ideas why this happens or how I can fix the price formatting without breaking my calculator function?

2

you’re mixing liquid template with js - that’s the issue. {{ item.price | money_without_trailing_zeros }} outputs a string like “£20.00”, not a number. store the raw price as const rawPrice = {{ item.price | divided_by: 100 }}; for calc, format it just for display.

3

The money filter spits out a formatted string that JavaScript can’t calculate with. I keep two separate variables - one for math, one for display:

const itemPriceForCalc = {{ item.price | divided_by: 100 }}; // Raw number
const itemPriceDisplay = "{{ item.price | money_without_trailing_zeros }}"; // Formatted string

Use itemPriceForCalc for your math and itemPriceDisplay when showing prices to users. The divided_by filter converts Shopify’s price format (stores £20 as 2000 cents) back to the actual decimal. Your calculations work properly and you still get nice formatting for display.