DocsDocsSDKs

SearchProductVariantSelector

React SDK guidance for SearchProductVariantSelector.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use SearchProductVariantSelector when the page wants the SDK to resolve a search-backed product and derive the existing VariantSelector axes, selected variant, and option switching behavior for you.

It is the fast path for:

  • PDPs backed by Search GraphQL product data
  • quick-view or mini-PDP shells that already receive a search product record
  • apps that want the existing selector UI without rebuilding search-product variant state locally

If the page already owns the variant axes and selected state, stay on VariantSelector instead.

Composition notes

SearchProductVariantSelector keeps the boundary sharp:

  • VariantSelector stays presentational
  • the connected wrapper owns search-product lookup, axis derivation, and best-next-variant selection

source supports the same adoption paths as the connected card:

  • \{ type: "product", product \}
  • \{ type: "slug", slug \}
  • \{ type: "sku", sku \}

Use onSelectedVariantChange when the page needs to react to the selected search variant without taking over the whole selector model. If the page needs direct access to the selected variant state or wants to render a custom PDP shell, drop to useSearchProductVariantSelector().

Provider requirement for slug and SKU lookups

Inline product sources work without an extra search lookup. slug and sku sources need EnadProvider clientConfig=\{...\} so the connected selector can fetch the product first.

Behavior and theming guidance

Because this wrapper renders the standard VariantSelector, the shopper-facing option language, unavailable-state messaging, and control density should match the same presentational rules as the base selector.

Use the connected wrapper when variant resolution is the variable. Use the presentational selector when the axes and selected state are already settled outside the SDK.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/search.
  • Playground route: /sandbox?component=SearchProductVariantSelector.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

  • Search-backed components require provider, client, and search configuration before examples become live-data copy/paste snippets.

SearchProductVariantSelector

# SearchProductVariantSelector > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/search`. - Live playground: [/components/commerce/search-product-variant-selector](https://sdk.enad.io/components/commerce/search-product-variant-selector). ## When to use it Use `SearchProductVariantSelector` when the page wants the SDK to resolve a search-backed product and derive the existing `VariantSelector` axes, selected variant, and option switching behavior for you. It is the fast path for: - PDPs backed by Search GraphQL product data - quick-view or mini-PDP shells that already receive a search product record - apps that want the existing selector UI without rebuilding search-product variant state locally If the page already owns the variant axes and selected state, stay on `VariantSelector` instead. ## Composition notes `SearchProductVariantSelector` keeps the boundary sharp: - `VariantSelector` stays presentational - the connected wrapper owns search-product lookup, axis derivation, and best-next-variant selection `source` supports the same adoption paths as the connected card: - `{ type: "product", product }` - `{ type: "slug", slug }` - `{ type: "sku", sku }` Use `onSelectedVariantChange` when the page needs to react to the selected search variant without taking over the whole selector model. If the page needs direct access to the selected variant state or wants to render a custom PDP shell, drop to `useSearchProductVariantSelector()`. > **Provider requirement for slug and SKU lookups** > > Inline `product` sources work without an extra search lookup. `slug` and `sku` sources need > `EnadProvider clientConfig={...}` so the connected selector can fetch the product first. ## Behavior and theming guidance Because this wrapper renders the standard `VariantSelector`, the shopper-facing option language, unavailable-state messaging, and control density should match the same presentational rules as the base selector. Use the connected wrapper when variant resolution is the variable. Use the presentational selector when the axes and selected state are already settled outside the SDK. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/search`. - Playground route: /sandbox?component=SearchProductVariantSelector. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes - Search-backed components require provider, client, and search configuration before examples become live-data copy/paste snippets.