Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I have a small problem, from my homepage when I add to cart the product, in the cart at the top the item number is wrong. Whatever the number of products you add, the item number in the cart is always N+1 and if you delete every product in the cart, the item number stays at 1.
This problem occurs only when adding from the "featured product" section in my homepage.
Thanks
That's interesting. Try these two things and let me know the results:
1) Delete the section and add it again.
2) Try using your website on another browser.
Indeed. Tried both, without result. Thx anyway
Do you have any apps that could be affecting it?
Or, have you made some changes in the past to your code?
None of that. It must come from the original theme code.
@Tiago10 ,I think there is some code glitch with AJAX on the home page. After refreshing the page it'll display the correct count.
Could you share the JS/liquid code of the side cart drawer?
Yes I noticed it.
Sure here you have :
{%- liquid
assign subtotal = cart.total_price | plus: 0
assign original_subtotal = cart.original_total_price | plus: 0
assign cart_items_size = cart.item_count
assign cart_discount_size = cart.cart_level_discount_applications.size
assign continue_shopping_link = routes.all_products_collection_url
assign show_continue_shopping = settings.show_continue_shopping
assign show_empty_cart_buttons = settings.show_empty_cart_buttons
assign empty_cart_buttons = settings.empty_cart_buttons | default: 'main-menu'
if settings.continue_shopping_link != blank
assign continue_shopping_link = settings.continue_shopping_link
endif
-%}
<div id="cart-drawer" class="cart-drawer" data-cart-drawer>
<template data-cart-drawer-template>
{% if settings.cart_custom_message_text != blank %}
<div class="cart__message cart__message--custom {{ settings.cart_custom_message_color }}" data-cart-bar>
{{ settings.cart_custom_message_text }}
</div>
{% endif %}
<div class="cart-drawer__head">
<h3>{{ 'cart.general.title' | t }}<span class="cart-drawer__item-qty{% if cart_items_size == 0 %} hidden{% endif %}" data-cart-items-qty>{{ 'cart.label.items_with_count' | t: count: cart_items_size }}</span></h3>
<a href="#cart-drawer" class="cart-drawer__close" data-cart-drawer-toggle aria-label="{{ 'general.accessibility.close_drawer' | t }} {{ 'cart.general.title' | t }}">
{%- render 'icon-close-small' -%}
</a>
<div class="loader loader--line"><div class="loader-indeterminate"></div></div>
</div>
<div class="cart-drawer__body" data-cart-drawer-body>
{%- liquid
assign free_shipping_text = block.settings.message | default: settings.message
assign is_enable = false
if block.settings.message != blank
assign is_enable = true
endif
if settings.show_free_shipping_message and settings.free_shipping_limit != blank and free_shipping_text != blank
assign is_enable = true
endif
-%}
{%- if is_enable -%}
{%- liquid
assign limit = settings.free_shipping_limit | plus: 0
assign limit_currency = limit | times: 100
assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100
-%}
{%- capture left_to_spend -%}
<span data-left-to-spend>{{ limit_currency | minus: cart.total_price | money_without_trailing_zeros }}</span>
{%- endcapture -%}
{%- liquid
assign free_shipping_message = free_shipping_text | replace: '||amount||', left_to_spend
assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t
assign class_message = ''
if subtotal_without_currency >= limit
if qualified_shipping_message != blank
assign class_message = ' is-success'
assign is_default_message_hidden = ' is-hidden'
else
assign class_message = ' is-hidden'
endif
elsif subtotal_without_currency == 0
assign class_message = ' is-hidden'
endif
assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit
assign percent = 100 | minus: percent
-%}
<p class="{% unless template.name == 'cart' or section.id == 'announcement-bar' %}cart-drawer__message {% endunless %}cart__message{{ class_message }}" data-cart-message="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}" data-limit="{{ limit }}">
<span class="cart__message__default{{ is_default_message_hidden }}" data-message-default>{{ free_shipping_message }}</span>
{%- if qualified_shipping_message != blank -%}
<span class="cart__message__success">{{ qualified_shipping_message }}</span>
{%- endif -%}
{%- unless is_top -%}
<progress class="cart__message__progress" data-cart-message-progress value="{{ percent }}" max="100"></progress>
{%- endunless -%}
</p>
{%- endif -%}
<div class="cart__errors cart__errors-dropdown" data-cart-errors>
<p class="cart__errors__heading">{{- 'cart.general.limit_error' | t -}}</p>
<p class="cart__errors__content" data-error-message></p>
<button type="button" class="cart__errors__close" data-cart-error-close aria-label="{{ 'general.accessibility.dismiss' | t }} {{ 'cart.general.title' | t }}">
{%- render 'icon-close-small' -%}
</button>
</div>
<div class="cart-drawer__items{% if cart_items_size == 0 %} hidden{% endif %}" data-items-holder>
{%- render 'cart-line-items' -%}
</div>
<div class="cart-drawer__empty-message{% if cart_items_size > 0 %} hidden{% endif %}" data-empty-message>
{{- 'cart.general.empty' | t -}}
<div class="cart-drawer__empty-message__buttons">
{%- if show_continue_shopping and show_empty_cart_buttons == false -%}
<a href="{{ continue_shopping_link }}" class="btn btn--secondary" data-continue-shopping>{{ 'cart.general.continue_shopping' | t }}</a>
{%- endif -%}
{%- if show_empty_cart_buttons and linklists[empty_cart_buttons].links.size > 0 -%}
{%- for link in linklists[empty_cart_buttons].links limit: 3 -%}
<a href="{{ link.url }}" class="btn btn--secondary btn--small">{{ link.title | strip_html | escape }}</a>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</div>
<div class="cart-drawer__foot cart__foot{% if cart_items_size == 0 %} hidden{% endif %}" data-foot-holder>
<div class="cart__pair hidden" data-cart-widget data-pair-products-holder>
<div data-pair-products></div>
</div>
<form action="{{ routes.cart_url }}" method="post" novalidate data-cart-form>
{%- if settings.enable_cart_notes or settings.enable_gift_notes -%}
<div class="cart__widget__wrapper">
{%- endif -%}
{%- if settings.enable_cart_notes -%}
<div class="cart__widget" data-cart-widget>
<button
class="cart__widget__title"
type="button"
data-collapsible-trigger
aria-expanded="false"
aria-controls="notes">
{{- 'cart.general.cart_notes_label' | t -}}
</button>
<div id="notes" aria-hidden="true" data-collapsible-container>
<div class="cart__widget__content" data-collapsible-content>
<label for="note">{{ 'cart.general.customer_note' | t }}</label>
<textarea id="note" name="note" class="cart__field cart__field--textarea" aria-label="{{ 'cart.general.customer_note' | t }}">{{- cart.note -}}</textarea>
</div>
</div>
</div>
{%- endif -%}
{%- if settings.enable_gift_notes -%}
<div class="cart__widget" data-cart-widget>
<button
class="cart__widget__title"
type="button"
data-collapsible-trigger
aria-expanded="false"
aria-controls="gift-notes">
{{- 'cart.general.gift_notes_label' | t -}}
</button>
<div id="gift-notes" aria-hidden="true" data-collapsible-container>
<div class="cart__widget__content" data-collapsible-content>
{%- assign gift_note_attribute = 'cart.general.gift_note_attribute' | t -%}
<label for="gift-note">{{ 'cart.general.note' | t }}</label>
<textarea id="gift-note" name="attributes[{{ gift_note_attribute }}]" class="cart__field cart__field--textarea" aria-label="{{ 'cart.general.note' | t }}">{{ cart.attributes[gift_note_attribute] }}</textarea>
</div>
</div>
</div>
{%- endif -%}
{%- if settings.enable_cart_notes or settings.enable_gift_notes -%}
</div>
{%- endif -%}
<div class="cart__foot-inner">
<div class="cart__total{% if original_subtotal < subtotal or cart_discount_size <= 0 %} hidden{% endif %}" data-cart-original-total>
<span>{{- 'cart.general.subtotal_items' | t -}}</span>
<span data-cart-original-total-price>
{%- if original_subtotal == 0 -%}
{{ 'products.product.free' | t }}
{%- else -%}
{{- original_subtotal | money -}}
{%- endif -%}
</span>
</div>
<div class="cart__discounts{% if cart_discount_size <= 0 %} hidden{% endif %}" data-cart-discounts-holder>
{%- if cart.cart_level_discount_applications.size > 0 -%}
{%- for discount in cart.cart_level_discount_applications -%}
<div class="cart__total" data-cart-discount>
<span data-cart-discount-title>
{{- discount.title -}}
</span>
<span data-cart-discount-price>
-{{- discount.total_allocated_amount | money -}}
</span>
</div>
{%- endfor -%}
{%- endif -%}
</div>
<div class="cart__buttons-wrapper">
{%- if settings.enable_accept_terms -%}
<input type="checkbox" class="cart__acceptance__input" name="acceptance" id="acceptance" data-cart-acceptance-checkbox>
<label for="acceptance" class="cart__acceptance__label" data-cart-acceptance-label>{{ settings.accept_terms_text }}</label>
{%- endif -%}
<p class="cart__errors__content" data-terms-error-message></p>
<div class="cart__buttons{% if settings.enable_accept_terms %} cart__buttons--disabled{% endif %}" data-cart-checkout-buttons>
<fieldset class="cart__buttons__fieldset" data-cart-checkout-button>
<button type="submit" name="checkout" class="cart__checkout btn">
{{- 'cart.general.checkout' | t -}}
<span class="cart__total__money" data-cart-total>
{%- if subtotal == 0 -%}
{{ 'products.product.free' | t }}
{%- else -%}
{{- subtotal | money -}}
{%- endif -%}
</span>
</button>
{%- if settings.enable_additional_buttons and additional_checkout_buttons -%}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical" data-additional-checkout-button>
{{- content_for_additional_checkout_buttons -}}
</div>
{%- endif -%}
</fieldset>
</div>
</div>
<p class="cart__text">{{- 'cart.general.shipping_at_checkout' | t -}}</p>
</div>
</form>
</div>
</template>
</div>
There also a liquid file called " cart-line-items ", it might be this one glitched.
Here you have :
{%- assign pair_products = '' -%}
{%- assign cart_products = '' -%}
{%- for line_item in cart.items -%}
<div class="cart__item{% if forloop.last %} cart__item--no-border{% endif %}" data-cart-item>
<div class="cart__item__image">
<a href="{{ line_item.url }}">
{%- liquid
assign image = line_item.image
assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign image_widths = "[90,160,180,270,320]"
-%}
<img
class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ image_url_pattern }}"
data-aspectratio="{{ image.aspect_ratio | default: 1 }}"
data-widths= "{{ image_widths }}"
data-sizes="auto"
alt="{{ line_item.title | strip_html | escape }}">
<noscript>
<img src="{{ image | img_url: '160x' }}" alt="{{ line_item.title | strip_html | escape }}">
</noscript>
</a>
</div>
<div class="cart__item__content">
<div class="cart__item__content-inner">
<div class="cart__item__info">
<p class="cart__item__title">
<a href="{{- line_item.url -}}">
{{- line_item.product.title | strip_html -}}
</a>
</p>
<div class="cart__item__meta">
{%- unless line_item.product.has_only_default_variant -%}
{%- for option in line_item.options_with_values -%}
<p class="cart__item__selected-options">
<span>{{- option.name -}}:</span>
<span>{{- option.value -}}</span>
</p>
{%- endfor -%}
{%- endunless -%}
{%- if line_item.selling_plan_allocation -%}
<p class="cart__item__selling-plan">
<span>{{ line_item.selling_plan_allocation.selling_plan.name }}</span>
</p>
{%- endif -%}
{%- assign property_size = line_item.properties | size -%}
{%- if property_size > 0 -%}
{%- for p in line_item.properties -%}
{%- assign property_first_char = p.first | slice: 0 -%}
{%- if p.last != blank and property_first_char != '_' -%}
<p class="cart__item__property">
<span>{{ p.first }}: </span>
<span>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</p>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
<p class="cart__item__price">
{%- assign discounted = false -%}
{%- assign sale = false -%}
{%- if line_item.original_price > line_item.final_price -%}
{%- assign discounted = true -%}
{%- endif -%}
{%- if line_item.variant.compare_at_price > line_item.price -%}
{%- assign sale = true -%}
{%- endif -%}
{%- if sale or discounted -%}
<ins>
{%- if line_item.final_price == 0 -%}
{{ 'products.product.free' | t }}
{%- else -%}
{{- line_item.final_price | money_with_currency -}}
{%- endif -%}
</ins>
{%- else -%}
{%- if line_item.final_price == 0 -%}
{{ 'products.product.free' | t }}
{%- else -%}
{{- line_item.final_price | money_with_currency -}}
{%- endif -%}
{%- endif -%}
{%- if sale and discounted == false -%}
<del>{{- line_item.variant.compare_at_price | money_with_currency -}}</del>
{%- endif -%}
{%- if discounted -%}
<del>{{- line_item.original_price | money_with_currency -}}</del>
{%- endif -%}
{%- if line_item.unit_price -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{- line_item.unit_price_measurement.reference_unit -}}
{%- endcapture -%}
<span class="line__price">
<small class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</small>
<small>{% if line_item.unit_price == 0 %}{{ 'products.product.free' | t }}{% else %}{{ line_item.unit_price | money_with_currency }}{% endif %} {{ unit_price_separator }} {{ unit_price_base_unit }}</small>
</span>
{%- endif -%}
</p>
</div>
<div class="cart__item__bottom">
<div class="cart__item__quantity" data-quantity-holder>
<button type="button" class="cart__item__quantity-minus" data-quantity-minus data-quantity-button title="
{{- 'general.accessibility.decrease' | t }} - {{ line_item.product.title | strip_html -}}">
<span class="visually-hidden">{{ 'general.accessibility.decrease' | t }}</span>
{%- render 'icon-toggle-minus' -%}
</button>
{%- assign quantity = line_item.quantity -%}
{%- if line_item.variant.inventory_policy == 'deny' and line_item.variant.inventory_management != nil and line_item.variant.inventory_quantity < quantity -%}
{%- assign quantity = line_item.variant.inventory_quantity -%}
{%- endif -%}
<input type="number" name="updates[]" id="updates_{{ line_item.key }}" class="cart__item__quantity-field" data-quantity-field
data-id="{{- line_item.key -}}" value="{{- quantity -}}"
title="{{- 'cart.label.quantity' | t }} - {{ line_item.product.title | strip_html -}}" pattern="[0-9]*">
<button type="button" class="cart__item__quantity-plus" data-quantity-plus data-quantity-button title="
{{- 'general.accessibility.increase' | t }} - {{ line_item.product.title | strip_html -}}">
<span class="visually-hidden">{{ 'general.accessibility.increase' | t }}</span>
{%- render 'icon-toggle-plus' -%}
</button>
</div>
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0" class="cart__item__remove" data-item-remove data-id="{{ line_item.key }}" title="{{ 'cart.general.remove' | t }}">
<span>{{ 'cart.general.remove' | t }}</span>
</a>
</div>
</div>
{%- if line_item.original_price > line_item.final_price -%}
{%- for discount in line_item.line_level_discount_allocations -%}
<p class="cart__discount">
{%- render 'icon-tags' -%}
{%- assign discount_price = discount.amount | money_with_currency -%}
<span>{{ 'cart.general.discount_label' | t: amount: discount_price, title: discount.discount_application.title }}</span>
</p>
{%- endfor -%}
{%- endif -%}
{%- assign cart_products = cart_products | append: line_item.product.id | append: ',' -%}
{%- assign upsell = line_item.product.metafields.theme.upsell -%}
{%- if upsell.value != nil and upsell.type == 'product_reference' -%}
{%- assign pair_products = pair_products | append: forloop.index0 | append: ',' -%}
{%- endif -%}
</div>
{%- endfor -%}
{%- if pair_products != '' -%}
{%- liquid
assign upsell_products = ''
assign pair_products = pair_products | split: ','
assign cart_products = cart_products | prepend: ','
for index in pair_products
assign arr_index = index | plus: 0
assign upsell_product = cart.items[arr_index].product.metafields.theme.upsell.value
for variant in upsell_product.variants
if variant.available
assign upsell_product_variant = variant.id
break
endif
endfor
if cart_products contains upsell_product.id or upsell_product.available == false
continue
endif
unless upsell_products contains upsell_product.handle
assign upsell_products = upsell_products | append: upsell_product.handle | append: '_' | append: upsell_product_variant | append: ','
endunless
endfor
-%}
<script data-pair-products-script>
window.pairWithProducts = {{ upsell_products | strip_newlines | split: ',' | json }};
</script>
{%- endif -%}
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025