Cart slots

Learn about the slots provided in the Cart drop-in component.

Extending drop-in components describes default properties available to all slots.

CartSummaryList slots

The slots for the CartSummaryList container allow you to customize the appearance of the cart summary list.

1
interface CartSummaryListProps
2

3
slots?: {
4
  Heading?: SlotProps;
5
  EmptyCart?: SlotProps;
6
  Footer?: SlotProps;
7
  Thumbnail?: SlotProps<{
8
    item: CartModel['items'][number];
9
    defaultImageProps: ImageProps;
10
  }>;
11
  ProductAttributes?: SlotProps;
12
  CartSummaryFooter?: SlotProps;
13
  CartItem?: SlotProps;
14
  UndoBanner?: SlotProps<{
15
    item: CartModel['items'][0];
16
    loading: boolean;
17
    error?: string;
18
    onUndo: () => void;
19
    onDismiss: () => void;
20
  }>;
21
  ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
22
  ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
23
  ItemQuantity?: SlotProps<{
24
    item: CartModel['items'][number];
25
    enableUpdateItemQuantity: boolean;
26
    handleItemQuantityUpdate: (
27
      item: CartModel['items'][number],
28
      quantity: number
29
    ) => void;
30
    itemsLoading: Set<string>;
31
    handleItemsError: (uid: string, message?: string) => void;
32
    handleItemsLoading: (uid: string, state: boolean) => void;
33
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
34
  }>;
35
  ItemTotal?: SlotProps<{ item: CartModel['items'][number] }>;
36
  ItemSku?: SlotProps<{ item: CartModel['items'][number] }>;
37
  ItemRemoveAction?: SlotProps<{
38
    item: CartModel['items'][number];
39
    enableRemoveItem: boolean;
40
    handleItemQuantityUpdate: (
41
      item: CartModel['items'][number],
42
      quantity: number
43
    ) => void;
44
    handleItemsError: (uid: string, message?: string) => void;
45
    handleItemsLoading: (uid: string, state: boolean) => void;
46
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
47
    itemsLoading: Set<string>;
48
  }>;
49
};

Heading slot

The Heading slot allows you to add content to the top of the CartSummaryList container.

1
 provider.render(CartSummaryList, {
2
  slots: {
3
    Heading: (ctx) => {
4
      // Runs on mount
5
      const heading = document.createElement('h2');
6
      heading.innerText = 'Cart List';
7
      ctx.appendChild(heading);
8
    },
9
  },
10
})($list),

EmptyCart slot

The EmptyCart slot allows you to add content to the CartSummaryList container when the cart is empty.

1
 provider.render(CartSummaryList, {
2
  slots: {
3
    EmptyCart: (ctx) => {
4
      // Runs on mount
5
      const emptyCart = document.createElement('div');
6
      emptyCart.innerText = 'Your cart is empty';
7
      ctx.appendChild(emptyCart);
8
    },
9
  },
10
})($list),

Thumbnail slot

Define a callback function in the Thumbnail slot of the CartSummaryList container to modify or replace the thumbnail section for each item in the cart.

The context object passed to the callback function includes an item property that contains the item data with the following type:

