> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Recommendations

> Cookbook — recomendações na PDP com storefront.recommendations.list e Product Card.

> Quero "Você também pode gostar" na página de produto. Como implementar?

Referência: `seu tema (adaptado do cookbook)`

Índice: [Cookbooks](https://docs-loja.usecorvex.com.br/cookbook/overview.md)

***

## Contratos utilizados

* [Data Contract](https://docs-loja.usecorvex.com.br/reference/contracts/data.md) — `recommendations` data key
* [Product Contract](https://docs-loja.usecorvex.com.br/reference/contracts/product.md) — `ProductSummary` nos cards
* [recommendations.list](https://docs-loja.usecorvex.com.br/data/queries/recommendations-list.md)
* `@corvex/theme-sdk` — `defineSectionData`, `storefront.recommendations.list`
* Snippet: `@corvex/snippets/product-card`

***

## API pública

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
const result = await storefront.recommendations.list({
  product: page.product,      // ResourceRef — produto da PDP
  first: 4,                   // o cliente repassa; não corta em 1–10
  intent: 'related',          // 'related' | 'complementary'
});
```

**Retorno (`RecommendationListResult`):**

| Campo | Uso |
| - | - |
| `products.nodes` | `ProductSummary[]` para o grid |
| `meta.count` | Se `0`, **não renderize** a section |
| `intent` | Tipo efetivo da resposta |

***

## Fluxo de dados

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
PDP — page.product (contexto de URL)
        ↓
defineSectionData → storefront.recommendations.list({ product: page.product })
        ↓
data.recommendations.products.nodes
        ↓
Grid ProductCard
```

**Produto base:** sempre `page.product` na PDP — **não** use field `product` do inspector.

***

## Schema

| Setting | Uso |
| - | - |
| `relatedTitle` | Título para `intent: related` |
| `complementaryTitle` | Título para `intent: complementary` |
| `intent` | `related` ou `complementary` |
| `limit` | Quantidade (2–8 no cookbook) |
| `showSaleBadge` | Badge nos cards |
| `columns` | Colunas do grid |

`enabledOn: ['product']` · `data: ['recommendations', 'product']`

***

## Renderização condicional

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
if (!data.recommendations?.meta?.count && !isEditing) {
  return null;
}
```

Na vitrine, section oculta quando backend retorna zero recomendações.

No editor, placeholder ajuda o merchant a posicionar a section.

***

## intent

| Valor | UX típica | Backend |
| - | - | - |
| `related` | "Você também pode gostar" | co\_purchase → category → … |
| `complementary` | "Combine com" | cross-sell por categoria |

***

## Separação com Product Card

| Cookbook | Fonte de produtos |
| - | - |
| Product Card | `product_list` manual → `products.get` |
| Search Results | `usePage('search').results` |
| **Product Recommendations** | `recommendations.list(page.product)` |

***

## Checklist

* [ ] `product: page.product` — não settings.product
* [ ] `meta.count === 0` → `return null` na vitrine
* [ ] Product Card snippet para UI
* [ ] Section só em `enabledOn: ['product']`
* [ ] `corvex validate .`

***

## Veja também

* [Product Card](https://docs-loja.usecorvex.com.br/cookbook/product-card.md)
* [Featured Product](https://docs-loja.usecorvex.com.br/cookbook/featured-product.md) — produto único + `addItem`
* [recommendations.list query doc](https://docs-loja.usecorvex.com.br/data/queries/recommendations-list.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.