Contexto de página

Dados que a Corvex injeta automaticamente conforme o template renderizado.

Page Context

Quando a plataforma renderiza /products/camiseta-corvex, o template de produto já recebe o produto atual.

import { usePage } from '@corvex/theme-sdk';

export default function ProductTemplate() {
  // O texto 'product' não filtra o retorno. O hook devolve o contexto da página atual.
  const { product } = usePage('product');

  return (
    <>
      <h1>{product.title}</h1>
      <span>{product.price.formatted}</span>
    </>
  );
}

Não faça isso em uma página de produto:

// ❌ redundante — a plataforma já resolve o contexto
const product = await storefront.products.getByHandle(params.handle);

Mapa de contextos

Template	Rota exemplo	Contexto
Home	/	page.shop
Produto	/products/:handle	page.product, page.reviews_summary, page.recommendations
Coleção/Categoria	/collections/:handle	page.collection, page.products
Busca	/search?q=...	page.searchQuery, page.results
Carrinho	/cart	page.cart
Blog	template blog ou ?blog=news	page.blog, page.articles
Artigo	template artigo ou ?blog=news&article=slug	page.blog, page.article
Página institucional	/pages/sobre ou template page	page.page

Provider interno

O runtime envolve seções com PageContextProvider:

<PageContextProvider pageType="product" data={{ product }}>
  <ProductInfoSection />
</PageContextProvider>

Sections podem ler via usePage() ou receber page como prop.

Sections restritas por template

export const schema = defineSection({
  name: 'Informações do produto',
  enabledOn: ['product'],
});

Se enabledOn inclui 'product', a section não aparece no picker da homepage.

Coleção vs categoria

No backend Corvex, coleções de merchandising usam a API de categorias (/categories).

No SDK:

• page.collection — contexto de template collection
• storefront.collections.* — alias de storefront.categories.*

Preview no editor (URL)

No editor, além de ?theme=<storeThemeId> e ?version=<themeVersionId>, a URL persiste o estado do preview:

Param	Exemplo	Restaura
page	?page=product	Template/página ativa (home, product, collection, search, …)
product	?product=<uuid ou handle>	Produto exibido no preview PDP
collection	?collection=<uuid ou handle>	Coleção no preview de collection
q	?q=tenis	Termo de busca no preview
carouselPage	?carouselPage=2	Página do carrossel (sections que sincronizam com o editor)

Exemplos:

/?theme=618507ca-...&version=264f41fe-...&page=home&carouselPage=1
/?theme=618507ca-...&version=264f41fe-...&page=product&product=uuid-do-produto

A URL atualiza automaticamente ao trocar de página, escolher produto/coleção no toolbar ou navegar carrosséis (quando a section usa useEditorPreviewState via @corvex/runtime).

Aliases aceitos na leitura: productId, category, query (em vez de q).

Referências

• Product resource
• Regras de escopo