Hide cart quantity when it equals 0

At a glance

The community members are discussing how to hide the quantity badge on the cart when it is 0. The initial solution of using a custom attribute and CSS did not work well because the attribute was only updated on page load. Other suggestions include using Liquid to conditionally show/hide the badge, using a mutation observer to monitor changes, and using AlpineJS to handle the cart quantity and show/hide the badge accordingly. The community members provide step-by-step guidance on how to use AlpineJS, including referencing the AlpineJS documentation and Chrome extension. The final solution involves adding the x-show="items > 0" attribute directly on the badge element, which automatically updates when items are added or removed from the cart.

Useful resources

rriziki

What would be a good way to hide the quantity badge on the cart when it = 0? I tried creating a custom attribute that contains the number of items in the cart data-products="{{ cart.item_count }}" and then adding CSS for [data-products="0"]{display: none;} and it kinda works, but the attribute is only updated on page load, so it's not a great solution.

Attachment

12 comments

CClyde

This is how you can do it in Liquid:

Plain Text

{% if cart.item_count > 0 %}
  <!-- Your HTML element to show when cart has items -->
{% endif %}

Maybe you can do that in Liquify as well? There are elements that are hidden based on conditions (ex. "Not in stock" button)

rriziki

Thank you! But the issue is that this only works after the page has been reloaded. So at the moment it looks like the item isn't added to the cart, because the badge doesn't appear when going from 0 to 1 🤔

CClyde

for things that constantly update (like the cart number), I use a mutation observer to monitor these changes and then update it accordingly.

so you can observe a value (or anything on the page) and when it changes, you can update it. In your case, maybe just set the opacity to 0 to 100% depending on the value to make it invisible while still being available in the DOM.

rriziki

I did try a mutation observer for content changes on the badge that has the "0" text. At first it didn't work, but I think I'll revisit that, as it seems like that would be the most dynamic solution. Thanks for the suggestions!

JJan

Hey @riziki, you can do that easily because of our AlpineJS integration, we store the quantity there. Just put the following attribute on the div you want to show/hide: x-show="items > 0"

It will automatically update everytime you add/remove an item :)

CClyde

x-show="items > 0"

is this a native liquid option? Or something specific to liquify? Where can i learn more?

JJan

Hey @Clyde,
this is not native liquid, it's AlpineJS. We use Alpine to handle the mini cart and add-to-cart features.

So at first I would recommend you to have a look at the AlpineJS documentation to familiarize with all the methods such as x-show, x-bind, etc.: https://alpinejs.dev/start-here

And then you should add the AlpineJS chrome extension: https://chromewebstore.google.com/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk

If you now open a product page and add an item to the cart, you can see all the properties of the product and the mini cart in the extension. And there you can search for the items property, for example. But you can also access any other property that you can see there.

Attachment

CClyde

oh wow ... learning something new today ... thanks Jan!

JJan

You're welcome. If you have any further questions, don't hesitate to ask. I know it can become kind of complex with all the different methods :)

jjonas.halbstark

@riziki did that work for you?

rriziki

Thanks @Jan that was super helpful!
@jonas.halbstark at first I got an error Alpine Expression Error: items is not defined because I had added the attribute to a parent element of the badge, but adding the x-show="items > 0" directly on the badge (which also automatically gets the x-data="{ items: 0 }" attribute worked for me.

jjonas.halbstark

okay yes thats correct 🙂 nice

Add a reply

Welcome to the Liquify Community

Hide cart quantity when it equals 0