Home
Examples

A complete product page

Branch between in-stock, preorder, and notify-me — and keep it in sync as the shopper switches variants.

The real job: for the selected variant, show add-to-cart (in stock), preorder (sold out but on a plan), or notify-me (sold out, no plan) — and update when the shopper picks another variant. Uses the Storefront SDK.

Decide what to show

const variant = { id, availableForSale, currentlyNotInStock } // from your product query
const state = await Stoq.client.getVariantState(variant)

if (state.isPreorder) {
  // sold out, but a preorder plan applies → preorder widget
} else if (!variant.availableForSale && Stoq.client.signupsEnabled) {
  // sold out, no plan → notify-me
} else {
  // in stock → your normal add-to-cart
}

Vanilla: one widget that follows the variant <select>

The drop-in widget handles all three states and re-binds to the size selector with watch — no JS:

<select name="id">
  <option value="43900910010503">43 / Blue</option>
  <option value="43900910043271">44 / Blue</option>
</select>

<stoq-preorder-widget
  product-id="7813090115847"
  watch="select[name=id]"
  notify-me-fallback></stoq-preorder-widget>

<script>
  document.addEventListener('stoq:add-to-cart', (e) => addToCart(e.detail.line))
</script>

Changing the <select> copies its value into variant-id, and the widget re-renders itself for the new variant — preorder, notify-me, or nothing, automatically.

React / Hydrogen

In a loader, read the variant (with availableForSale / currentlyNotInStock) from the Storefront API, then:

import { StoqProvider } from '@artossoftware/stoq-sdk/react'
import { useStoqVariant } from '@artossoftware/stoq-sdk/react'
import { StoqPreorderButton, StoqNotifyMeButton } from '@artossoftware/stoq-sdk/react'

function BuyBox({ variant, product }) {
  const state = useStoqVariant(variant) // null while loading
  if (!state) return null

  if (state.isPreorder) return <StoqPreorderButton variant={variant} />
  if (!variant.availableForSale) return <StoqNotifyMeButton variantId={variant.id} productId={product.id} />
  return <AddToCartButton variant={variant} />
}

// Wrap your app once with the public token:
// <StoqProvider shop="my-store.myshopify.com" storefrontToken={PUBLIC_STOREFRONT_API_TOKEN}>…</StoqProvider>

useStoqVariant re-derives on the ready event, on variant change, and after refresh(), so the buy box stays correct as the shopper switches options.

Note

Adding to cart in Hydrogen: a preorder line carries a sellingPlanId — pass StoqPreorderButton's line (or useStoqCartLine(variant)) to the Storefront Cart API cartLinesAdd. The theme embed's button-mutation trick doesn't work in React SSR; that's why the SDK gives you the line.

Built withSourcey