Skip to main content

OutOfStock

OutOfStock displays a subscription form for shoppers who want to be alerted when a sold-out product is back in stock.

The OutOfStock component is a compound of the following:

  • OutOfStock: wraps the title and content of the OutOfStock component.
  • OutOfStockTitle: wraps the title of the OutOfStock component.
  • OutOfStockMessage: wraps the content of the OutOfStock component.

Importโ€‹

import { OutOfStock, OutOfStockTitle, OutOfStockMessage } from '@faststore/ui'

Usageโ€‹

Out of Stock

Notify me when available

Propsโ€‹

testIdstring
Description

ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).

Default value
store-out-of-stock
childrenReactNode
Description

Children for Out of Stock components.

onSubmit((event: any) => void) & FormEventHandler<HTMLFormElement>
Description

Event emitted when form is submitted.

Customizationโ€‹

data-store-out-of-stock

data-out-of-stock-form

data-out-of-stock-title

data-out-of-stock-message

Best practicesโ€‹

โœ… Do'sโ€‹

  • Use the OutOfStock component in PDPs.
  • Specify the input type in your form to validate data (e.g., <Input type="email" placeholder="Email"/>).
  • Handle the form submission by informing shoppers that they will be emailed when the item is back in stock.

โŒ Don'tsโ€‹

  • Don't use the OutOfStock component for alert messages. Instead, use the Alert component.
  • Don't use the OutOfStock component in products that won't return to stock.

Accessibilityโ€‹

  • Text elements and buttons must have sufficient color contrast against the background.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY