cart.item_count not updating on the first add to cart

[abdullah-shah-5]

when the cart is empty and I add a product to the cart the quantity does not appear on the icon without reloading the page

after reloading it works fine.

This is my code :

     {% if cart.item_count > 0 %}           
                <span class="cart-quantity-bubble" data-ajax-cart-bind-state="cart.item_count"></span>
              {% endif %}

Thank you in advance.

[p6gb]

Do you have this issue in your local development environment? I experienced the same and I figured it is related to this issue, basically saying that "the section api not working on local". https://github.com/Shopify/dawn/issues/968

Can you try if it behaves differently when the site runs on the Shopify server, e.g. in Preview mode?

[EvgeniyMukhamedjanov]

@abdullah-shah-5 You have the condition {% if cart.item_count > 0 %} that causes your span to appear only if the cart is not empty. So if the cart is empty there is no span with the data-ajax-cart-bind-state="cart.item_count" attribute, means Liquid Ajax Cart can't find a place where to put the cart total quantity. So make sure that the span with the data-ajax-cart-bind-state="cart.item_count" attribute is always on a page.

[abdullah-shah-5]

Thank you so much. It worked.