1
export interface Item {
2
  taxedPrice: {
3
    value: number;
4
    currency: string;
5
  };
6
  rowTotal: {
7
    value: number;
8
    currency: string;
9
  };
10
  rowTotalIncludingTax: {
11
    value: number;
12
    currency: string;
13
  };
14
  itemType: string;
15
  uid: string;
16
  url: {
17
    urlKey: string;
18
    categories: string[];
19
  };
20
  quantity: number;
21
  sku: string;
22
  name: string;
23
  image: {
24
    src: string;
25
    alt: string;
26
  };
27
  links?: {
28
    count: number;
29
    result: string;
30
  };
31
  price: {
32
    value: number;
33
    currency: string;
34
  };
35
  total: {
36
    value: number;
37
    currency: string;
38
  };
39
  discountedTotal?: {
40
    value: number;
41
    currency: string;
42
  };
43
  discount?: {
44
    value: number;
45
    currency: string;
46
  };
47
  regularPrice: {
48
    value: number;
49
    currency: string;
50
  };
51
  discounted: boolean;
52
  bundleOptions?: { [key: string]: any };
53
  selectedOptions?: { [key: string]: any };
54
  customizableOptions?: { [key: string]: any };
55
  message?: string;
56
  recipient?: string;
57
  recipientEmail?: string;
58
  sender?: string;
59
  senderEmail?: string;
60
  lowInventory?: boolean;
61
  insufficientQuantity?: boolean;
62
  onlyXLeftInStock?: number | null;
63
  outOfStock?: boolean;
64
  notAvailableMessage?: string;
65
  stockLevel?: string;
66
  productAttributes?: Array<{
67
  code: string;
68
  value?: string;
69
  selected_options?: {
70
    value: string;
71
    label: string;
72
  }[];
73
}>;
74
}

Example extension

The following example demonstrates how to extend the Thumbnail slot.

1
  return provider.render(CartSummaryList, {
2
    hideHeading: hideHeading === 'true',
3
    routeProduct: (product) => `/products/${product.url.urlKey}/${product.sku}`,
4
    routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
5
    maxItems: parseInt(maxItems, 10) || undefined,
6
    attributesToHide: hideAttributes.split(',').map((attr) => attr.trim().toLowerCase()),
7
    enableUpdateItemQuantity: enableUpdateItemQuantity === 'true',
8
    enableRemoveItem: enableRemoveItem === 'true',
9
    slots: {
10
      Thumbnail: (ctx) => {
11
        const { item } = ctx;
12

13
        // Create a link to save the item for later
14
        const saveForLaterLink  = document.createElement('a');
15
        saveForLaterLink.href = '#';
16
        saveForLaterLink.addEventListener('click', (e) => {
17
          e.preventDefault();
18
          console.log(`Saving ${item.name}(${item.sku}) for later`);
19
          // TODO: Implement save for later functionality
20
        });
21
        saveForLaterLink.innerText = 'Save for later';
22

23
        // Create a separator
24
        const separator = document.createElement('span');
25
        separator.innerText = ' | ';
26

27
        // Create a link to remove the item from the cart
28
        const removeLink = document.createElement('a');
29
        removeLink.href = '#';
30
        removeLink.addEventListener('click', (e) => {
31
          e.preventDefault();
32
          console.log(`Removing ${item.name}(${item.sku}) from cart`);
33
          // TODO: Implement remove item functionality
34
        });
35
        removeLink.innerText = 'Remove';
36

37
        // Create a container to hold the links
38
        const container = document.createElement('div');
39
        container.innerHTML = '<div class="cart-summary__thumbnail"/>';
40

41
        // Style the container
42
        container.style.font = 'var(--type-details-caption-2-font)'
43
        container.style.display = 'flex';
44
        container.style.justifyContent = 'space-between';
45

46
        // Append the links to the container
47
        container.appendChild(saveForLaterLink);
48
        container.appendChild(separator);
49
        container.appendChild(removeLink);
50

51
        // Append the container as a child to the existing thumbnail content
52
        ctx.appendChild(container)
53
      }
54
    }
55
  })(block);

The Footer slot allows you to add content to the bottom of the CartSummaryList container.

The following example demonstrates how to extend the Footer slot by adding a promotional cart rule to each product in the cart.

1
Footer: (ctx) => {
2
  // Runs on mount
3
  const wrapper = document.createElement('div');
4
  ctx.appendChild(wrapper);
5

6
  // Append Product Promotions on every update
7
  ctx.onChange((next) => {
8
    wrapper.innerHTML = '';
9

10
    next.item?.discount?.label?.forEach((label) => {
11
      const discount = document.createElement('div');
12
      discount.style.color = '#3d3d3d';
13
      discount.innerText = label;
14
      wrapper.appendChild(discount);
15
    });
16
  });
17
},

