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

React

Loading...

CSS

[data-fs-out-of-stock] [data-out-of-stock-form] {
  display: flex;
  align-items: center;
  flex-direction: column;
}

[data-fs-out-of-stock] [data-out-of-stock-title] {
  margin-bottom: .25rem;
  font-size: inherit;
  font-weight: inherit;
}

[data-fs-out-of-stock] [data-out-of-stock-message] {
  align-items: center;
  margin-bottom: 1rem;
}

[data-out-of-stock-form] [data-fs-button] {
  width: 100%;
  margin-top: 1rem;
}

[data-out-of-stock-form] [data-fs-input] {
  width: 100%;
  margin-top: 0.25rem;
  max-width: initial;
}

Props

Customization

data-fs-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.