Rivets.js Cart.js Shopify产品未在购物车上移除/更新

时间:2018-07-08 10:32:02

标签: javascript shopify rivets.js

我有一个使用rivets.js,cart.js并使用shopify的购物车页面。

我的问题不是全部删除,购物车页面上的数量增加/减少按钮都起作用。

下面是我正在使用的代码。 显示屏工作正常。它显示数量,价格,商品名称,描述等。

<div data-cart-view="data-cart-view">

  <div class="cart-info cart-info--mobile">
  <div class="grid">
    <div class="grid__item one-third">

        <strong data-cart-render="item_count">{{ cart.items.size }}</strong>

      <small>recommendations</small>
    </div>
    <div class="grid__item one-third">
        <strong data-cart-render="item_count"></strong>
      <small>pills per pack</small>
    </div>
    <div class="grid__item one-third cart-total">
      <strong>$ <span rv-html="cart.total_price | customcurrency"></span></strong>
      <small>per month</small>
    </div>
  </div>

  </div>



  <div rv-each-item="cart.items" class="cart-item grid">
    {% include 'bold-cart-item' with item %}
    <ul class="hide">
      <li rv-each-property="item.propertyArray < properties"  rv-data-id="property.name" rv-data-name="property.value" class="property-counter"></li>
    </ul>
    <div class="grid__item one-sixth">
      <img rv-src="item.image | productImageSize '250x250'">
    </div>


    <span rv-html="index | plus 1"></span>

    <div class="grid__item five-sixths"> 
      <div class="grid">
        <div class="grid__item large--four-sixths two-thirds">
          <h3 rv-text="item.title"></h3>
          <div class="cart-quantity" rv-data-id="item.title">
            <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | minus 1">-</a>
            <div class="qty"><span class="num" rv-text="item.quantity"></span> <span class="tablet">tablet</span></div>
            <a href="#" rv-data-cart-update="index | plus 1" rv-data-cart-quantity="item.quantity | plus 1">+</a>

            <span class="dailydose">Suggested daily dose</span>
          </div>


          {{ bold_item_properties }}
          {{ bold_recurring_desc }}
          {{ bold_item_price }}
        </div>
        <div class="grid__item large--two-sixths one-third text-right">
          <div class="item-price">
            <div class="price">$<span rv-html="item.line_price | customcurrency"></span></div>
            {% comment %}<td rv-html="item.line_price | money Currency.currentCurrency"></td>{% endcomment %}
            <small>per month</small>
          </div>
          <a href="#" rv-data-cart-remove="index | plus 1"  class="item-remove">&times;</a>
        </div>
      </div>
    </div>
  </div>


<div class="cart-info cart-info--desktop">
  <div class="grid">
    <div class="grid__item one-third">
        {% comment %} <strong data-cart-render="item_count"></strong>{% endcomment %} 
      <strong>{{ cart.items.size }}</strong>
      <small>recommendations</small>
    </div>
    <div class="grid__item one-third">
        <strong data-cart-render="item_count"></strong>
      <small>pills per pack</small>
    </div>
    <div class="grid__item one-third cart-total">
      <strong>$<span rv-html="cart.total_price | customcurrency"></span></strong>
      <small>per month</small>
    </div>
  </div>

  </div>

  </div>

任何帮助将不胜感激。 它还将Bold用作定期订阅应用程序。

谢谢。

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,无法解决。我看到控制台给出一个错误,指出jQuery中未定义ajax函数。原来我使用的是 slim 版本,其中不包含ajax内容。

启用并使用常规的minified version,现在,删除按钮和数量选择器似乎都可以正常工作。