Shopify / Cart.js / 更新分配和计算的变量？

Question

正在尝试动态计算一些值，但卡住了。很想计算税额并显示它们。在 cart.js 之前，我们分配了非常有效的临时变量。

不用说那些现在也需要更新了。

<div class="grid__item">
    {% assign var_net = cart.total_price | divided_by:1.19 %}   
    {% assign var_tax = cart.total_price | minus: var_net %}   
    <p>
        {{ cart.total_price | money_without_currency }} EUR<br/>
        —<br/>
        {{ var_net | money_without_currency }} EUR<br/>
        {{ var_tax | money_without_currency }} EUR<br/>                
        —<br/>
        {{ cart.total_price | money_without_currency }} EUR
    </p>
</div>

本次绘制价格：

<span rv-html="cart.total_price"></span>

但是如何才能进行上述计算呢？

Answer 1

首先，您需要确保您使用的 Cart.js 版本捆绑了 Rivets.js（它在 [=35= 中作为 rivets-cartjs.min.js ]包）。

然后您就可以使用与 Liquid 非常相似的方式在您的主题模板中使用许多过滤器 - 例如：

<div class="grid__item" data-cart-view>
  <p>
    <span rv-text="cart.total_price | money_without_currency">
      {{ cart.total_price | money_without_currency }}
    </span> EUR
  </p>
</div>

这将在使用 Liquid 初始页面加载时呈现总价，并使 <span> 的文本保持动态更新。请注意添加的 data-cart-view 属性，它告诉 Cart.js 在购物车更改时动态更新此元素的内容。

动态地实现您的 var_net 和 var_tax 会有点棘手。 Cart.js 确实附带了数学过滤器，但只有 plus 和 minus 并且他们假设你只使用整数（我只是 opened a ticket 在下一个版本中修复它） .

幸运的是，我们可以非常简单地为 Cart.js 定义我们自己的格式化程序！尝试在加载 rivets-cart.min.js 之后但在调用 CartJS.init():

之前添加一些这样的代码

<script>
  rivets.formatters.var_net = function(price) {
    return price / 1.19;
  }
  rivets.formatters.var_tax = function(price) {
    return price - rivets.formatters.var_net(price);
  }
</script>

这样做之后，您应该能够在 Liquid 代码中实现准确的初始渲染，并使用如下模板动态更新内容：

<div class="grid__item" data-cart-view>
  {% assign var_net = cart.total_price | divided_by:1.19 %}   
  {% assign var_tax = cart.total_price | minus: var_net %}   
  <p>
    <span rv-text="cart.total_price | money_without_currency">
      {{ cart.total_price | money_without_currency }}
    </span> EUR<br/>
    —<br/>
    <span rv-text="cart.total_price | var_net | money_without_currency">
      {{ var_net | money_without_currency }}
    </span> EUR<br/>
    <span rv-text="cart.total_price | var_tax | money_without_currency">
      {{ var_tax | money_without_currency }}
    </span> EUR<br/>
    —<br/>
    <span rv-text="cart.total_price | money_without_currency">
      {{ cart.total_price | money_without_currency }}
    </span> EUR<br/>
  </p>
</div>

Shopify / Cart.js / 更新分配和计算的变量？

Shopify / Cart.js / Update assigned and calculated variables?

ajax

cart

shopify