MergedCartBanner container

The MergedCartBanner container is designed 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 className prop to the container.

MergedCartBanner configurations

The MergedCartBanner container provides the following configuration options:

Option	Type	Req?	Description
className	string	No	The CSS class name(s) to apply to the component.

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);