Shopify 价格问题

Question

I am struggling here. When I comment out the var priceRounded = {{ product.price | money_without_trailing_zeros }}; line the calculations work. When I don't comment it out then nothing happens. I'm trying to render out the price without the zeros. So if the product price is £20.00 then Shopify for some reason thinks it's £2000. Therefor I need to remove the trailing zeros as described in Shopify's documents .

Price {{ product.price | money_without_trailing_zeros }}<br />
<label for="meters-required">Number of M2</label><br />
<input type="number" id="meters-required" name="properties[meters required]" required minlength="1" maxlength="8" size="10"><br />    

Total Packs: <span id="output_totalPacks"></span><br />
Total Price: <span id="output_totalPrice"></span><br />
Price per Pack: <span id="output_pricePerPack"></span><br />
Price per Meter: <span id="output_pricePerMeter"></span><br />
Pack Size: <span id="output_PackSize"></span><br />


<script>

 var meters_req = document.querySelector("#meters-required"); var output_totalPacks = document.querySelector("#output_totalPacks"); var output_totalPrice = document.querySelector("#output_totalPrice"); var output_pricePerPack = document.querySelector("#output_pricePerPack"); const packSize = {{ packSize }}; const price = {{ product.price }}; //var priceRounded = {{ product.price | money_without_trailing_zeros }}; function woolCalc(){ var meters_required = document.getElementById("meters-required").value; var calc_TotalPrice = price * meters_required; var calc_TotalPacks = meters_required / packSize; var calc_PackPrice = price * packSize; output_totalPacks.innerHTML = calc_TotalPacks; document.getElementById("output_PackSize").innerHTML = packSize; document.getElementById("output_pricePerPack").innerHTML = calc_PackPrice; document.getElementById("output_totalPrice").innerHTML = calc_TotalPrice; } meters_req.addEventListener("input", woolCalc);

 Price {{ product.price | money_without_trailing_zeros }}<br /> Pack Size: {{ packSize }}<br /> Title: {{ priceRounded }};<br /> <label for="meters-required">Number of M2</label><br /> <input type="number" id="meters-required" name="properties[meters required]" required minlength="1" maxlength="8" size="10"><br /> Total Packs: <span id="output_totalPacks"></span><br /> Total Price: <span id="output_totalPrice"></span><br /> Price per Pack: <span id="output_pricePerPack"></span><br /> Price per Meter: <span id="output_pricePerMeter"></span><br /> Pack Size: <span id="output_PackSize"></span><br />

Any thoughts on what could be causing it? Or how to make the function calculate the price without thinking it is 100 x the actual price?

Answer 1

Shopify deals with money as a type of Integer. A product priced as 9.99 is dealt with as 999 at Shopify. That way, when doing math, there is no 'precision' lost. You have the obligation of converting from the integer to the decimal using filters.

So if you see 2000 and not 20.00 as you'd expect, it is because you are not converting the money with a filter. There are both Liquid and JS filters for this. So 'nothing' is causing it, it is a natural thing in Shopify.