ProductAttributes slot

The ProductAttributes slot allows you to add custom content to the CartSummaryList container.

The following example demonstrates how to add the Fashion Material and Fashion Style product attributes to each product in the cart.

1
  return provider.render(CartSummaryList, {
2
    enableRemoveItem: true,
3
    enableUpdateItemQuantity: true,
4
    routeProduct: (item) => {
5
      return `${item.url.categories.join('/')}/${item.url.urlKey}`;
6
    },
7
    routeEmptyCartCTA: () => '#empty-cart',
8
    slots: {
9
      ProductAttributes: (ctx) => {
10
        // Prepend Product Attributes
11
        const ProductAttributes = ctx.item?.productAttributes;
12

13
        ProductAttributes?.forEach((attr) => {
14
          if(attr.code === "Fashion Material" || attr.code === "Fashion Style") {
15
            if(attr.selected_options) {
16
              const selectedOptions = attr.selected_options
17
              .filter((option) => option.label.trim() !== '')
18
              .map((option) => option.label)
19
              .join(', ');
20

21
              if(selectedOptions) {
22
                const productAttribute = document.createElement('div');
23
                productAttribute.innerText = `${attr.code}: ${selectedOptions}`;
24
                ctx.appendChild(productAttribute);
25
              }
26
            } else if (attr.value) {
27
              const productAttribute = document.createElement('div');
28
              productAttribute.innerText = `${attr.code}: ${attr.value}`;
29
              ctx.appendChild(productAttribute);
30
            }
31
          }
32
        })
33
      },
34
    },
35
  })(productList);

CartSummaryFooter slot

The CartSummaryFooter slot allows you to add content to the bottom of the CartSummaryList container.

1
 provider.render(CartSummaryList, {
2
  slots: {
3
    CartSummaryFooter: (ctx) => {
4
      const cartSummaryFooter = document.createElement('div');
5
      cartSummaryFooter.innerText = 'Cart summary footer';
6
      ctx.appendChild(cartSummaryFooter);
7
    },
8
  },
9
})($list),

ItemTitle slot

The ItemTitle slot allows you to customize the title display for each item in the CartSummaryList container.

The following example demonstrates how to replace the default title with a custom title:

1
provider.render(CartSummaryList, {
2
  enableRemoveItem: true,
3
  enableUpdateItemQuantity: true,
4
  slots: {
5
    ItemTitle: (ctx) => {
6
      // Create custom title element
7
      const customTitle = document.createElement('div');
8
      customTitle.className = 'cart-item-custom-title';
9
      customTitle.textContent = 'Custom Title';
10

11
      ctx.replaceWith(customTitle);
12
    },
13
  },
14
})(cartSummaryList);

ItemPrice slot

The ItemPrice slot allows you to customize the price display for each item in the CartSummaryList container.

The following example demonstrates how to add a custom price label:

1
provider.render(CartSummaryList, {
2
  enableRemoveItem: true,
3
  enableUpdateItemQuantity: true,
4
  slots: {
5
    ItemPrice: (ctx) => {
6
      const priceLabel = document.createElement('span');
7
      priceLabel.className = 'cart-item-price-label';
8
      priceLabel.textContent = 'Item Price';
9

10
      ctx.prependChild(priceLabel);
11
    },
12
  },
13
})(cartSummaryList);

ItemQuantity slot

The ItemQuantity slot allows you to customize the quantity display and controls for each item in the CartSummaryList container.

The following example demonstrates how to customize the quantity field by adding a “Qty:” label and using an input component from the SDK:

1
import {
2
  provider as UI,
3
  Input,
4
} from '@dropins/tools/components.js';
5

