Shopifyミニ・カート表示合計数ではない商品の数を表示

Question

Shopifyを使用していて、ミニカーにカートの合計ではなく、商品数を表示したいとします。たとえば、あるファブリックを3メートル、次に別のファブリックを4メートル売ると、2つではないと言います。

私はcart.items.size（cart.item_countではなく）でヘッダコーディングを修正できました。これはページが最初に読み込まれたときにうまく動作します。しかし、私が製品ページにいて商品を追加している場合、ミニカートは更新されますが、ファブリックの数ではなく、合計が数えられます。私がページをリフレッシュすると、再びうまくいく。

cart.item_countの代わりにcart.items.sizeを読むようにjavascriptを編集しようとしましたが、項目がカートに追加されたときに「未定義」と表示されます。

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

そして、ここでは（クイックビュー用）現在の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

液体は配列のサイズを決定するのにarray.sizeを使用します。そのため、Liquidテンプレートからヘッダーが作成されています。

JavaScriptは、array.lengthを使用して配列のサイズを決定します。あなたのJavaScriptにを入れてみてくださいcart.items.length