Component Active
G017 Mini Cart Menu
A global header menu providing a brief overview of items in the user’s cart and a quick way to navigate to the Cart page and enter the Checkout flow. This is available on sites that have commerce enabled.
Component Detail
The Mini Cart Menu appears in the main navigation to the right of the Search toggle (on desktop). This component provides a high-level snapshot of items placed in the user’s cart.
By default when the menu is collapsed, the user will see the number of items in their cart highlighted next to the menu toggle icon. When expanded, the menu displays the first few cart items including product title(s) and sub-component product listings if applicable, product quantity, price and cart subtotal.
Interactions
Primary cart menu CTA drives authenticated users to the full Cart detail page. Unauthenticated users are first directed to the MyEmerson Sign In page before proceeding to the Cart detail. Products listed are also linked to the associated PDP pages. To collapse the active menu, the user can click the menu toggle icon again or click either the “X” in the top right of the menu or any area away from the Mini Cart dropdown and the menu will close.
**Note: If the cart is empty and the user is not authenticated, then the Mini Cart Menu also displays MyEmerson Account “Sign In” and “Register” CTA buttons in addition to the “Go To Cart” primary CTA.
Specifications
Icon Specs
Asset Size: 48px x 48px
Aspect Ratio: 1:1
Recommended File Weight: <5kb
Display Width: 24px
Display Height: 24px