PurchaseActions
Public family root for quantity, primary CTA, stock messaging, and purchase-adjacent extensions on a PDP.
Best for
Import
import { PurchaseActions } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use PurchaseActions when the app wants the supported quantity-and-CTA family, but not the higher-level ProductHeroSection wrapper.
That usually means:
- the storefront wants to own the exact action grouping
- the quantity control and CTA layout need lower-level composition control
- the page needs stock-state copy, size-guide links, notify-me buttons, or similar purchase-adjacent extensions without baking vendor-specific behavior into the SDK contract
Public anatomy
PurchaseActions is the action root of the PDP family.
Public parts:
PurchaseActions.HelperPurchaseActions.RowPurchaseActions.QuantityPurchaseActions.PrimaryPurchaseActions.ExtensionsPurchaseActions.SecondaryPurchaseActions.Footer
Extension guidance
Treat size guides, back-in-stock prompts, find-in-store links, and similar flows as passed-in content.
That means:
- the SDK owns the purchase layout surface
- the app owns vendor-specific logic and integrations
- the page can swap or remove extensions without changing the family contract
If the app needs a fully bespoke purchase area, drop down to the compound parts or provide custom actions.content through ProductHeroSection.
How it differs from ProductHeroSection
ProductHeroSection= section-first fast pathPurchaseActions= family root for lower-level purchase-action composition
Examples
Live examples you can edit directly in the sandbox.
Family-level purchase actions
Use PurchaseActions when the page wants the supported quantity and CTA family directly instead of starting from ProductHeroSection.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.