### Configure Minicart Block in Header Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md This example demonstrates how to add the `minicart.v2` block to your theme's header layout, typically within a header row. Ensure your theme structure supports this placement. ```json "header.full": { "blocks": ["header-layout.desktop", "header-layout.mobile"] }, "header-layout.desktop": { "children": [ "header-row#1-desktop" ] }, "header-row#1-desktop": { "children": ["minicart.v2"] } ``` -------------------------------- ### Minicart v2 Component Props Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md This documentation outlines the configurable properties for the Minicart v2 component. It details each prop's name, type, description, and default value, allowing customization of its behavior and appearance. ```APIDOC Minicart v2 Component Props: variation: Type: enum Description: Controls the Minicart's display behavior. Possible values: `popup` (modal on homepage), `drawer` (sidebar), `link` (redirects to checkout), `popupWithLink` (combines link and popup), `block` (fixed element). Default value: `drawer` drawerSlideDirection: Type: enum Description: Specifies the slide direction when the `drawer` variation is used. Possible values: `rightToLeft` or `leftToRight`. Default value: `rightToLeft` linkVariationUrl: Type: string Description: The URL to redirect to when the `link` variation is active. Default value: `undefined` maxDrawerWidth: Type: number Description: Sets the maximum width in pixels for the Minicart when it opens in `drawer` mode. Default value: `440` ``` -------------------------------- ### Minicart CSS Handles for Customization Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md Lists the CSS handles available for customizing the appearance of the VTEX Minicart v2. These handles allow targeted styling of various Minicart components. ```APIDOC Minicart CSS Handles: - arrowUp - minicartCheckoutButton - minicartContainer - minicartContentContainer - minicartFooter - minicartIconContainer - minicartProductListContainer - minicartQuantityBadge - minicartSideBarContentWrapper - minicartTitle - minicartWrapperContainer - popupChildrenContainer - popupContentContainer - popupWrapper ``` -------------------------------- ### Default Minicart v2 JSON Configuration Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md Provides the default JSON structure for the minicart.v2 block in VTEX, detailing its components and props for layout and functionality. This configuration serves as a base for customization. ```json { "minicart.v2": { "props": { "MinicartIcon": "icon-cart#minicart-icon" }, "children": ["minicart-base-content"] }, "icon-cart#minicart-icon": { "props": { "size": 24 } }, "minicart-base-content": { "blocks": ["minicart-empty-state"], "children": ["minicart-product-list", "flex-layout.row#minicart-footer"] }, "flex-layout.row#minicart-footer": { "props": { "blockClass": "minicart-footer" }, "children": ["flex-layout.col#minicart-footer"] }, "flex-layout.col#minicart-footer": { "children": ["minicart-summary", "minicart-checkout-button"] }, "minicart-product-list": { "blocks": ["product-list#minicart"] }, "product-list#minicart": { "blocks": ["product-list-content-mobile"] }, "minicart-summary": { "blocks": ["checkout-summary.compact#minicart"] }, "minicart-checkout-button": { "props": { "finishShoppingButtonLink": "/checkout/#/orderform" } }, "checkout-summary.compact#minicart": { "children": ["summary-totalizers#minicart"], "props": { "totalizersToShow": ["Items", "Discounts"] } }, "summary-totalizers#minicart": { "props": { "showTotal": true, "showDeliveryTotal": false } }, "minicart-empty-state": { "children": ["flex-layout.row#empty-state"] }, "flex-layout.row#empty-state": { "children": ["flex-layout.col#empty-state"] }, "flex-layout.col#empty-state": { "children": [ "icon-cart#minicart-empty-state", "rich-text#minicart-default-empty-state" ], "props": { "horizontalAlign": "center", "verticalAlign": "middle", "rowGap": 5 } }, "icon-cart#minicart-empty-state": { "props": { "size": 64, "blockClass": "minicart-empty-state" } }, "rich-text#minicart-default-empty-state": { "props": { "text": "Your cart is empty." } } } ``` -------------------------------- ### Minicart Component Props Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md Configuration options for the VTEX Minicart component, controlling its behavior, display, and integration with other features. ```APIDOC Minicart Component Props: - openOnHover: boolean - Description: Indicates whether the popup Minicart should open when the user hovers over it. - Default: false - quantityDisplay: enum - Description: Shows the quantity badge even when the amount of products in the cart is zero. Possible values are: `always`, `not-empty`, or `never`. - Default: not-empty - itemCountMode: enum - Description: Quantity badge behavior when displaying the total items added to Minicart. Possible values are: `total` (quantity badge displays the number of items added to the cart), `distinct` (only displays the number of different products added to the cart), `totalAvailable` (displays the number of available items added to the cart), and `distinctAvailable` (displays the number of different _and_ available products added to the cart). - Default: distinct - backdropMode: enum - Description: Controls whether the backdrop should be displayed when the drawer Minicart is opened or not. Possible values are: `visible` (renders the backdrop) or `none` (renders the drawer without backdrop). - Default: none - MinicartIcon: block - Description: Icon displayed on the Minicart button. This prop value must match the block name responsible for rendering the desired icon. - Default: icon-cart (from the VTEX Store Icons app) - customPixelEventId: string - Description: Store event ID responsible for triggering the `minicart.v2` to automatically open on the interface. - Default: undefined - customPixelEventName: string - Description: Store event name responsible for triggering the `minicart.v2` to automatically open on the interface. Examples: `'addToCart'` and `'removeFromCart'`. Note that using this prop will make the `minicart.v2` open in **every** event with the specified name if no `customPixelEventId` is specified. - Default: undefined - classes: CustomCSSClasses - Description: Used to override default CSS handles. Useful when importing this block as a React component. Refer to VTEX CSS Handles documentation for details. - Default: undefined ``` -------------------------------- ### Add Minicart Dependency to manifest.json Source: https://github.com/vtex-apps/minicart/blob/master/docs/README.md This snippet shows how to declare the vtex.minicart app as a dependency in your theme's manifest.json file. This is a prerequisite for using the Minicart component. ```json { "dependencies": { "vtex.minicart": "2.x" } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.