Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 04cf1b3

Browse files
authored
Only show the Mini Cart count badge when there are items in the cart (#9259)
* Only show the Mini Cart count badge when there are items in the cart * Update badge to new design * Add tests * Make sure colors don't break existing themes * Update Mini Cart e2e test
1 parent bc01e0d commit 04cf1b3

File tree

7 files changed

+91
-26
lines changed

7 files changed

+91
-26
lines changed

assets/js/blocks/mini-cart/frontend.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,20 @@ interface dependencyData {
1414
translations?: string;
1515
}
1616

17+
function getClosestColor(
18+
element: Element | null,
19+
colorType: 'color' | 'backgroundColor'
20+
): string | null {
21+
if ( ! element ) {
22+
return null;
23+
}
24+
const color = window.getComputedStyle( element )[ colorType ];
25+
if ( color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent' ) {
26+
return color;
27+
}
28+
return getClosestColor( element.parentElement, colorType );
29+
}
30+
1731
window.addEventListener( 'load', () => {
1832
const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
1933
let wasLoadScriptsCalled = false;
@@ -171,19 +185,34 @@ window.addEventListener( 'load', () => {
171185

172186
/**
173187
* Get the background color of the body then set it as the background color
174-
* of the Mini-Cart Contents block. We use :where here to make customized
175-
* background color alway have higher priority.
188+
* of the Mini-Cart Contents block.
176189
*
177190
* We only set the background color, instead of the whole background. As
178191
* we only provide the option to customize the background color.
179192
*/
180193
const style = document.createElement( 'style' );
181194
const backgroundColor = getComputedStyle( document.body ).backgroundColor;
182-
195+
// For simplicity, we only consider the background color of the first Mini-Cart button.
196+
const firstMiniCartButton = document.querySelector(
197+
'.wc-block-mini-cart__button'
198+
);
199+
const badgeTextColor = firstMiniCartButton
200+
? getClosestColor( firstMiniCartButton, 'backgroundColor' )
201+
: 'inherit';
202+
const badgeBackgroundColor = firstMiniCartButton
203+
? getClosestColor( firstMiniCartButton, 'color' )
204+
: 'inherit';
205+
206+
// We use :where here to reduce specificity so customized colors and theme
207+
// CSS take priority.
183208
style.appendChild(
184209
document.createTextNode(
185210
`:where(.wp-block-woocommerce-mini-cart-contents) {
186211
background-color: ${ backgroundColor };
212+
}
213+
:where(.wc-block-mini-cart__badge) {
214+
background-color: ${ badgeBackgroundColor };
215+
color: ${ badgeTextColor };
187216
}`
188217
)
189218
);

assets/js/blocks/mini-cart/quantity-badge/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ const QuantityBadge = ( { count }: Props ): JSX.Element => {
2222
size={ 20 }
2323
icon={ miniCart }
2424
/>
25-
<span className="wc-block-mini-cart__badge">{ count }</span>
25+
<span className="wc-block-mini-cart__badge">
26+
{ count > 0 ? count : '' }
27+
</span>
2628
</span>
2729
);
2830
};

assets/js/blocks/mini-cart/quantity-badge/style.scss

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
11
.wc-block-mini-cart__quantity-badge {
22
align-items: center;
33
display: flex;
4+
position: relative;
45
}
56

67
.wc-block-mini-cart__badge {
78
align-items: center;
8-
background: transparent;
9-
border: 0.15em solid;
109
border-radius: 1em;
1110
box-sizing: border-box;
12-
color: inherit;
1311
display: flex;
1412
font-size: 0.875em;
1513
font-weight: 600;
1614
height: math.div(em(20px), 0.875);
1715
justify-content: center;
18-
margin-left: math.div(em(-10px), 0.875);
16+
left: 100%;
17+
margin-left: -44%;
1918
min-width: math.div(em(20px), 0.875);
2019
padding: 0 em($gap-smallest);
20+
position: absolute;
2121
transform: translateY(-50%);
22+
transition: all 0.15s;
2223
white-space: nowrap;
2324
z-index: 1;
2425
}
2526

27+
:where(.wc-block-mini-cart__badge) {
28+
// These values will be overridden in JS.
29+
background-color: transparent;
30+
color: transparent;
31+
}
32+
33+
.wc-block-mini-cart__badge:empty {
34+
opacity: 0;
35+
}
36+
2637
.wc-block-mini-cart__icon {
2738
display: block;
2839
height: em(24px);

assets/js/blocks/mini-cart/test/block.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,24 @@ describe( 'Testing Mini-Cart', () => {
6565
fetchMock.resetMocks();
6666
} );
6767

68+
it( 'shows Mini-Cart count badge when there are items in the cart', async () => {
69+
render( <MiniCartBlock /> );
70+
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
71+
72+
await waitFor( () =>
73+
expect( screen.getByText( '3' ) ).toBeInTheDocument()
74+
);
75+
} );
76+
77+
it( "doesn't show Mini-Cart count badge when cart is empty", async () => {
78+
mockEmptyCart();
79+
render( <MiniCartBlock /> );
80+
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
81+
const badgeWith0Count = screen.queryByText( '0' );
82+
83+
expect( badgeWith0Count ).toBeNull();
84+
} );
85+
6886
it( 'opens Mini-Cart drawer when clicking on button', async () => {
6987
render( <MiniCartBlock /> );
7088
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );

assets/js/icons/library/mini-cart.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,25 @@ import { SVG } from '@wordpress/primitives';
66
const miniCart = (
77
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
88
<path
9-
fillRule="evenodd"
10-
clipRule="evenodd"
11-
d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z"
12-
fill="currentColor"
9+
d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z"
10+
stroke="currentColor"
11+
strokeWidth="2"
12+
strokeLinecap="round"
13+
strokeLinejoin="round"
1314
/>
1415
<path
15-
fillRule="evenodd"
16-
clipRule="evenodd"
17-
d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z"
18-
fill="currentColor"
16+
d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z"
17+
stroke="currentColor"
18+
strokeWidth="2"
19+
strokeLinecap="round"
20+
strokeLinejoin="round"
1921
/>
2022
<path
21-
fillRule="evenodd"
22-
clipRule="evenodd"
23-
d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z"
24-
fill="currentColor"
23+
d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992"
24+
stroke="currentColor"
25+
strokeWidth="2"
26+
strokeLinecap="round"
27+
strokeLinejoin="round"
2528
/>
2629
</SVG>
2730
);

src/BlockTypes/MiniCart.php

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -447,12 +447,14 @@ protected function get_markup( $attributes ) {
447447
$cart_contents_count,
448448
wp_strip_all_tags( wc_price( $cart_contents_total ) )
449449
);
450-
$icon = '<svg class="wc-block-mini-cart__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
451-
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84614 18.2769C7.89712 18.2769 7.93845 18.2356 7.93845 18.1846C7.93845 18.1336 7.89712 18.0923 7.84614 18.0923C7.79516 18.0923 7.75384 18.1336 7.75384 18.1846C7.75384 18.2356 7.79516 18.2769 7.84614 18.2769ZM6.03076 18.1846C6.03076 17.182 6.84353 16.3692 7.84614 16.3692C8.84875 16.3692 9.66152 17.182 9.66152 18.1846C9.66152 19.1872 8.84875 20 7.84614 20C6.84353 20 6.03076 19.1872 6.03076 18.1846Z" fill="currentColor"/>
452-
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z" fill="currentColor"/>
453-
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z" fill="currentColor"/>
450+
$icon = '<svg class="wc-block-mini-cart__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
451+
<path d="M7.50008 18.3332C7.96032 18.3332 8.33341 17.9601 8.33341 17.4998C8.33341 17.0396 7.96032 16.6665 7.50008 16.6665C7.03984 16.6665 6.66675 17.0396 6.66675 17.4998C6.66675 17.9601 7.03984 18.3332 7.50008 18.3332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
452+
<path d="M16.6666 18.3332C17.1268 18.3332 17.4999 17.9601 17.4999 17.4998C17.4999 17.0396 17.1268 16.6665 16.6666 16.6665C16.2063 16.6665 15.8333 17.0396 15.8333 17.4998C15.8333 17.9601 16.2063 18.3332 16.6666 18.3332Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
453+
<path d="M0.833252 0.833496H4.16658L6.39992 11.9918C6.47612 12.3755 6.68484 12.7201 6.98954 12.9654C7.29424 13.2107 7.6755 13.341 8.06658 13.3335H16.1666C16.5577 13.341 16.9389 13.2107 17.2436 12.9654C17.5483 12.7201 17.757 12.3755 17.8333 11.9918L19.1666 5.00016H4.99992" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
454454
</svg>';
455-
$button_html = $this->get_cart_price_markup( $attributes ) . '
455+
456+
$cart_contents_count = $cart_contents_count > 0 ? $cart_contents_count : '';
457+
$button_html = $this->get_cart_price_markup( $attributes ) . '
456458
<span class="wc-block-mini-cart__quantity-badge">
457459
' . $icon . '
458460
<span class="wc-block-mini-cart__badge">' . $cart_contents_count . '</span>

tests/e2e/specs/shopper/mini-cart.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ describe( 'Shopper → Mini-Cart', () => {
109109
}
110110
);
111111
await expect( page ).toMatchElement( '.wc-block-mini-cart__badge', {
112-
text: '0',
112+
text: '',
113113
} );
114114
} );
115115
} );

0 commit comments

Comments
 (0)