有没有办法使用 Shopify Liquid 动态修改文本？答案

【问题标题】：Is there a way to dynamically modify a text with Shopify Liquid?有没有办法使用 Shopify Liquid 动态修改文本？
【发布时间】：2021-09-18 10:40:36
【问题描述】：

我有一个与 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>

这确实有效，但前提是我刷新页面。

你怎么看？和想法？

【问题讨论】：

标签： shopify liquid

【解决方案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!"
}

【讨论】：