Set Up Purple Dot for Out of Stock

For some use cases, like using waitlists with out of stock products, you might want to show Purple Dot only when a product or a variant is out of stock and it has waitlist set up.

You might also want to remove "Sold out" labels from collection views if an out of stock product has a waitlist.

Only show the button if out of stock

On a product page, you can show the pre-order button only if the variant is out of stock and is available on Purple Dot by combining your regular stock data with availability data provided by the Purple Dot API.

// Variant currently selected by the user
const selectedVariant = product.variants[0];
// Get the availability information from the API
window.PurpleDot.fetchAvailability({ productId: product.id }).then((response) => {
const pdVariant = response.variants.find((v) => v.id === selectedVariant.id);
if (variant.available) {
// Show regular add to cart button if variant in stock
} else if (!variant.available && pdVariant.available) {
// Show the pre-order button if variant is out of stock and available on Purple Dot
} else {
// Show a sold out state if a variant is not available at all
}
});

You can use the same technique to make any other changes to the product page, like showing or hiding "Sold out" or "Pre-order" labels.

Remove sold out labels from a collection of products

On a collection page, you can show "Pre-order" labels or hide "Sold out" labels if a product is out of stock and has a waitlist set up by combining your existing product availability data with waitlist data provided by the Purple Dot API.

// Get all open waitlists from the API
window.PurpleDot.fetchWaitlists().then((response) => {
// Iterate through all sold out labels on the collection page
document.querySelectorAll('.sold-out-label').forEach((labelElement) => {
// We need to know the product ID for each
const productId = labelElement.dataset.productId;
// Check if there is a waitlist for the product
const hasWaitlist = !!response.find((waitlist) => waitlist.product.id.toString() === productId);
if (hasWaitlist) {
// Hide the label if the product has a waitlist
labelElement.style.display = 'none';
}
});
});