Only show the Mini Cart count badge when there are items in the cart

[Aljullu]

This PR makes it so the Mini Cart count badge is only rendered when there is at least one item in the cart. It also updates the badge styles to the new designs.

Fixes #9185.

Testing

User Facing Testing

1. Add the Mini Cart block to the header of your store.
2. In the frontend, with an empty cart, verify the count badge is not visible. Verify you can open and close the Mini Cart drawer and the badge is still not visible.
3. Now, add some products to your cart and verify the badge becomes visible. Try reloading the page and verify the count badge is still there.

Enregistrament.de.pantalla.des.de.2023-05-09.09-25-59.webm

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

New Mini Cart count badge which is only visible if there is at least one item in the cart

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9259.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 452
• Total errors: 2243

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: -770 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
build/mini-cart-component-frontend.js	29 kB	-459 B (-2%)
build/mini-cart-frontend.js	2.16 kB	+110 B (+5%)	🔍
build/mini-cart.js	4.2 kB	-457 B (-10%)	👏
build/wc-blocks-style-rtl.css	27.7 kB	+17 B (0%)
build/wc-blocks-style.css	27.7 kB	+19 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js	2.31 kB
build/active-filters-wrapper-frontend.js	4.68 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	12.1 kB
build/all-products.js	39 kB
build/all-reviews.js	7.77 kB
build/attribute-filter-frontend.js	23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	5.53 kB
build/attribute-filter-wrapper-frontend.js	4.64 kB
build/attribute-filter.js	13.3 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products-frontend.js	5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.16 kB
build/cart-blocks/cart-express-payment-frontend.js	717 B
build/cart-blocks/cart-items-frontend.js	302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.39 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.27 kB
build/cart-blocks/cart-totals-frontend.js	307 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/filled-cart-frontend.js	654 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	332 B
build/cart-blocks/order-summary-shipping-frontend.js	17 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/cart-frontend.js	29.6 kB
build/cart.js	44.7 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.73 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/contact-information-frontend.js	2.04 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	275 B
build/checkout-blocks/order-summary-frontend.js	1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js	17.1 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8.28 kB
build/checkout-blocks/pickup-options-frontend.js	4.81 kB
build/checkout-blocks/shipping-address-frontend.js	1.16 kB
build/checkout-blocks/shipping-method-frontend.js	2.6 kB
build/checkout-blocks/shipping-methods-frontend.js	6.35 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	310 B
build/checkout-frontend.js	31.3 kB
build/checkout.js	46.3 kB
build/customer-account.js	3.18 kB
build/featured-category.js	14.4 kB
build/featured-product.js	14.7 kB
build/filter-wrapper-frontend.js	14.2 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	8 kB
build/legacy-template.js	6.33 kB
build/mini-cart-contents-block/cart-button-frontend.js	864 B
build/mini-cart-contents-block/checkout-button-frontend.js	866 B
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	3.23 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	589 B
build/mini-cart-contents-block/shopping-button-frontend.js	760 B
build/mini-cart-contents-block/title-frontend.js	1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	729 B
build/mini-cart-contents-block/title-label-frontend.js	661 B
build/mini-cart-contents.js	17.9 kB
build/price-filter-frontend.js	14.5 kB
build/price-filter-wrapper-frontend.js	5.78 kB
build/price-filter.js	8.47 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	251 B
build/product-add-to-cart--product-rating.js	151 B
build/product-add-to-cart-frontend.js	6.5 kB
build/product-add-to-cart.js	8.88 kB
build/product-best-sellers.js	8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js	262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	463 B
build/product-button-frontend.js	1.92 kB
build/product-button.js	4.18 kB
build/product-categories.js	2.36 kB
build/product-category.js	9.35 kB
build/product-image-frontend.js	1.84 kB
build/product-image.js	4.31 kB
build/product-new.js	8.34 kB
build/product-on-sale.js	8.67 kB
build/product-price-frontend.js	2.17 kB
build/product-price.js	1.74 kB
build/product-query.js	11.6 kB
build/product-rating-frontend.js	1.45 kB
build/product-rating.js	1.04 kB
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	974 B
build/product-sale-badge.js	801 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1 kB
build/product-sku.js	579 B
build/product-stock-indicator-frontend.js	1.19 kB
build/product-stock-indicator.js	771 B
build/product-summary-frontend.js	1.29 kB
build/product-summary.js	922 B
build/product-tag.js	8.97 kB
build/product-title-frontend.js	1.37 kB
build/product-title.js	3.75 kB
build/product-top-rated.js	8.58 kB
build/products-by-attribute.js	9.7 kB
build/rating-filter-frontend.js	21.5 kB
build/rating-filter-wrapper-frontend.js	3.04 kB
build/rating-filter.js	7.02 kB
build/reviews-by-category.js	12.1 kB
build/reviews-by-product.js	13.2 kB
build/reviews-frontend.js	7.1 kB
build/single-product.js	11.1 kB
build/stock-filter-frontend.js	21.8 kB
build/stock-filter-wrapper-frontend.js	3.31 kB
build/stock-filter.js	7.73 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.2 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.4 kB
build/vendors--product-add-to-cart-frontend.js	7.25 kB
build/wc-blocks-data.js	22.5 kB
build/wc-blocks-editor-style-rtl.css	5.95 kB
build/wc-blocks-editor-style.css	5.95 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	65.2 kB
build/wc-blocks.js	2.62 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	30.3 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[github-actions]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[nefeline]

Nice work!

✅ Confirmed the mini cart count badge is now displayed only when there are items in the cart.