Problem with Icon Cart Quantity of products

[mircomartin]

Hi ! first! it's the best library ajax for shopify! I gave a you star!

Ok, now i have an issue with the "data-ajax-cart-bind-state", i put a conditional if the quantity of my cart is 0 hidden, but does not work i have to refresh for this change. I let you a video and part of my code. https://share.vidyard.com/watch/iE5jG2Yxx1j8ygYM4CCFJA?

<button 
	type="button" 
	data-ajax-cart-toggle-class-button="js-my-cart-open"
	class="relative">
	<div class="absolute -top-3.5 -right-3">
		(<span class="{% if cart.item_count == 0 %}hidden{% endif %}" data-ajax-cart-bind-state="cart.item_count">
			{{ cart.item_count }}
		</span>)
	</div>
	{% render 'icon-shopping-bag' %}
</button>

[EvgeniyMukhamedjanov]

Hey, thanks for the star!
The issue happens because the data-ajax-cart-bind-state attribute doesn't run you liquid expression {% if cart.item_count == 0 %}hidden{% endif %} after the cart is changed. So solution here is using the js-ajax-cart-empty and js-ajax-cart-not-empty classes:

<button 
	type="button" 
	data-ajax-cart-toggle-class-button="js-my-cart-open"
	class="relative">
	<div class="absolute -top-3.5 -right-3">
		(<span class="my-cart-counter {% if cart.item_count == 0 %}my-cart-counter--originally-hidden{% endif %}" data-ajax-cart-bind-state="cart.item_count">
			{{ cart.item_count }}
		</span>)
	</div>
	{% render 'icon-shopping-bag' %}
</button>

.my-cart-counter--originally-hidden,
.js-ajax-cart-empty .my-cart-counter {
  display: none;
}
.js-ajax-cart-not-empty .my-cart-counter {
  display: block;
}

[mircomartin]

thanks works very well! i let you a question in this post #10

[EvgeniyMukhamedjanov]

@mircomartin
Didn't understand your question there, can you reformulate it? :-)

[mircomartin]

@EvgeniyMukhamedjanov I have left you a message in this post #10