Home
Examples

Notify-me (back in stock)

Copy-paste back-in-stock signup examples — drop-in custom element, one-call renderer, modal, inline form, and React.

Let shoppers join the waitlist for a sold-out variant. Every example below uses the Storefront SDK — load it with your shop domain and public Storefront API token. A signup needs both variant-id and product-id (the API rejects it otherwise).

<script
  src="https://cdn.jsdelivr.net/npm/@artossoftware/stoq-sdk@0/dist/stoq.min.js"
  data-shop="my-store.myshopify.com"
  data-storefront-token="your-public-storefront-api-token"
  defer></script>

Drop-in: the <stoq-notify-me> element

Zero JavaScript. The script tag above auto-registers the element; drop it where you want the button (it hides itself when signups are disabled for the shop):

<stoq-notify-me
  variant-id="43900910010503"
  product-id="7813090115847"
  label="Notify me when available"></stoq-notify-me>

Change variant-id (e.g. when the shopper picks another size) and it re-renders itself — no JS. Add expanded to show the email field immediately.

One call: renderNotifyMe

When you control the JS, render a button into your own container:

<div id="notify"></div>
<script>
  window.addEventListener('stoq:loaded', () => {
    Stoq.renderNotifyMe(
      { id: 43900910010503, availableForSale: false },
      { container: '#notify', productId: 7813090115847 }
    )
  })
</script>

Open STOQ's notify-me modal (texts/colors default to the merchant's STOQ design settings):

Stoq.openModal({
  variantId: 43900910010503,
  productId: 7813090115847,   // required
  productTitle: 'Trail Runner',
  variantTitle: '43 / Blue',
  prefill: { email: customerEmail },   // optional
})

Render the same form inside your own element instead of a modal:

Stoq.openInlineForm({ container: '#notify-me', variantId, productId })
// Stoq.removeInlineForm() to tear it down

Roll your own

Submit a signup directly and build any UI you like:

const result = await Stoq.client.createSignup({
  variantId: 43900910010503,
  productId: 7813090115847,
  email: 'shopper@example.com',
})
if (result.ok) {
  // subscribed — `stoq:restock-modal:submitted` fired on window
}

React / Hydrogen

import { StoqNotifyMeButton } from '@artossoftware/stoq-sdk/react'

<StoqNotifyMeButton variantId={variant.id} productId={product.id} />

StoqNotifyMeButton expands into an inline email form and creates the signup. It hides itself when signups are disabled, but is not gated on stock — gate it on your own data, e.g. render it only when !variant.availableForSale. For full control, build on the useStoqSignup() / useStoqVariant() hooks.

Note

Events fire on window for analytics: stoq:restock-modal:opened, :closed, :submitted.

Built withSourcey