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

【问题标题】：Shopify / Cart.js / Update assigned and calculated variables?Shopify / Cart.js / 更新分配和计算的变量？
【发布时间】：2016-02-04 20:42:14
【问题描述】：

尝试动态计算一些值，但卡住了。很想计算税额并显示出来。在 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>

但是我们如何进行上述计算呢？

【问题讨论】：

标签： ajax shopify cart

【解决方案1】：

首先，您需要确保您使用的是捆绑 Rivets.js 的 Cart.js 版本（它在 Cart.js 包中以 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>

【讨论】：

谢谢，帮了大忙！效果很好。