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:

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'> {
  active?: boolean;
  onCartProductsUpdate?: (items: UpdateProductsFromCart) => void;
  routeCart?: () => string;
}

• Set the active property to true to have the container in reactive mode (it is visible and responds to system events). If it is set to false, the container is deactivated (it does not subscribe to system events and is not rendered).
• 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),