Shopify mini cart show number of products not total amount

Question

I am using Shopify and want the minicart to show the number of products/items, not the total of the cart. For example if I sell 3 metres of one fabric and then 4 metres of another fabric then it says 2 not 7.

I have managed to amend the header coding with cart.items.size (instead of cart.item_count) and this works fine when a page first loads. However if I am on a product page and add products, the mini cart updates but it counts the total again, not the number of fabrics. If I refresh the page then it is fine again.

I have tried editing the javascript to read cart.items.size instead of cart.item_count, but it just comes up with 'undefined' when the items are added to the cart.

I have no experience of editing javascript so can someone point me in the right direction please. If you need any extra code or information please do say, apologies if I miss anything.

Here is the header code that is working:

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

And here is the current javascript (unedited)

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

and also here (for the quick view)

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 uses array.size to determine the size of an array. That's why your header is working from your Liquid template.

JavaScript, on the other hand, uses array.length to determine the size of the array. Try replacing cart.items.size in your JavaScript with cart.items.length