6
provider.render(CartSummaryList, {
7
  enableRemoveItem: true,
8
  enableUpdateItemQuantity: true,
9
  slots: {
10
    ItemQuantity: (ctx) => {
11
      const { item, handleItemQuantityUpdate } = ctx;
12

13
      // Create container with label and input
14
      const quantityContainer = document.createElement('div');
15
      quantityContainer.className = 'cart-item-quantity-container';
16

17
      // Add "Qty:" label
18
      const quantityLabel = document.createElement('span');
19
      quantityLabel.className = 'cart-item-quantity-label';
20
      quantityLabel.textContent = 'Qty:';
21

22
      // Create input wrapper for SDK Input component
23
      const inputWrapper = document.createElement('div');
24
      inputWrapper.className = 'cart-item-quantity-input';
25
      inputWrapper.style.display = 'inline-block';
26
      inputWrapper.style.width = '60px';
27

28
      // Render SDK Input component
29
      UI.render(Input, {
30
        value: item.quantity.toString(),
31
        min: 1,
32
        size: 'small',
33
        variant: 'primary',
34
        onValue: (value) => {
35
          const newQuantity = parseInt(value, 10);
36
          if (
37
            !Number.isNaN(newQuantity)
38
            && newQuantity > 0
39
            && newQuantity !== item.quantity
40
          ) {
41
            handleItemQuantityUpdate(item, newQuantity);
42
          }
43
        },
44
      })(inputWrapper);
45

46
      // Style the container for inline layout
47
      quantityContainer.style.display = 'flex';
48
      quantityContainer.style.alignItems = 'center';
49
      quantityContainer.style.gap = 'var(--spacing-xsmall)';
50

51
      quantityContainer.appendChild(quantityLabel);
52
      quantityContainer.appendChild(inputWrapper);
53

54
      ctx.replaceWith(quantityContainer);
55
    },
56
  },
57
})(cartSummaryList);

ItemTotal slot

The ItemTotal slot allows you to customize the total price display for each item in the CartSummaryList container.

The following example demonstrates how to add a custom total label:

1
provider.render(CartSummaryList, {
2
  enableRemoveItem: true,
3
  enableUpdateItemQuantity: true,
4
  slots: {
5
    ItemTotal: (ctx) => {
6
      const totalLabel = document.createElement('div');
7
      totalLabel.className = 'cart-item-total-label';
8
      totalLabel.textContent = 'Item Total';
9

10
      ctx.prependChild(totalLabel);
11
    },
12
  },
13
})(cartSummaryList);

ItemSku slot

The ItemSku slot allows you to customize the SKU display for each item in the CartSummaryList container.

The following example demonstrates how to replace the default SKU with a custom SKU:

1
provider.render(CartSummaryList, {
2
  enableRemoveItem: true,
3
  enableUpdateItemQuantity: true,
4
  slots: {
5
    ItemSku: (ctx) => {
6
      const customSku = document.createElement('div');
7
      customSku.className = 'cart-item-custom-sku';
8
      customSku.textContent = 'custome-sku';
9

10
      ctx.replaceWith(customSku);
11
    },
12
  },
13
})(cartSummaryList);

ItemRemoveAction slot

The ItemRemoveAction slot allows you to customize the remove action button for each item in the CartSummaryList container.

The following example demonstrates how to replace the default remove button with a custom button:

1
provider.render(CartSummaryList, {
2
  enableRemoveItem: true,
3
  enableUpdateItemQuantity: true,
4
  slots: {
5
    ItemRemoveAction: (ctx) => {
6
      // Simple remove button with text
7
      const removeButton = document.createElement('button');
8
      removeButton.innerText = 'Remove';
9
      // apply styling using design tokens where possible
10
      removeButton.style.background = 'transparent';
11
      removeButton.style.border = 'none';
12
      removeButton.style.color = 'var(--color-neutral-600)';
13
      removeButton.style.cursor = 'pointer';
14
      removeButton.style.fontSize = 'var(--type-body-2-font-size)';
15
      removeButton.style.padding = '0';
16
      removeButton.style.paddingRight = 'var(--spacing-medium)';
17
      removeButton.style.fontWeight = 'var(--type-body-2-font-weight, normal)';
18
      removeButton.style.textDecoration = 'underline';
19
      removeButton.style.float = 'right';
20
      removeButton.style.marginLeft = 'auto';
21
      removeButton.style.display = 'block';
22

23
      // Remove functionality
24
      removeButton.addEventListener('click', () => {
25
        if (ctx.handleItemQuantityUpdate) {
26
          ctx.handleItemQuantityUpdate(ctx.item, 0);
27
        }
28
      });
29

30
      ctx.replaceWith(removeButton);
31
    },
32
  },
33
})(cartSummaryList);

