[英]Problems loading liquid in Javascript
I am trying to load the shopify liquid object {{product.price |我正在尝试加载 shopify 液体对象 {{product.price | json}} into JS, but it is showing NaN based on the following code on the FE, any ideas on how to pass liquid into JS?
json}} 到 JS 中,但它根据 FE 上的以下代码显示 NaN,关于如何将液体传递到 JS 的任何想法?
I have two functions, but neither work with the shopify product price.我有两个功能,但都不适用于 shopify 产品价格。 I have use a static number with sucess but need the price to be dynamic as you would expect.
我使用了一个成功的静态数字,但需要价格像您期望的那样是动态的。
<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>
You're using money
filter which most likely will give you a string like "$50" or something like that.您正在使用
money
过滤器,它很可能会给您一个类似“$50”之类的字符串。 Then you use this value in your calculations, ((productPrice / 4) / 100 ).toFixed(2)
, which will give you NaN
for sure.然后你在你的计算中使用这个值,
((productPrice / 4) / 100 ).toFixed(2)
,这肯定会给你NaN
。
Don't use money
filter or don't forget to remove $
and any other signs for the value you get.不要使用
money
过滤器或不要忘记删除$
和任何其他表示您获得的价值的标志。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.