Actions

add-to-cart

• Purpose: an add-to-cart action button. Adds the selected variant (× the product’s quantity) to the cart via window.Shopify.actions.updateCart. Recommended: nest a native <button> - it is the focusable control and the element projects state onto it (best for accessibility). With no nested control the element makes itself the button (role="button", tabindex, Enter/Space).
• Attributes:
  • text-out-of-stock : string = "" - label applied while the variant is sold out.
  • text-unavailable : string = "" - label applied when no variant is selectable.
  • (Applied to the control: a plain-text control gets its text swapped; a control with rich markup gets an aria-label instead, so inner markup isn’t clobbered.)
• Required ancestor / context: storesynk-product (consumes productContext + storeContext).
• Children: recommended a native <button> (the focusable control); plain text also works (the element becomes the button).
• Events: emits sf:add-to-cart (bubbles, composed; detail = { product, variant }).
• State it sets: [ss-loading] (during add) and [ss-out-of-stock] / [ss-unavailable] (mutually exclusive) on itself (CSS hooks); aria-disabled="true" on the focusable control (the nested <button>/<a>, or the element itself) when not purchasable. The SSR transform fills the same state (attributes, aria-disabled, label swap) for the initially selected variant, stashing the authored label in [ss-default-label] (engine-managed - never author it) so the client can restore it when the selection becomes purchasable.

buy-now

• Purpose: a buy-now action button. Sends the buyer straight to a Shopify checkout/cart-permalink URL for the selected variant × quantity. Same control model as add-to-cart - nest a native <button> (recommended) or use the bare element.
• Attributes:
  • text-out-of-stock : string = "" - see add-to-cart.
  • text-unavailable : string = "" - see add-to-cart.
  • payment : string = "" - checkout payment hint forwarded on the cart permalink (dashes become underscores). payment="shop-pay" sends the buyer into Shop Pay’s accelerated flow (?payment=shop_pay); omit for the standard checkout.
• Required ancestor / context: storesynk-product (consumes productContext + storeContext, which supply variant + domain/token).
• Children: recommended a native <button>; plain text also works.
• Events: none emitted.
• State it sets: [ss-loading]/[ss-out-of-stock]/[ss-unavailable] on itself; aria-disabled on the focusable control (same sync logic as add-to-cart).

product-link

• Purpose: turns the element / its <a> children into links to the product page. Sets href="/{path}/{handle}" on every child <a>; if there is no <a>, makes the whole element clickable.
• Attributes:
  • path : string = "products" - base path segment before the handle.
• Required ancestor / context: storesynk-product (consumes productContext for the handle).
• Children: typically one or more <a> (else the element becomes clickable).
• Events / state: none (sets href/cursor).

show-sale-badge

• Purpose: shows/hides a “on sale” badge based on the selected variant’s compare-at price, optionally rendering the discount.
• Attributes:
  • format : "" | "text" | "percentage" | "amount" = "" - ""/text: keep your markup, only show/hide; percentage: write -NN%; amount: write -{money} (the saved amount, needs storeContext).
• Required ancestor / context: storesynk-product (consumes productContext + storeContext).
• Children: your badge markup (preserved for text/"").
• Events: none.
• State it sets: the [ss-on-sale] attribute when discounted; hides itself (display:none, removes it) otherwise.

klaviyo-back-in-stock

• Purpose: a back-in-stock signup form for the currently selected variant. Wires a child <input type="email"> and <button> (or a <form>); on submit it subscribes the email to Klaviyo’s client-side back-in-stock API (company id auto-scraped from the merchant’s onsite Klaviyo script - no server). Part of the optional pixels module (loads with it).
• Attributes: none. Required ancestor / context: storesynk-product (consumes productContext - it needs selectedVariant.id). SSK-102 if placed outside a product.
• Children: an <input type="email"> (required) and a <button> (or wrap them in a <form>).
• Events / state: sets [ss-loading] while submitting, [ss-active] on success, [ss-empty] on failure - style each state as you like (e.g. show a “You’re on the list!” message on [ss-active]). Only meaningful for out-of-stock variants (pair with add-to-cart[ss-out-of-stock]).

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.