Javascript Shopify迷你购物车显示产品数量而非总金额

我正在使用Shopify，希望微型购物车显示产品/物品的数量，而不是购物车的总数。例如，如果我销售3米的一种织物，然后销售4米的另一种织物，那么它说的是2而不是7

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

我曾尝试编辑javascript以读取cart.items.size而不是cart.item\u count，但当项目添加到购物车时，它只会出现“undefined”

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

以下是正在工作的标题代码：

<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>

{%if settings.cart-icon==“cart”%}
{%include'icon'和'cart'%}
{%else%}
{%包含带有“包”%”的“图标”}
{%endif%}
{{cart.items.size}{{'layout.header.item_count'{t:count:cart.items.size}
{{layout.header.no_items'|t}
{cart.items%中的项目为%s}
{%if settings.show-brand-names%}
{{item.vendor}链接到{u vendor}
{%endif%}
×{{item.quantity}
{{item.line_price|money}
{%inspect.variant.title=='默认标题'%}
{{{item.variant.title}
{%endinspect%}
{%if item.properties%}
{item.properties%中的属性为%s}
{%1，除非property.last==blank%}

{{property.first}}：
{%if property.last包含'/uploads/'%}
{%else%}
{{property.last}
{%endif%}

{%end除非%}
{%endfor%}
{%endif%}
{%endfor%}

下面是当前的javascript（未编辑）

ProductView.prototype.updateMiniCart=函数（购物车）{
变量i、项目、项目属性、项目文本、j、len、MiniCartItemsRap、productPrice、propertiesArray、propertyKeysArray、ref、variant；
miniCartItemsWrap=$（“.MiniCart项目包装”）；
miniCartItemsWrap.empty（）；
如果（购物车项目计数！==1）{
itemText=Theme.cartItemsOther；
}否则{
itemText=Theme.cartItemsOne；
$（“.mini-cart.options”）.show（）；
miniCartItemsWrap.find（“.no items”）.hide（）；
}
$（“.mini cart wrap label”）.html（“+cart.item\u count+”+itemText）；
ref=购物车项目；
对于（j=0，len=ref.length；j”+item.variant\u title+”
“：”；
itemProperties=“”；
if（项目属性）{
propertyKeysArray=Object.key（item.properties）；
propertiesArray=u.values（item.properties）；
i=0；
而（i\n”+propertyKeysArray[i]+”：\n“+propertiesArray[i]+”\n
”；
}
i++；
}
}
miniCartItemsWrap.append（“\n\n\n\n\n
“+item.vendor+”
\n
ד+item.quantity+”
\n
“+productPrice+”
\n”+variant+“\n”+itemProperties+”\n\n）；
}
if（Theme.currencySwitcher）{
返回$（document.body）.trigger（“切换货币”）；
}
};

还有这里（用于快速查看）

ProductView.prototype.updateMiniCart=函数（购物车）{
变量i、项目、项目属性、项目文本、j、len、MiniCartItemsRap、productPrice、propertiesArray、propertyKeysArray、ref、variant；
miniCartItemsWrap=$（“.MiniCart项目包装”）；
miniCartItemsWrap.empty（）；
如果（购物车项目计数！==1）{
itemText=Theme.cartItemsOther；
}否则{
itemText=Theme.cartItemsOne；
$（“.mini-cart.options”）.show（）；
miniCartItemsWrap.find（“.no items”）.hide（）；
}
$（“.mini cart wrap label”）.html（“+cart.item\u count+”+itemText）；
ref=购物车项目；
对于（j=0，len=ref.length；j”+item.variant\u title+”
“：”；
itemProperties=“”；
if（项目属性）{
propertyKeysArray=Object.key（item.properties）；
propertiesArray=u.values（item.properties）；
i=0；
而（i\n”+propertyKeysArray[i]+”：\n“+propertiesArray[i]+”\n
”；
}
i++；
}
}
miniCartItemsWrap.append（“\n\n\n\n\n
“+item.vendor+”
\n
ד+item.quantity+”
\n
“+productPrice+”
\n”+variant+“\n”+itemProperties+”\n\n）；
}
if（Theme.currencySwitcher）{
返回$（document.body）.trigger（“切换货币”）；
}
};

液体使用

array.size

确定阵列的大小。这就是为什么你的标题是从你的液体模板工作

另一方面，JavaScript使用

ar
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");
  }
};