← Web Components

Web Components · Cart & Checkout

<commmerce-cart-slider>

The cart drawer that slides in from the right edge. Listens for commmerce:open-cart-slider (dispatched by <mmm-header-cart>) and for commmerce:cart-updated (auto-opens on add-to-cart). Same theming attributes as <mmm-cart>.

Overview

Note the prefix. The tag is <commmerce-cart-slider>, not <mmm-cart-slider> — it predates the mmm- naming convention. The SDK loader auto-injects one instance into <body> if your page does not already contain one, so most themes do not need to add the tag explicitly.

Drawer width is fixed at 26.25rem (mobile: 100vw). Imperative open() / close() / isOpen() methods let you control it from JS.

When to use

  • Default to one per page — auto-injected by the SDK loader.
  • Manually drop the tag once if you need to customise the styling.
  • Pair with <mmm-header-cart open-cart-slider="true"> so the cart icon opens the slider.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<!-- Optional — auto-injected if missing -->
<commmerce-cart-slider></commmerce-cart-slider>

Attributes

Same inline theming surface as <mmm-cart> — heading, items, checkout button, and footer total.

AttributeTypeDefaultDescription
theme-modestring—Force the drawer's colour scheme. dark applies the dark palette; auto follows prefers-color-scheme. Omit for the default light palette.
heading-font-familystringtheme heading font"Your cart" heading font family.
heading-font-weightstringtheme heading weightHeading font weight.
heading-colorstringtheme primary textHeading colour.
item-name-font-familystringtheme description fontProduct-name font family.
item-name-font-weightstringtheme description weightProduct-name weight.
item-name-font-sizestringtheme description sizeProduct-name size.
item-name-colorstringtheme primary textProduct-name colour.
item-price-font-familystringtheme sellingPrice fontCurrent-price font family.
item-price-font-weightstringtheme sellingPrice weightCurrent-price weight.
item-price-font-sizestringtheme sellingPrice sizeCurrent-price size.
item-price-colorstringtheme primary textCurrent-price colour.
item-original-price-font-familystringtheme originalPrice fontCompare-at font family.
item-original-price-font-sizestringtheme originalPrice sizeCompare-at size.
item-original-price-colorstringtheme secondary textCompare-at colour.
quantity-border-colorstringtheme borderQuantity-stepper border.
quantity-border-radiusstringtheme border radiusQuantity-stepper border-radius.
checkout-btn-backgroundstringtheme button fillCheckout CTA background.
checkout-btn-colorstringtheme add-to-cart textCTA text colour.
checkout-btn-border-colorstringtheme button strokeCTA border colour.
checkout-btn-font-familystringtheme button fontCTA font family.
checkout-btn-font-weightstringtheme button weightCTA font weight.
checkout-btn-font-sizestringtheme button sizeCTA font size.
checkout-btn-letter-spacingstringtheme button letter-spacingCTA letter-spacing.
checkout-btn-text-transformstringtheme button transformCTA text-transform.
checkout-btn-hover-backgroundstringtheme button hover fillCTA hover background.
checkout-btn-hover-colorstringtheme add-to-cart hover textCTA hover text colour.
checkout-btn-hover-border-colorstringtheme button hover strokeCTA hover border colour.
footer-total-font-familystringtheme sellingPrice fontOrder-total font family.
footer-total-font-weightstringtheme sellingPrice weightOrder-total weight.
footer-total-colorstringtheme primary textOrder-total colour.

Public methods

MethodReturnsDescriptionNotes
open()void—Slide the drawer open.
close()void—Slide the drawer closed.
isOpen()boolean—True while the drawer is open.

Events

Listens on window: commmerce:cart-updated (auto-opens on add-to-cart), commmerce:open-cart-slider (programmatic open). Inherits the cart-manager event suite.

Live preview

store sample-store tag <commmerce-cart-slider>

Preview frame loads the SDK which auto-injects the slider into <body> — but it starts closed. Use window.dispatchEvent(new Event('commmerce:open-cart-slider')) from the iframe's devtools to open it.

Examples

1. Default — auto-injected

<!-- The SDK loader auto-injects one if none is present. -->
<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

2. Themed instance

<commmerce-cart-slider
  heading-color="#0e1011"
  item-name-font-weight="500"
  checkout-btn-background="#c8a8ff"
  checkout-btn-color="#0e1011"
  checkout-btn-hover-background="#b990ff">
</commmerce-cart-slider>

3. Open / close from your own button

const slider = document.querySelector('commmerce-cart-slider');
document.querySelector('#open-cart').addEventListener('click', () => slider.open());
document.querySelector('#close-cart').addEventListener('click', () => slider.close());

4. Open via the broadcast event

window.dispatchEvent(new CustomEvent('commmerce:open-cart-slider'));