diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap index 0940c87e58..f526dea146 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap @@ -156,6 +156,14 @@ exports[`Should disable delete icon while loading 1`] = ` + + There is only one item left in your cart + `; @@ -315,6 +323,14 @@ exports[`Should render correctly 1`] = ` + + There is only one item left in your cart + `; @@ -474,6 +490,14 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] = + + There is only one item left in your cart + `; @@ -633,5 +657,13 @@ exports[`Should render correctly with out of stock product 1`] = ` + + There is only one item left in your cart + `; diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js index 0314c51266..8dc201f572 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js @@ -27,7 +27,8 @@ const Item = props => { prices, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity } = props; const { formatMessage } = useIntl(); @@ -62,6 +63,11 @@ const Item = props => { }); const buttonStatus = isDeleting ? minicartButtonDeleted : miniCartButton; + const announceCartCount = + totalQuantity > 1 + ? 'There are ' + totalQuantity + ' items left in your cart' + : 'There is only one item left in your cart'; + return (
{ }} /> + + {announceCartCount} +
); }; diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css index 347913ea79..05bd2244e6 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css @@ -64,3 +64,9 @@ grid-column: 3 / span 1; grid-row: 1 / span 1; } + +.hide { + visibility: hidden; + max-width: 1px; + max-height: 1px; +} diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js index 869afecdd7..54d5b8a5c8 100644 --- a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js +++ b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js @@ -13,7 +13,8 @@ const ProductList = props => { classes: propClasses, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity } = props; const classes = useStyle(defaultClasses, propClasses); @@ -27,6 +28,7 @@ const ProductList = props => { handleRemoveItem={handleRemoveItem} configurableThumbnailSource={configurableThumbnailSource} storeUrlSuffix={storeUrlSuffix} + totalQuantity={totalQuantity} /> )); } @@ -35,7 +37,8 @@ const ProductList = props => { handleRemoveItem, closeMiniCart, configurableThumbnailSource, - storeUrlSuffix + storeUrlSuffix, + totalQuantity ]); return ( diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js index b7a82ea632..8470cdc699 100644 --- a/packages/venia-ui/lib/components/MiniCart/miniCart.js +++ b/packages/venia-ui/lib/components/MiniCart/miniCart.js @@ -64,6 +64,8 @@ const MiniCart = React.forwardRef((props, ref) => { const [, { addToast }] = useToasts(); + const announceMiniCartCount = 'There are no items in your cart.'; + useEffect(() => { if (errorMessage) { addToast({ @@ -116,6 +118,14 @@ const MiniCart = React.forwardRef((props, ref) => { id={'miniCart.emptyMessage'} defaultMessage={'There are no items in your cart.'} /> + ) : ( @@ -129,6 +139,7 @@ const MiniCart = React.forwardRef((props, ref) => { closeMiniCart={closeMiniCart} configurableThumbnailSource={configurableThumbnailSource} storeUrlSuffix={storeUrlSuffix} + totalQuantity={totalQuantity} />