是否有一种方法来动态修改Shopify液体文本?

Question

我有一个关于Shopify Liquid Coding的问题，我希望你能帮助我一点!

基本上，我希望在客户增加购物车页面上产品的数量时动态更新文本，而无需重新启动页面。(有点像，当有人增加产品数量时，购物车页面上的价格会更新，而无需重新启动页面。)

这是我到目前为止所做的:

<div class="cart__footer">
{% if cart.item_count == 1 %}
<p class="grid__item text-right small--text-center">Add another item for 5% discount!</p>
{% elsif cart.item_count == 2 %}
<p class="grid__item text-right small--text-center">Add another item for 10% discount!</p>
{% elsif cart.item_count == 3 %}
<p class="grid__item text-right small--text-center">Add another item for 15% discount!</p>
{% elsif cart.item_count >= 4 %}
<p class="grid__item text-right small--text-center">Hooray! Maximum discount reached!</p>
{% endif %}
</div>

这实际上是有效的，但只有当我刷新页面时。

你觉得怎么样?和想法吗?

Answer 1

我想你要找的是Cart JS API

我将使用POST /cart/add.js方法将商品添加到购物车中。该端点的返回值是一个包含当前购物车项目的JSON对象，例如:

{
"items": [
{
"id": 794864229,
"quantity": 1
}
]
}

您可以读取该信息，并使用Javascript更新页面的正确内容，例如:

let el = document.querySelector('.grid__item.text-right');
if(qty == 3){
el.innerHTML = "Add another item for 15% discount!"
}