免费送货倒计时，需要帮助使其自动刷新

Question

我最近在Shopify网站上的滑出式购物车中添加了一个次要功能，向客户显示要添加到购物车中才能免费送货的商品数量。它工作得很好，但是问题是，如果客户从购物车中更新其数量，则该功能不会自动更新并显示他们有资格享受免费送货服务。客户将必须刷新页面或转到另一页面以查看更新。

我如何使其自动更新？

{% assign free_quantity = 2 %}

{% assign cart_total = cart.item_count %}

{% assign cart_qty_left = free_quantity | minus: cart_total %}



<p class="tt-cart__add-on-title tt-text-2">

  {% if cart_qty_left > 0 %}

  You are {{ cart_qty_left }} item away from free shipping! 

  {% else %}

    You've got free shipping!

  {% endif %}

</p>

Answer 1

最快，最简单的解决方案是向当前页面发出AJAX请求并替换内容。

例如：

fetch(window.location.href).then(r => r.text()).then(res => {
    const html = new DOMParser().parseFromString(res, 'text/html');
    const cartText = html.querySelector('.tt-cart__add-on-title').innerText;
    document.querySelector('.tt-cart__add-on-title').innerText = cartText
})

[我们使用fetch(window.location.href)向当前URL地址发出请求，然后通过.then(r => r.text())将响应转换为文本。

之后，我们创建响应文本的DOMParser：

const html = new DOMParser().parseFromString(res, 'text/html');

我们从经过解析的html中以适当的元素作为目标的文本：

const cartText = html.querySelector('.tt-cart__add-on-title').innerText;

最后，我们用响应中得到的文本替换页面上显示的文本：

document.querySelector('.tt-cart__add-on-title').innerText = cartText

在将产品添加到购物车或更新它们时，应在特定事件上发生。