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

---

Contratos utilizados

• Section Contract
• Data Contract — defineSectionData
• Product Contract
• Field product — valor persistido = UUID (editor)
• Cart Contract — 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

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

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.

---

Add to cart

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
• useCorvexCart().addItem(product, 1)
• corvex validate passa

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