Shopify 迷你购物车显示的产品数量不是总数

Question

我正在使用 Shopify 并希望微型购物车显示 products/items 的数量，而不是购物车的总数。例如，如果我卖 3 米的一种面料，然后卖 4 米的另一种面料，那么它说的是 2 而不是 7。

我已经设法用 cart.items.size（而不是 cart.item_count）修改了 header 编码，这在页面首次加载时工作正常。但是，如果我在产品页面上添加产品，迷你购物车会更新，但它会再次计算总数，而不是面料数量。如果我刷新页面，那么它又好了。

我曾尝试将 javascript 编辑为 cart.items.size 而不是 cart.item_count，但当将商品添加到购物车时它只是显示 'undefined'。

我没有编辑经验 javascript 所以请有人指点我正确的方向。如果您需要任何额外的代码或信息，请说，如果我遗漏了什么，请道歉。

这是有效的 header 代码：

<div class="mini-cart-wrap" href="#">
  {% if settings.cart-icon == "cart" %}
    {% include 'icon' with 'cart' %}
  {% else %}
    {% include 'icon' with 'bag' %}
  {% endif %}
  <label><span class="item-count">{{ cart.items.size }}</span> {{ 'layout.header.item_count' | t: count: cart.items.size }}</label>
  <div class="mini-cart {% if shop.customer_accounts_enabled %}account-enabled{% endif %} {% if cart.items.size == 0 %}empty-cart{% endif %}">
    <div class="arrow"></div>
    <div class="mini-cart-items-wrap">

        <p class="no-items">{{ 'layout.header.no_items' | t }}</p>

        {% for item in cart.items %}
        <div id="item-{{ item.id }}" class="item clearfix">
          <div class="image-wrap">
            <img alt="{{ item.product.title }}" src="{{ item | img_url: 'small' }}">
            <a class="{% if settings.product-image-borders %}overlay{% endif %}" href="{{ item.url }}"></a>
          </div>
          <div class="details">
            {% if settings.show-brand-names %}
              <p class="brand">{{ item.vendor | link_to_vendor }}</p>
            {% endif %}
            <p class="title"><a href="{{ item.url }}">{{ item.product.title }}</a><span class="quantity">× <span class="count">{{ item.quantity }}</span></span></p>
            <p class="price"><span class="money">{{ item.line_price | money }}</span></p>
            {% unless item.variant.title == 'Default Title' %}<p class="variant">{{ item.variant.title }}</p>{% endunless %}
            {% if item.properties %}
              {% for property in item.properties %}
                {% unless property.last == blank %}
                  <p class="property">
                    <span class="property-label">{{ property.first }}:</span>
                    {% if property.last contains '/uploads/' %}
                      <a class="property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                    {% else %}
                      <span class="property-value">{{ property.last }}</span>
                    {% endif %}
                  </p>
                {% endunless %}
              {% endfor %}
            {% endif %}
          </div>
        </div>
        {% endfor %}
    </div>
    <div class="options clearfix">
      <a class="action-button view-cart desaturated" href="/cart">{{ 'layout.header.view_cart' | t }}</a>
      <a class="action-button checkout" href="/checkout">{{ 'layout.header.checkout' | t }}</a>
    </div>
  </div>
</div>

这是当前的 javascript（未经编辑）

ProductView.prototype.updateMiniCart = function(cart) {
  var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, productPrice, propertiesArray, propertyKeysArray, ref, variant;
  miniCartItemsWrap = $(".mini-cart-items-wrap");
  miniCartItemsWrap.empty();
  if (cart.item_count !== 1) {
    itemText = Theme.cartItemsOther;
  } else {
    itemText = Theme.cartItemsOne;
    $(".mini-cart .options").show();
    miniCartItemsWrap.find(".no-items").hide();
  }
  $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.item_count + "</span> " + itemText);
  ref = cart.items;
  for (j = 0, len = ref.length; j < len; j++) {
    item = ref[j];
    productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
    variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
    itemProperties = "";
    if (item.properties) {
      propertyKeysArray = Object.keys(item.properties);
      propertiesArray = _.values(item.properties);
      i = 0;
      while (i < propertyKeysArray.length) {
        if (propertiesArray[i].length) {
          itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
        }
        i++;
      }
    }
    miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
  }
  if (Theme.currencySwitcher) {
    return $(document.body).trigger("switch-currency");
  }
};

还有这里（快速查看）

ProductView.prototype.updateMiniCart = function(cart) {
  var i, item, itemProperties, itemText, j, len, miniCartItemsWrap, productPrice, propertiesArray, propertyKeysArray, ref, variant;
  miniCartItemsWrap = $(".mini-cart-items-wrap");
  miniCartItemsWrap.empty();
  if (cart.item_count !== 1) {
    itemText = Theme.cartItemsOther;
  } else {
    itemText = Theme.cartItemsOne;
    $(".mini-cart .options").show();
    miniCartItemsWrap.find(".no-items").hide();
  }
  $(".mini-cart-wrap label").html("<span class='item-count'>" + cart.item_count + "</span> " + itemText);
  ref = cart.items;
  for (j = 0, len = ref.length; j < len; j++) {
    item = ref[j];
    productPrice = Shopify.formatMoney(item.line_price, Theme.moneyFormat);
    variant = item.variant_title ? "<p class='variant'>" + item.variant_title + "</p>" : "";
    itemProperties = "";
    if (item.properties) {
      propertyKeysArray = Object.keys(item.properties);
      propertiesArray = _.values(item.properties);
      i = 0;
      while (i < propertyKeysArray.length) {
        if (propertiesArray[i].length) {
          itemProperties = itemProperties + ("<p class=\"property\">\n    <span class=\"property-label\">" + propertyKeysArray[i] + ":</span>\n    <span class=\"property-value\">" + propertiesArray[i] + "</span>\n</p>");
        }
        i++;
      }
    }
    miniCartItemsWrap.append("<div id=\"item-" + item.variant_id + "\" class=\"item clearfix\">\n    <div class=\"image-wrap\">\n        <img alt=\"" + item.title + "\" src=\"" + item.image + "\">\n        <a class=\"overlay\" href=\"" + item.url + "\"></a>\n    </div>\n    <div class=\"details\">\n        <p class=\"brand\">" + item.vendor + "</p>\n        <p class=\"title\"><a href=\"" + item.url + "\">" + item.product_title + "</a><span class=\"quantity\">× <span class=\"count\">" + item.quantity + "</span></span></p>\n        <p class=\"price\"><span class=\"money\">" + productPrice + "</span></p>\n        " + variant + "\n        " + itemProperties + "\n    </div>\n</div>");
  }
  if (Theme.currencySwitcher) {
    return $(document.body).trigger("switch-currency");
  }
};

Answer 1

Liquid 使用 array.size 来确定数组的大小。这就是您的 header 使用 Liquid 模板的原因。

另一方面，

JavaScript 使用 array.length 来确定数组的大小。尝试用 cart.items.length

替换 JavaScript 中的 cart.items.size

Shopify 迷你购物车显示的产品数量不是总数

Shopify mini cart show number of products not total amount

javascript

shopify