OrderSummary slots

The OrderSummaryProps interface defines two slots for customizing the appearance of the order summary.

1
interface OrderSummaryProps
2

3
slots?: {
4
  EstimateShipping?: SlotProps;
5
  Coupons?: SlotProps;
6
};

EstimateShipping slot

The EstimateShipping slot allows you to add estimated shipping information to the OrderSummary container.

The following example demonstrates how to add the Estimate Shipping layout to the OrderSummary container.

1
  return provider.render(OrderSummary, {
2
    routeCheckout: () => '#checkout',
3

4
    errors: ctx.hasErrors,
5

6
    slots: {
7
      EstimateShipping: (ctx) => {
8
        const estimateShippingForm = document.createElement('div');
9

10
        provider.render(EstimateShipping)(estimateShippingForm);
11

12
        ctx.appendChild(estimateShippingForm);
13
      }
14
    },
15
  })(orderSummary);

Coupons slot

The Coupons slot allows you to add the Coupons layout to the OrderSummary container.

The following example demonstrates how to enable coupons to the OrderSummary container.

1
  return provider.render(OrderSummary, {
2
    routeCheckout: () => '#checkout',
3

4
    errors: ctx.hasErrors,
5

6
    slots: {
7
      Coupons: (ctx) => {
8
          const coupons = document.createElement('div');
9

10
          provider.render(Coupons)(coupons);
11

12
          ctx.appendChild(coupons);
13
        }
14
    },
15
  })(orderSummary);

MiniCart slot

The MiniCartProps interface defines slots for customizing the appearance of the mini cart.

1
interface MiniCartProps
2

3
slots?: {
4
  ProductList?: SlotProps;
5
  ProductListFooter?: SlotProps;
6
  PreCheckoutSection?: SlotProps;
7
  Thumbnail?: SlotProps<{
8
    item: CartModel['items'][number];
9
    defaultImageProps: ImageProps;
10
  }>;
11
  Heading?: SlotProps;
12
  EmptyCart?: SlotProps;
13
  Footer?: SlotProps;
14
  ProductAttributes?: SlotProps;
15
  CartSummaryFooter?: SlotProps;
16
  CartItem?: SlotProps;
17
  UndoBanner?: SlotProps<{
18
    item: CartModel['items'][0];
19
    loading: boolean;
20
    error?: string;
21
    onUndo: () => void;
22
    onDismiss: () => void;
23
  }>;
24
  ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
25
  ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
26
  ItemQuantity?: SlotProps<{
27
    item: CartModel['items'][number];
28
    enableUpdateItemQuantity: boolean;
29
    handleItemQuantityUpdate: (
30
      item: CartModel['items'][number],
31
      quantity: number
32
    ) => void;
33
    itemsLoading: Set<string>;
34
    handleItemsError: (uid: string, message?: string) => void;
35
    handleItemsLoading: (uid: string, state: boolean) => void;
36
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
37
  }>;
38
  ItemTotal?: SlotProps<{ item: CartModel['items'][number] }>;
39
  ItemSku?: SlotProps<{ item: CartModel['items'][number] }>;
40
  ItemRemoveAction?: SlotProps<{
41
    item: CartModel['items'][number];
42
    enableRemoveItem: boolean;
43
    handleItemQuantityUpdate: (
44
      item: CartModel['items'][number],
45
      quantity: number
46
    ) => void;
47
    handleItemsError: (uid: string, message?: string) => void;
48
    handleItemsLoading: (uid: string, state: boolean) => void;
49
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
50
    itemsLoading: Set<string>;
51
  }>;
52
};

