Mini-Cart Block: Hide badge count when empty

[shaunandrews]

When the cart is empty, the Mini-Cart block continues to show a badge with a count of '0'. It's pretty strange to see, and obscures the shape of the cart icon, making it hard to recognize.

Can we hide the badge when the cart is empty?

[Aljullu]

@shaunandrews I will need your help with the icons. These are the ones I'm working with:

Even though they are very similar, one is slightly smaller, causing a visual jump when switching from one to the other:

Enregistrament.de.pantalla.des.de.2023-04-27.12-52-08.webm

Do you think it would be possible to provide those two icons with the same sizing but one with the "badge space" removed?

[shaunandrews]

I think it would be better to use one icon, and then make the badge an HTML element with a background and border. This element would then be positioned above the icon to create the overlapping effect.

[Aljullu]

@shaunandrews one question regarding that. My understanding is that the plan is to switch to the new badge style:

Should we do the change in the Checkout block sidebar as well? Currently both badges share the same styling:

[shaunandrews]

Its probably fine to match, though I imagine we'll want to change the checkout block sidebar — that badge count isn't very obvious in that context, and really breaks the visual balance.

[Aljullu]

Its probably fine to match, though I imagine we'll want to change the checkout block sidebar — that badge count isn't very obvious in that context, and really breaks the visual balance.

Ok, thanks! I will leave it as-is for now until the Checkout sidebar is worked on specifically. Regarding the Mini Cart badge, PR is ready: #9259. 🙂