Cart preview

The cart preview consists of a cart icon that appears in your theme header and a preview dialog that appears when a product is added to the cart. AppDirect provides a cart preview component that you can use in your theme.

Usage

In the header-footer folders, open the logged-in.html template. You can add the cart icon and preview dialog with the following tag:

{{CART-DROPDOWN-COMPONENT}}

The cart icon appears after you add the tag.

Style cart preview components

To preview the cart in the toolkit, you need a logged-in header. See Create the header and footer.

Hover over the cart to see the default state of the cart. You can style the cart preview through CSS. You cannot change the HTML structure of the cart; however, you can create a custom cart component.

The styles for the cart preview are in the /header-footer/css/header-components/cart.scss file.

To test elements in your cart, click any Add To Cart button or trigger the following function on the window object:

window.AD_addToCart("123123")

The AD_addToCart function uses mocks, so you can use any random IDs when you call the function.