Instruction

Intro: The Refactor Back in Stock works on all devices and all browsers. All information is stored in the customer's metafields. Refactor Back in Stock provides a set of endpoints and events you can use in your theme.

First of all, you need to activate the App Embed Extension by clicking on this button and pressing save:

Or follow these steps:

In your Shopify admin, go to Online Store / Themes.
Find the theme you want to edit, and then click Customize.
On the sidebar, click the App embeds icon.
Select the app embed "Back in Stock".
Besides the app embed, click the toggle button to activate it.
Click Save.

After that, in the theme in which you activated App Embed, you will be able to access the helper functions.

All helper functions are storing in global window.refactor_apps.back_in_stock object.

You can check that everything is fine by running this command:

window.refactor_apps.back_in_stock.isReady;
-> true

Public Methods

window.refactor_apps.back_in_stock.checkIsSubscribed({ email, variantId })

Checks if a user is subscribed to back-in-stock notifications for a product variant

Accepts:

@param {string} email - User email
@param {string} variantId - Product variant ID

Returns:

@returns {{
   success: boolean,
   isSubscribed?: boolean,
   message?: {
     errors: Record<string, string>
   }
}}

Example:

const res = await window.refactor_apps.back_in_stock.checkIsSubscribed({ email: "example@email.com", variantId: "47891249692922" });

const isSubscribed = res?.isSubscribed;

window.refactor_apps.back_in_stock.checkIsSubscribedByCustomerId({ customerId, variantId })

Checks if a customer is subscribed to back-in-stock notifications for a product variant

Accepts:

@param {string} customerId - Customer id
@param {string} variantId - Product variant ID

Returns:

@returns {{
   success: boolean,
   isSubscribed?: boolean,
   message?: {
     errors: Record<string, string>
   }
}}

Example:

const res = await window.refactor_apps.back_in_stock.checkIsSubscribedByCustomerId({ customerId: "8780630393082", variantId: "47891249692922" });

const isSubscribed = res?.isSubscribed;

window.refactor_apps.back_in_stock.subscribeOnTheProduct({ variantId, email, customerId = null })

Accepts:

@param {String} variantId - variant id
@param {String} email - email for subscribe
@param {String?} customerId - optional customer id to save subscribed products into customer metafield

Returns:

@returns {{
  success: Boolean,
  message?: {
    errors: Record<string, string>
  }
}}

Example:

const res = await window.refactor_apps.back_in_stock.subscribeOnTheProduct({ variantId: "47891249692922", email: "test@mail.com", customerId: "87806393082" });

const isSuccess = res?.success;

window.refactor_apps.back_in_stock.unsubscribeFromTheProduct({ variantId, email, customerId = null })

Accepts:

@param {String} variantId - variant id
@param {String} email - email for unsubscribe
@param {String?} customerId - optional customer id to delete subscribed products from customer metafield

Returns:

@returns {{
  success: Boolean,
  message?: {
    errors: Record<string, string>
  }
}}

Example:

const res = await window.refactor_apps.back_in_stock.unsubscribeFromTheProduct({ variantId: "47891249692922", email: "test@mail.com", customerId: "87806393082" });

const isSuccess = res?.success

window.refactor_apps.back_in_stock.unsubscribeFromTheProductByCustomerId({ variantId, customerId = null })

Accepts:

@param {String} variantId - variant id
@param {String} customer - customer id to delete subscribed products from customer metafield

Returns:

@returns {{
  success: Boolean,
  message?: {
    errors: Record<string, string>
  }
}}

Example:

const res = await window.refactor_apps.back_in_stock.unsubscribeFromTheProductByCustomerId({ variantId: "47891249758458", customerId: "8780630393082" });

const isSuccess = res?.success;

window.refactor_apps.back_in_stock.getSubscribers({ variantId })

Accepts:

@param {String} variantId - variant id of checked product

Returns:

@returns {{
  success: Boolean,
  emails?: Record<string, string | null>[]
  message?: {
    errors: Record<string, string>
  }
}}

Example:

const res = await window.refactor_apps.back_in_stock.getSubscribers({ variantId: "47891249692922" })

const emails = res?.emails;
console.log(emails);
  -> { 
  ->    example@email.com: null,
  ->    example2@email.com: "8780630393082"
  -> }

window.refactor_apps.back_in_stock.getSubscribedProducts({customerId})

Accepts:

@param {String} customerId - customer id

Returns:

@returns {{
  success: Boolean,
  variantIds?: string[]
  message?: {
    errors: Record<string, string>
  }
}}

Example:

const res = await window.refactor_apps.back_in_stock.getSubscribedProducts({ customerId: "8780630393082" });

const variantIds = res?.variantIds;
console.log(variantIds);
  -> [ 
  ->    "47891249692922"
  -> ]

Events

You can track the subscribe/unsubscribe state by listening to the event:

apps:back-in-stock:subscribed

apps:back-in-stock:unsubscribed

Example:

document.addEventListener("apps:back-in-stock:subscribed", (e) => {   
   const { variantId, email, customer } = e.detail;
});

It also takes some time to fully load the extension. This usually takes a few milliseconds. If you need to know exactly when the API is ready, you can use either the property:

window.refactor_apps.back_in_stock.isReady

or listen for the event.

apps:back-in-stock:ready

Example:

document.addEventListener("apps:back-in-stock:ready", (e) => {   
 // Your code here
});

Customer Metafield

The customer's active subscriptions are stored in a Shopify customer metafield with:

Namespace: refactor_back_in_stock

Key: subscribed-variants

The metafield stores data as JSON :

{"47891249692922":true}

Example:

{% if customer %}
  {% assign subscribed_variants = customer.metafields.refactor_back_in_stock['subscribed-variants'].value %}
  {% assign variant_id = product.selected_or_first_available_variant.id | string %}

  {% if subscribed_variants[variant_id] %}
   // ✅ subscribed
  {% else %}
   // ❌ unsubscribed
  {% endif %}
{% endif %}