DocsDocsSDKs

SearchProductRecommendations

React SDK guidance for SearchProductRecommendations.

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 SearchProductRecommendations when the page wants the SDK to resolve the recommendation products and then render them through the standard ProductRecommendations section family. Confirm provider setup before shipping because this is a connected wrapper.

Use it for related-product sections driven by a known SKU list, or for recommendation rails driven by category URLs, tag keys, or brand slugs. It also fits pages that want the existing recommendation shell without manually wiring the search queries first. If the page already owns the recommendation products, stay on ProductRecommendations instead.

Composition notes

SearchProductRecommendations keeps a clear boundary: ProductRecommendations remains the section shell, ProductCard renders each item, and the connected wrapper owns the Search GraphQL lookup plus product-to-card mapping.

The source input supports multiple connected recommendation strategies:

  • skus
  • categoryUrls
  • tagKeys
  • brandSlugs

productCard lets you tune the nested card presentation, and resolveProductHref is where storefront navigation should be attached.

If you need custom loading, error, or empty-state handling around the section, drop to useSearchProductRecommendations() and render ProductRecommendations yourself.

import { EnadProvider } from '@enadhq/enad-react-sdk';
import { SearchProductRecommendations } from '@enadhq/enad-react-sdk/client/search';

<EnadProvider clientConfig={clientConfig}>
  <SearchProductRecommendations
    title="You may also like"
    source={{
      type: 'skus',
      skus: ['OAK-TABLE-001', 'OAK-CHAIR-006', 'BRASS-LAMP-005'],
    }}
    limit={3}
    showArrows
    resolveProductHref={(product) => `/products/${product.slug}`}
    productCard={{ layout: 'gallery', imageBehavior: 'single' }}
  />
</EnadProvider>;

Runtime requirement

This connected family needs EnadProvider clientConfig=\{...\} so it can resolve search-backed products. The live playground page keeps this one code-first because a trustworthy live preview would need a real Search runtime connected to the page.

Behavior and theming guidance

The final section still behaves like ProductRecommendations, so keep the merchandising tone, arrows, aside content, and nested card treatment aligned with the presentational family.

Use the connected wrapper when product resolution is the variable. Use the presentational family when the section already has its products and only the recommendation shell varies.

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=SearchProductRecommendations.
  • 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.

SearchProductRecommendations

# SearchProductRecommendations > 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-recommendations](https://sdk.enad.io/components/commerce/search-product-recommendations). ## When to use it Use `SearchProductRecommendations` when the page wants the SDK to resolve the recommendation products and then render them through the standard `ProductRecommendations` section family. Confirm provider setup before shipping because this is a connected wrapper. Use it for related-product sections driven by a known SKU list, or for recommendation rails driven by category URLs, tag keys, or brand slugs. It also fits pages that want the existing recommendation shell without manually wiring the search queries first. If the page already owns the recommendation products, stay on `ProductRecommendations` instead. ## Composition notes `SearchProductRecommendations` keeps a clear boundary: `ProductRecommendations` remains the section shell, `ProductCard` renders each item, and the connected wrapper owns the Search GraphQL lookup plus product-to-card mapping. The `source` input supports multiple connected recommendation strategies: - `skus` - `categoryUrls` - `tagKeys` - `brandSlugs` `productCard` lets you tune the nested card presentation, and `resolveProductHref` is where storefront navigation should be attached. If you need custom loading, error, or empty-state handling around the section, drop to `useSearchProductRecommendations()` and render `ProductRecommendations` yourself. ```tsx import { EnadProvider } from '@enadhq/enad-react-sdk'; import { SearchProductRecommendations } from '@enadhq/enad-react-sdk/client/search'; `/products/${product.slug}`} productCard={{ layout: 'gallery', imageBehavior: 'single' }} /> ; ``` > **Runtime requirement** > > This connected family needs `EnadProvider clientConfig={...}` so it can resolve search-backed > products. The live playground page keeps this one code-first because a trustworthy live preview > would need a real Search runtime connected to the page. ## Behavior and theming guidance The final section still behaves like `ProductRecommendations`, so keep the merchandising tone, arrows, aside content, and nested card treatment aligned with the presentational family. Use the connected wrapper when product resolution is the variable. Use the presentational family when the section already has its products and only the recommendation shell varies. ## 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=SearchProductRecommendations. - 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.