Having trouble loading the Shopify liquid object {{product.price | json}} into JS, as it's displaying NaN with the current code on the front end. Any suggestions on how to properly pass liquid into JS?
I've tried two functions but neither seem to be working with the Shopify product price. Using a static number has been successful, but I need the price to be dynamic as expected.
<div class="afterpay-section" id="afterpay" v-for="item in items" v-bind:class="{'afterpay-label': afterpayAlert}">
${ afterpayPayments }
</div>
<script>
const app = new Vue({
el: '#afterpay',
data: {
textColor: {
color: 'red',
},
textFont: {
'font-weight': 'bold',
},
afterpayMessage: 'Or 4 payments of',
withAfterpay: 'with AfterPay',
failedAlertOne: '',
failedAlertTwo: '',
items: [
{ price: {{ product.price | money_without_trailing_zeros | json }} },
],
},
delimiters: ['${', '}'],
computed: {
afterpayAlert: function() {
if (this.failedAlertOne) {
return this.failedAlertOne + ' ' + this.failedAlertTwo;
} else {
return this.afterpayMessage + ' ' + {{ product.price | money_without_trailing_zeros | json }} + ' ' + this.withAfterpay;
}
},
afterpayCal() {
let productPrice = '{{ product.price | money_without_trailing_zeros | json }}';
let afterpayDiscount = 4;
let totalPrice = productPrice / afterpayDiscount;
if(this.afterpayMessage) {
return this.afterpayMessage + ' ' + {{ product.price | money_without_trailing_zeros | json }} + ' ' + this.withAfterpay;
}
},
afterpayPayments () {
let productPrice = '{{ product.price | money_without_trailing_zeros | json }}';
return this.afterpayMessage + ' ' + ((productPrice / 4) / 100 ).toFixed(2) + ' ' + this.withAfterpay;
}
},
})
</script>
<style>
.afterpay-label {
background-color: transparent;
color: #000;
padding: 10px 0;
margin: 5px 0;
}
</style>