Java Math Equations don't work in shopify liquid.

Solved
allsignsTyler
Tourist
6 0 1

I'm trying to create a table that uses Java for discount pricing. I can grab the number just fine and insert it into the table but the math equation fails when implemented into the shopify page.

Any help would be much appreciated thanks.

The code below works in a regular .html document but doesn't work in shopify. I get NaN.

 

<!--Extract Only The Number-->
<span id="productPrice-alternate2">$200</span>

<!-- Discount Price Table -->
<div id="discount-table" style="width:50%; margin-left:auto;margin-right:auto;">
<h3 style="color:white; background-color:#182e49; padding:5px; text-align:center; margin-bottom:0px; font-family: Montserrat,sans-serif;">Volume Discounts</h3>
<table style="margin-top:0px;">
<tr>
<th>Buy</th>
<th>Save</th>
<th>You Pay</th>
</tr>
<tr>
<td>2-3</td> <!--Quantity-->
<td>20% off</td> <!--Percentage-->
<td id="20%"></td> <!--You Pay Price-->
</tr>
<tr>
<td>4-9</td> <!--Quantity-->
<td>30% off</td> <!--Percentage-->
<td id="30%"></td> <!--You Pay Price-->
</tr>
<tr>
<td>10-24</td> <!--Quantity-->
<td>40% off</td> <!--Percentage-->
<td id="40%"></td> <!--You Pay Price-->
</tr>
<tr>
<td>25-49</td> <!--Quantity-->
<td>50% off</td> <!--Percentage-->
<td id="50%"></td> <!--You Pay Price-->
</tr>
<tr>
<td>50-99</td> <!--Quantity-->
<td>60% off</td> <!--Percentage-->
<td id="60%"></td> <!--You Pay Price-->
</tr>
</table>
</div>

 

<!-- Discount Price Table Java -->
<script>
var price = document.getElementById('productPrice-alternate2').innerHTML;
var price2 = price.replace( /^\D+/g, ''); // replace all leading non-digits with nothing

document.getElementById("20%").innerHTML = "$" + (price2-price2*.20);
document.getElementById("30%").innerHTML = "$" + (price2-price2*.30);
document.getElementById("40%").innerHTML = "$" + (price2-price2*.40);
document.getElementById("50%").innerHTML = "$" + (price2-price2*.50);
document.getElementById("60%").innerHTML = "$" + (price2-price2*.60);
</script>

Accepted Solution (1)

Accepted Solutions
drewisme
Shopify Partner
12 2 14

This is an accepted solution.

The element you are selecting for the price contains additional html. Try a more specific selector:

var price = document.querySelector('#productPrice-alternate2 > span').innerText

View solution in original post

Replies 3 (3)
drewisme
Shopify Partner
12 2 14

I tested this in liquid and did not have any issues. Can you share a preview link of the issue?

drewisme
Shopify Partner
12 2 14

This is an accepted solution.

The element you are selecting for the price contains additional html. Try a more specific selector:

var price = document.querySelector('#productPrice-alternate2 > span').innerText

View solution in original post