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โ
Loading...
Propsโ
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.