OutOfStock container

The OutOfStock container is designed to handle and display items in the shopping cart that are out of stock or have insufficient quantity. You can configure it to handle the removal of out-of-stock items and provide a route to the cart page.

OutOfStock configurations

The OutOfStock container provides the following configuration options:

Option	Type	Req?	Description
onCartProductsUpdate	function	No	Handles the removal of out-of-stock items. It takes the list of items that are out of stock as an argument.
routeCart	function	No	The route to the cart page.

These configuration options implement the OutOfStockProps interface:

OutOfStockProps interface

The OutOfStock container receives an object as a parameter which implements the OutOfStockProps interface with the following properties:

export type UpdateProductsFromCart = Array<{
  uid: string;
  quantity: number;
}>;

export interface OutOfStockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
  onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;
  routeCart?: () => string;
}

The onCartProductsUpdate property is a handler used to perform actions called when there are out-of-stock items. It takes the list of items (array with pairs of uid and quantity values) as an input parameter.

The routeCart property is a handler used to indicate the route to the cart page.

Example

The following example renders the OutOfStock container to handle and display out-of-stock items in the cart:

import * as cartApi from '@dropins/storefront-cart/api.js';
import OutOfStock from '@dropins/storefront-checkout/containers/OutOfStock.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $outOfStock = checkoutFragment.querySelector('.checkout__out-of-stock');

CheckoutProvider.render(OutOfStock, {
  routeCart: () => '/cart',
  onCartProductsUpdate: (items) => {
    cartApi.updateProductsFromCart(items).catch(console.error);
  },
})($outOfStock),