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

首先，您將要確保使用的是捆綁Rivets.js的Cart.js版本（它在Cart.js軟件包中為rivets-cartjs.min.js ）。

然后，您就能夠在一個非常類似的方式液使用大量的過濾器在你的主題模板 - 例如：

<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 ，他們假設你用整數唯一的工作（我只是開了票來解決，在未來的版本）。

幸運的是，我們可以非常簡單地為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>