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

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

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// ❌ 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`:

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
<PageContextProvider pageType="product" data={{ product }}>
  <ProductInfoSection />
</PageContextProvider>
```

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

## Sections restritas por template

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/data/resources/product.md)
* [Regras de escopo](https://docs-loja.usecorvex.com.br/data/scope-rules.md)


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