diff --git a/src/content/docs/dropins/cart/containers/cart-summary-list.mdx b/src/content/docs/dropins/cart/containers/cart-summary-list.mdx index 4a29b06fc..f415a69b0 100644 --- a/src/content/docs/dropins/cart/containers/cart-summary-list.mdx +++ b/src/content/docs/dropins/cart/containers/cart-summary-list.mdx @@ -39,7 +39,7 @@ The `CartSummaryList` container provides the following configuration options: | `slots` | `function` | No | Allows passing a container or custom component. | | `attributesToHide` | `string[]` | No | Attributes to hide. | | `enableRemoveItem` | `boolean` | No | Enable remove item. | -| `enableUpdateItemQuantity` | `boolean` | No | Enable update item quantity. | +| `enableUpdateItemQuantity` | `boolean \| { removeOnZero?: boolean }` | No | Enables the quantity stepper. Pass `{ removeOnZero: true }` to also remove the item when the quantity reaches `0`; defaults to `false`. | | `onItemsErrorsChange` | `function` | No | Callback function that changes the items errors. | | `accordion` | `boolean` | No | Toggle accordion view. | | `variant` | `primary \| secondary` | No | Cart variant. | @@ -51,6 +51,7 @@ The `CartSummaryList` container provides the following configuration options: | `dropdownOptions` | `string[]` | No | An array of items to display in a dropdown menu. | | `undo` | `boolean` | No | Enables the undo banner to restore recently removed items to the cart. | | `includeOutOfStockItems` | `boolean` | No | Display out-of-stock and insufficient-quantity items in the main cart item list alongside in-stock items. Default: `false`. | +| `confirmBeforeDelete` | `boolean` | No | Enables the confirmation banner when an item is removed from the cart. When set to true, clicking the remove button shows an inline confirmation banner instead of immediately deleting the item. | @@ -70,6 +71,7 @@ The `CartSummaryList` container supports the following slots: * CartSummaryFooter * CartItem * UndoBanner +* ConfirmDeleteBanner * ItemTitle * ItemPrice * ItemQuantity @@ -86,6 +88,7 @@ provider.render(CartSummaryList, { enableRemoveItem: true, enableUpdateItemQuantity: true, showDiscount: true, + // confirmBeforeDelete: true, // accordion: true, // includeOutOfStockItems: true, // showMaxItems: false, diff --git a/src/content/docs/dropins/cart/containers/mini-cart.mdx b/src/content/docs/dropins/cart/containers/mini-cart.mdx index 32b96338e..148022a59 100644 --- a/src/content/docs/dropins/cart/containers/mini-cart.mdx +++ b/src/content/docs/dropins/cart/containers/mini-cart.mdx @@ -37,9 +37,10 @@ The `MiniCart` container provides the following configuration options: | `showDiscount` | `boolean` | No | Flag to show discounts in the mini cart. | | `showSavings` | `boolean` | No | Flag to show savings in the mini cart. | | `enableItemRemoval` | `boolean` | Yes | Flag to enable removing items from the mini cart. When set to true, users can remove products from the cart directly in the mini cart interface. | -| `enableQuantityUpdate` | `boolean` | No | Flag to enable updating item quantities in the mini cart. When set to true, users can adjust product quantities directly in the mini cart interface. | +| `enableQuantityUpdate` | `boolean \| { removeOnZero?: boolean }` | No | Enables quantity updates in the mini cart. Pass `{ removeOnZero: true }` to also remove the item when the quantity reaches `0`; defaults to `false`. | | `hideHeading` | `boolean` | No | Flag to hide the heading in the mini cart. When set to true, the mini cart header will not be displayed. | | `undo` | `boolean` | No | Enables the undo banner to restore recently removed items to the cart. | +| `confirmBeforeDelete` | `boolean` | No | Enables the confirmation banner when an item is removed from the cart. When set to true, clicking the remove button shows an inline confirmation banner instead of immediately deleting the item. | @@ -61,6 +62,7 @@ The `MiniCart` container supports the following slots: * CartSummaryFooter * CartItem * UndoBanner +* ConfirmDeleteBanner * ItemTitle * ItemPrice * ItemQuantity @@ -85,5 +87,6 @@ provider.render(MiniCart, { // enableItemRemoval: true, // enableQuantityUpdate: true, // hideHeading: true, + // confirmBeforeDelete: true, })($miniCart); ``` \ No newline at end of file diff --git a/src/content/docs/dropins/cart/slots.mdx b/src/content/docs/dropins/cart/slots.mdx index 63b07dc16..9b03343a6 100644 --- a/src/content/docs/dropins/cart/slots.mdx +++ b/src/content/docs/dropins/cart/slots.mdx @@ -27,10 +27,10 @@ Do not use context methods inside other context methods (for example, `appendChi | Container | Slots | |-----------|-------| | [`CartSummaryGrid`](#cartsummarygrid-slots) | `Thumbnail` | -| [`CartSummaryList`](#cartsummarylist-slots) | `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `Thumbnail`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` | +| [`CartSummaryList`](#cartsummarylist-slots) | `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `Thumbnail`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ConfirmDeleteBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` | | [`CartSummaryTable`](#cartsummarytable-slots) | `Item`, `Price`, `Quantity`, `Subtotal`, `Thumbnail`, `ProductTitle`, `Sku`, `Configurations`, `ItemAlert`, `ItemWarning`, `Actions`, `UndoBanner`, `EmptyCart` | | [`GiftOptions`](#giftoptions-slots) | `SwatchImage` | -| [`MiniCart`](#minicart-slots) | `ProductList`, `ProductListFooter`, `PreCheckoutSection`, `Thumbnail`, `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` | +| [`MiniCart`](#minicart-slots) | `ProductList`, `ProductListFooter`, `PreCheckoutSection`, `Thumbnail`, `Heading`, `EmptyCart`, `Footer`, `RowTotalFooter`, `ProductAttributes`, `CartSummaryFooter`, `CartItem`, `UndoBanner`, `ConfirmDeleteBanner`, `ItemTitle`, `ItemPrice`, `ItemQuantity`, `ItemTotal`, `ItemSku`, `ItemRemoveAction` | | [`OrderSummary`](#ordersummary-slots) | `EstimateShipping`, `Coupons`, `GiftCards` | @@ -98,6 +98,11 @@ interface CartSummaryListProps { onUndo: () => void; onDismiss: () => void; }>; + ConfirmDeleteBanner?: SlotProps<{ + item: CartModel['items'][number]; + onConfirm: () => void; + onCancel: () => void; + }>; ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>; ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>; ItemQuantity?: SlotProps<{ @@ -337,6 +342,44 @@ await provider.render(CartSummaryList, { })(block); ``` +### ConfirmDeleteBanner slot + +The `ConfirmDeleteBanner` slot lets you replace the default confirmation banner that appears when `confirmBeforeDelete={true}` and a shopper reduces an item's quantity to 0 or clicks the remove button. Use it to customize the banner's appearance, message text, and action buttons. + +#### Context + +The slot receives the following context: + +| Property | Type | Description | +|----------|------|-------------| +| `item` | `CartModel['items'][number]` | The cart item pending deletion. | +| `onConfirm` | `() => void` | Call to confirm deletion and trigger the remove API. | +| `onCancel` | `() => void` | Call to dismiss the banner and restore the item row with its original quantity. | + +#### Example + +```js +import { render as provider } from '@dropins/storefront-cart/render.js'; +import { CartSummaryList } from '@dropins/storefront-cart/containers/CartSummaryList.js'; + +await provider.render(CartSummaryList, { + confirmBeforeDelete: true, + slots: { + ConfirmDeleteBanner: (ctx) => { + const banner = document.createElement('div'); + banner.innerHTML = ` +

Remove "${ctx.item.name}" from your cart?

+ + + `; + banner.querySelector('#confirm').addEventListener('click', ctx.onConfirm); + banner.querySelector('#cancel').addEventListener('click', ctx.onCancel); + ctx.appendChild(banner); + } + } +})(block); +``` + ### ItemTitle slot The `ItemTitle` slot allows you to customize the item title section of the `CartSummaryList` container. @@ -536,6 +579,11 @@ interface MiniCartProps { onUndo: () => void; onDismiss: () => void; }>; + ConfirmDeleteBanner?: SlotProps<{ + item: CartModel['items'][number]; + onConfirm: () => void; + onCancel: () => void; + }>; ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>; ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>; ItemQuantity?: SlotProps<{ @@ -820,6 +868,44 @@ await provider.render(MiniCart, { })(block); ``` +### ConfirmDeleteBanner slot + +The `ConfirmDeleteBanner` slot lets you replace the default confirmation banner that appears when `confirmBeforeDelete={true}` and a shopper clicks the remove button. Use it to customize the banner's appearance, message text, and action buttons. + +#### Context + +The slot receives the following context: + +| Property | Type | Description | +|----------|------|-------------| +| `item` | `CartModel['items'][number]` | The cart item pending deletion. | +| `onConfirm` | `() => void` | Call to confirm deletion and trigger the remove API. | +| `onCancel` | `() => void` | Call to dismiss the banner and restore the item row with its original quantity. | + +#### Example + +```js +import { render as provider } from '@dropins/storefront-cart/render.js'; +import { MiniCart } from '@dropins/storefront-cart/containers/MiniCart.js'; + +await provider.render(MiniCart, { + confirmBeforeDelete: true, + slots: { + ConfirmDeleteBanner: (ctx) => { + const banner = document.createElement('div'); + banner.innerHTML = ` +

Remove "${ctx.item.name}" from your cart?

+ + + `; + banner.querySelector('#confirm').addEventListener('click', ctx.onConfirm); + banner.querySelector('#cancel').addEventListener('click', ctx.onCancel); + ctx.appendChild(banner); + } + } +})(block); +``` + ### ItemTitle slot The `ItemTitle` slot allows you to customize the item title section of the `MiniCart` container.