MergedCartBanner container

Use the MergedCartBanner container to display a notification banner when items from an old cart are merged into the current cart.

When a customer signs in, if they had items in a previous cart, a banner will notify them that the items from their previous cart have been merged with the current cart. You can apply styles to the banner by passing a CSS className prop to the container.

MergedCartBanner configurations

The MergedCartBanner container provides the following configuration options:

These configuration options are implementing the MergedCartBannerProps interface:

MergedCartBannerProps interface

The MergedCartBanner container receives an object as a parameter which implements the MergedCartBannerProps interface with the following properties:

export interface MergedCartBannerProps extends AlertBannerProps {
  active?: boolean;
}

• Set the active property to true to have the container in reactive mode (it is visible and responds to system events). If it is set to false, the container is deactivated (it does not subscribe to system events and is not rendered).

Example

The following example renders the MergedCartBanner container with a custom class name:

import MergedCartBanner from '@dropins/storefront-checkout/containers/MergedCartBanner.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $mergedCartBanner = checkoutFragment.querySelector(
  '.checkout__merged-cart-banner'
);

CheckoutProvider.render(MergedCartBanner, {
  className: 'checkout__merged-cart-banner--custom',
})($mergedCartBanner);