Restock Rocket Javascript API Documentation

For customers who want to add custom integrations with Restock Rocket through the theme, we provide a Javascript API when our app loads into your theme.

Customers can access the API through the object window._RestockRocket on the page. We provide the following APIs:
On the product page, we provide: openModal and renderButtonForVariant.
On collection, home and custom pages, we provide: openModal.

APIs

openModal(productData, variantId)

This API opens the modal for a specific product. This is usually used in your theme if it has a custom element like a quick add button.

// Rendering the button on collection page
productData = { id: 1111, variants: [ { id: 2222, available: false } ] };
variantId = '41XX'
window._RestockRocket.openModal(productData, variantId)`

// Rendering the button on product page
// By default it renders the product on the page
window._RestockRocket.openModal()

// If you have access to Liquid objects
window._RestockRocket.openModal( {{ product | json }} , '41XX')
window._RestockRocket.openModal( {{ collection_product | json }} , '41XX')

renderButtonForVariant(variantId)

This API sets the button up (or removes it) for a specific variant on the page. This is usually used when your theme has a custom variant selector. If the variant ID is out of stock our button will show, if the variant ID is in stock our button will be removed.

// variant changes to variantId 41XX
window._RestockRocket.renderButtonForVariant('41XX')
// If it's out of stock, it will show the button

// variant changes to variantId 42YY
window._RestockRocket.renderButtonForVariant('42YY')
// If it's in stock, it will hide the button

Updated on: 29/12/2023