Cart slots

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

Extending dropin-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.

interface CartSummaryListProps

slots?: {
  Heading?: SlotProps;
  EmptyCart?: SlotProps;
  Thumbnail?: SlotProps;
  Footer?: SlotProps;
  ProductAttributes?: SlotProps;
};

Thumbnail

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:

export interface Item {
  taxedPrice: {
    value: number;
    currency: string;
  };
  rowTotal: {
    value: number;
    currency: string;
  };
  rowTotalIncludingTax: {
    value: number;
    currency: string;
  };
  itemType: string;
  uid: string;
  url: {
    urlKey: string;
    categories: string[];
  };
  quantity: number;
  sku: string;
  name: string;
  image: {
    src: string;
    alt: string;
  };
  links?: {
    count: number;
    result: string;
  };
  price: {
    value: number;
    currency: string;
  };
  total: {
    value: number;
    currency: string;
  };
  discountedTotal?: {
    value: number;
    currency: string;
  };
  discount?: {
    value: number;
    currency: string;
  };
  regularPrice: {
    value: number;
    currency: string;
  };
  discounted: boolean;
  bundleOptions?: { [key: string]: any };
  selectedOptions?: { [key: string]: any };
  customizableOptions?: { [key: string]: any };
  message?: string;
  recipient?: string;
  recipientEmail?: string;
  sender?: string;
  senderEmail?: string;
  lowInventory?: boolean;
  insufficientQuantity?: boolean;
  onlyXLeftInStock?: number | null;
  outOfStock?: boolean;
  notAvailableMessage?: string;
  stockLevel?: string;
  productAttributes?: Array<{
    code: string;
    value?: string;
    selected_options?: {
      value: string;
      label: string;
    }[];
  }>;
}

Example: Extend the Thumbnail slot

The following example demonstrates how to extend the Thumbnail slot.

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

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

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

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

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

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

      // Append the links to the container
      container.appendChild(saveForLaterLink);
      container.appendChild(separator);
      container.appendChild(removeLink);

      // Append the container as a child to the existing thumbnail content
      ctx.appendChild(container);
    },
  },
})(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.

return provider.render(Cart, {
  slots: {
    ProductList: (ctx) => {
      const productList = document.createElement('div');

      // Initial render of ProductList
      provider.render(CartSummaryList, {
        slots: {
          // Runs on mount
          const wrapper = document.createElement('div');
          ctx.appendChild(wrapper);

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

            next.item?.discount?.label?.forEach((label) => {
              const discount = document.createElement('div');
              discount.style.color = '#3d3d3d';
              discount.innerText = label;
              wrapper.appendChild(discount);
            });
          });
        },
      })(productList);

      ctx.replaceWith(productList);
    },
  },
})(document.getElementById('@dropins/cart'));

ProductAttributes

The ProductAttributes slot allows you to add 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.

return provider.render(CartSummaryList, {
  enableRemoveItem: true,
  enableUpdateItemQuantity: true,
  routeProduct: (item) => {
    return `${item.url.categories.join('/')}/${item.url.urlKey}`;
  },
  routeEmptyCartCTA: () => '#empty-cart',
  slots: {
    ProductAttributes: (ctx) => {
      // Prepend Product Attributes
      const ProductAttributes = ctx.item?.productAttributes;

      ProductAttributes?.forEach((attr) => {
        if (attr.code === 'Fashion Material' || attr.code === 'Fashion Style') {
          if (attr.selected_options) {
            const selectedOptions = attr.selected_options
              .filter((option) => option.label.trim() !== '')
              .map((option) => option.label)
              .join(', ');

            if (selectedOptions) {
              const productAttribute = document.createElement('div');
              productAttribute.innerText = `${attr.code}: ${selectedOptions}`;
              ctx.appendChild(productAttribute);
            }
          } else if (attr.value) {
            const productAttribute = document.createElement('div');
            productAttribute.innerText = `${attr.code}: ${attr.value}`;
            ctx.appendChild(productAttribute);
          }
        }
      });
    },
  },
})(productList);

OrderSummary slots

You can customize the appearance of the order summary by using slots.

interface OrderSummaryProps

slots?: {
  EstimateShipping?: SlotProps;
  Coupons?: SlotProps;
};

EstimateShipping

The EstimateShipping slot allows you to add Estimate Shipping layout to the OrderSummary container.

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

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

  errors: ctx.hasErrors,

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

      provider.render(EstimateShipping)(estimateShippingForm);

      ctx.appendChild(estimateShippingForm);
    },
  },
})(orderSummary);

Coupons

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.

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

  errors: ctx.hasErrors,

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

      provider.render(Coupons)(coupons);

      ctx.appendChild(coupons);
    },
  },
})(orderSummary);