Shopify mini cart 제품 총 개수가 아닙니다.

Question

Shopify를 사용 중이며 미니 카트에 카트의 합계가 아닌 제품 수를 표시하려고합니다. 예를 들어, 하나의 패브릭 3 미터, 다른 패브릭 4 미터를 판매하는 경우 2가 아니라고 말합니다.

나는 cart.items.size (cart.item_count 대신)로 헤더 코딩을 수정했으며 이것은 페이지가 처음로드 될 때 잘 동작합니다. 그러나 제품 페이지에서 상품을 추가하면 미니 카트가 업데이트되지만 원단 수는 다시 계산됩니다. 페이지를 새로 고침하면 다시 정상적으로 작동합니다.

javascript를 편집하여 cart.item_count 대신 cart.items.size를 읽으려고했으나 항목이 장바구니에 추가 될 때 '정의되지 않음'이 표시됩니다.

자바 스크립트를 편집 한 경험이 없으므로 누군가 나를 올바른 방향으로 향하게 할 수 있습니다. 어떤 추가 코드 나 정보가 필요하다면, 나는 무엇이든 놓치면 사과드립니다. 여기

가 작동되는 헤더 코드 :

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

을 그리고 여기 (빠른 뷰)도 여기에 (편집되지 않은)

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을 사용하여 배열의 크기를 결정합니다. 자바 스크립트에서 cart.items.size을 cart.items.length로 바꾸어보십시오.