Note: Many slots are shared between MiniCart and CartSummaryList components. For implementation details of shared slots, refer to the corresponding examples in the CartSummaryList slots section above.

The following slots are specific to the MiniCart component:

ProductListFooter slot

The ProductListFooter slot allows you to add content after the product list and before the subtotal section of the MiniCart container.

The following example demonstrates how to extend the ProductListFooter by adding the store return policy.

1
  return provider.render(MiniCart, {
2
    routeEmptyCartCTA: () => '#empty-cart',
3
    routeCart: () => '#cart',
4
    routeCheckout: () => '#checkout',
5
    slots: {
6
      ProductListFooter: (ctx) => {
7
        const productListFooter = document.createElement('div');
8
        ctx.appendChild(productListFooter);
9

10
        ctx.onChange((next) => {
11
          // Clear the existing content
12
          productListFooter.innerHTML = '';
13

14
          if (Object.keys(next.data.items).length === 0) {
15
            return;
16
          }
17

18
          const shadowWrapper = document.createElement('div');
19
          shadowWrapper.style.backgroundColor = '#EFF5EF';
20
          shadowWrapper.style.borderRadius = '5px';
21

22
          // Create the content div
23
          const contentDiv = document.createElement('div');
24
          contentDiv.innerHTML = "<p style='line-height: 1.5;'>Enjoy hassle-free shopping with our 30-day return policy!</p>";
25
          contentDiv.style.display = 'flex';
26
          contentDiv.style.flexDirection = 'column';
27
          contentDiv.style.padding = '12px';
28

29
          // Append the content div to the shadow wrapper
30
          shadowWrapper.appendChild(contentDiv);
31

32
          productListFooter.appendChild(shadowWrapper);
33
        });
34
      },
35
    },
36
  })(orderSummary);

PreCheckoutSection slot

The PreCheckoutSection slot allows you to add content after the the subtotal section and before the Call to Action buttons of the MiniCart container.

The following example demonstrates how to extend the PreCheckoutSection by adding the loyalty program callouts.

1
  return provider.render(MiniCart, {
2
    routeEmptyCartCTA: () => '#empty-cart',
3
    routeCart: () => '#cart',
4
    routeCheckout: () => '#checkout',
5
    slots: {
6
      PreCheckoutSection: (ctx) => {
7
        const preCheckoutSection = document.createElement('div');
8
        ctx.appendChild(preCheckoutSection);
9

10
        ctx.onChange((next) => {
11
          // Clear the existing content
12
          preCheckoutSection.innerHTML = '';
13

14
          if (Object.keys(next.data.items).length === 0) {
15
            return;
16
          }
17

18
          // Create a wrapper div for the shadow background
19
          const shadowWrapper = document.createElement('div');
20
          shadowWrapper.style.backgroundColor = '#EEEFFB';
21
          shadowWrapper.style.borderRadius = '5px';
22

23
          // Create the content div
24
          const contentDiv = document.createElement('div');
25
          contentDiv.innerHTML = "<p style='line-height: 1.5;'>Earn rewards every time you shop! Sign up for our free loyalty program today and start earning points on this purchase.</p>";
26
          contentDiv.style.display = 'flex';
27
          contentDiv.style.flexDirection = 'column';
28
          contentDiv.style.padding = '12px';
29

30
          // Append the content div to the shadow wrapper
31
          shadowWrapper.appendChild(contentDiv);
32

33
          // Append the shadow wrapper to the preCheckoutSection div
34
          preCheckoutSection.appendChild(shadowWrapper);
35
        });
36
      },
37
    },
38
  })(orderSummary);