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.

It is the fast path for:

• related-product sections driven by a known SKU list
• recommendation rails driven by category URLs, tag keys, or brand slugs
• 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 the family boundary clear:

• ProductRecommendations stays the presentational section shell
• nested ProductCard instances stay presentational product cards
• the connected wrapper owns the Search GraphQL lookup and the 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>;

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.