Subscriptions

GLOW subscriptions allow your code to monitor for changes to the user's show. This is important for keeping your UI in sync with actions made elsewhere on a page, and even in other tabs.

info

glow.subscribe functions handle the full state lifecycle.

All functions under the glow.subscribe namespace will notify the listener of the initial state, and then continue to notify of future changes. This makes these subscriptions the ideal way to both initially query and then continue monitoring GLOW state.

note

The initial state broadcast after registering a subscription happens asynchronously, and while it's very fast, don't expect it to be synchronous. (There is cross-domain communication happening, but it's all local within the browser so it should feel instant to the user no matter their internet speed.)

Each glow.subscribe function can be called multiple times to attach multiple listeners if needed. Each call returns a unique unsubscribe function, which can be called to remove that specific listener. Generally you won't need to unsubscribe at all, as you'll want the subscription to last for the duration of the page. In this common case, you can completely ignore the return value. However, in advanced use cases where products are added and removed from a page dynamically, it is possible to unsubscribe. Calling an unsubscribe function more than once is a no-op.

Troubleshooting

Something not working? Always check your browser's JavaScript console for informative error messages provided by GLOW.

Methods

• glow.subscribe.isProductInShow({ brandId, productId, listener })
• glow.subscribe.isShowPopulated({ listener })

Reference

glow.subscribe.isProductInShow({ brandId, productId, listener })

subscribe.isProductInShow isProductInShow

Notifies you about whether a specific product is in the user's show or not, determined by the brandId and productId, and monitors all changes over time. You can use this for your product UI to reflect the in-show status to the user. E.g. if false, display an "Add to Show" button, if true display that the product has already been added.

listener is expected to be a callback function that will be invoked with a single argument: a boolean that is true if the product exists in the user's show, and false if it does not.

Example:

glow.subscribe.isProductInShow({ brandId: 'brand_id', productId: 'product_id', listener: (inShow) => {
  if (inShow) {
    // update UI, e.g. disable add button
  } else {
    // update UI, e.g. enable add button
  }
}});

glow.subscribe.isShowPopulated({ listener })

subscribe.isShowPopulated isShowPopulated

Notifies you about whether the user has any items in their show, which can be a nice signal for displaying a "watch show" button or similar, and hiding it if the show is empty. If the user has saved multiple shows, this will behave as if there is always a populated show, even if the current show is empty. This guarantees the user can always access their other shows.

listener is expected to be a callback function that will be invoked with a single argument: a boolean that is true if the user has products in their show, and false if their show is empty.

Example:

glow.subscribe.isShowPopulated({ listener: (isShowPopulated) => {
  if (isShowPopulated) {
    // update UI, e.g. display "watch show" button
  } else {
    // update UI, e.g. hide "watch show" button
  }
}});