​

Search Results

Quero exibir resultados na página /search?q=…. Como implementar?

​

Contratos utilizados

• Data Contract — PageContextMap.search
• Page Contract — template search
• Product Contract — ProductSummary nos cards
• @corvex/theme-sdk — usePage('search')
• @corvex/runtime — SectionChrome
• Snippet reutilizado: @corvex/snippets/product-card

​

API pública de busca

​

Fluxo de dados

URL /search?q=camiseta
        ↓
Runtime resolve page context
        ↓
usePage('search') → { searchQuery, results: { nodes } }
        ↓
Grid de ProductCard (snippet)

​

Section (padrão canônico)

import { usePage } from '@corvex/theme-sdk';
import ProductCard from '@corvex/snippets/product-card';

const { searchQuery, results } = usePage('search');
const nodes = results?.nodes ?? [];

<h1>{searchQuery ? `Busca: “${searchQuery}”` : 'Busca'}</h1>

​

Formulário de busca (GET)

<form action="/search" method="get" role="search">
  <input name="q" type="search" defaultValue={searchQuery || ''} />
</form>

​

Schema

​

Template obrigatório

{
  "type": "search",
  "sections": {
    "main": { "type": "search-results", "settings": {} }
  },
  "order": ["main"]
}

​

Edge cases

​

Separação com Product Card

• Search Results — contexto de página, produtos da busca
• Product Card — product_list manual no inspector (storefront.products.get)

​

Checklist

• usePage('search') — não storefront.search duplicado
• results?.nodes com fallback []
• Product Card snippet para UI
• Template search.json no tema
• corvex validate .

​

Veja também

• Product Card — snippet reutilizado
• Data Contract — PageContextMap
• Golden Path — search section