> ## 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.

# Featured Product

> Cookbook — produto selecionado no schema, resolvido via SDK, add to cart.

> Quero destacar um produto escolhido no Editor com botão de carrinho. Como implementar?

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

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

***

## Contratos utilizados

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Data Contract](https://docs-loja.usecorvex.com.br/reference/contracts/data.md) — `defineSectionData`
* [Product Contract](https://docs-loja.usecorvex.com.br/reference/contracts/product.md)
* Field [`product`](https://docs-loja.usecorvex.com.br/schema/fields/product) — valor persistido = **UUID** (editor)
* [Cart Contract](https://docs-loja.usecorvex.com.br/reference/contracts/cart.md) — `useCorvexCart().addItem`

O picker grava o id. `storefront.products.get(id)` aceita id ou handle. `getByHandle` só chama `get`.

***

## Objetivo

1. Merchant seleciona produto no Inspector (`type: product`).
2. Schema persiste **referência** em `settings.product` (UUID no editor).
3. `defineSectionData` resolve ref → `Product`.
4. Section renderiza título, preço, imagem e chama `addItem`.

***

## Fluxo de dados

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
settings.product  (string — UUID no editor)
        ↓
storefront.products.get(ref)   ← canônico (schema + Product Card)
        ↓
data.product  (Product público)
        ↓
UI + useCorvexCart().addItem(product, 1)
```

**Não** trate `settings.product` como objeto `Product`.

***

## Schema + data

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { defineSection, defineSectionData } from '@corvex/theme-sdk';

export const schema = defineSection({
  name: 'Produto em destaque',
  category: 'Produtos',
  data: ['product'],
  settings: [
    { id: 'product', type: 'product', label: 'Produto' },
    …
  ],
});

export const data = defineSectionData(async ({ storefront, settings }) => {
  const ref = settings.product;
  if (!ref) return { product: null };
  try {
    const product = await storefront.products.get(ref);
    return { product };
  } catch {
    return { product: null };
  }
});
```

Campos usados na UI (contrato público): `title`, `price.formatted`, `featuredImage.url`, `availableForSale`.

Não use `stock`, `metafields` ou outros campos do mapper — ver [Product Contract](https://docs-loja.usecorvex.com.br/reference/contracts/product.md).

***

## Add to cart

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { useCorvexCart } from '@corvex/theme-sdk';

const { addItem, mutating } = useCorvexCart();

<button
  type="button"
  disabled={!product.availableForSale || mutating}
  onClick={() => addItem(product, 1)}
>
  Adicionar ao carrinho
</button>
```

***

## Empty / fallback

| Estado | UI |
| - | - |
| Sem produto selecionado | “Selecione um produto no inspector” |
| Id sem produto | “Produto não encontrado” |
| `availableForSale: false` | Botão desabilitado |

***

## Comportamento no Editor

* Field `product`: modal de seleção; valor salvo = handle.
* Preview de dados: após salvar draft, `data.product` populado no runtime.

***

## Checklist

* [ ] `schema.data: ['product']` + `defineSectionData`
* [ ] `products.get(settings.product)`
* [ ] UI só com campos do [Product Contract](https://docs-loja.usecorvex.com.br/reference/contracts/product.md)
* [ ] `useCorvexCart().addItem(product, 1)`
* [ ] `corvex validate` passa

Código completo: `seu tema (adaptado do cookbook)`.


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