pages.json

O arquivo pages.json contém as definições de todas as páginas do site dentro da pasta Pages, na raíz do projeto.
Nela é possível configurar o tipo de página, o arquivo .html dentro de Pages e qual o arquivo .graphql dentro de Queries a ser utilizado, além de customizações.

Estrutura base

A estrutura base é a seguinte:

{ "type": "search", "path": "search.html", "query": "search.graphql" }
AtributoTipoObrigatórioDescrição
typestringsimé o tipo da página. Atualmente existem quatro tipos possíveis:

- search: para página de busca
- product: para página de produto
- hotsite: para página de hotsite
- not_found: para páginas não encontradas
pathstringsimé o arquivo .html dentro da pasta Pages a ser utilizado.
querystringsimé o arquivo .graphql dentro da pasta Queries a ser utilizado.

Propriedade customs (array)

Existe a possibilidade de customizar a página a ser renderizada de acordo com regras específicas. Basta nomear um array customs e inserir as seguintes regras:

Para o tipo hotsite

Para páginas do tipo hotsite é possível inserir um objeto contendo as propriedades:

AtributoTipoObrigatórioDescrição
urlMatchstringnãoExpressão da URL buscada no navegador que dará match para utilizar a regra especificada. É possível utilizar:

- Palavra vazia
- Palavra literal
- * (asterisk) para qualquer coisa digitada
- | (pipe) para representar OU
- Mescla das regras acima
subtypestringnãoPode ser utilizado como regra de match de acordo com subtipo da página de hotsite. Atualmente existem os seguintes subtipos possíveis:

- category: para categorias
- brand: para fabricantes
- portfolio: para portifólios
- buy_list: para lista de compras
priorityintegernãoPrioridade da regra de match. Se o match ocorrer em duas ou mais regras, o critério de desempate será através da maior prioridade.

Propriedades opcionais

  • path
  • query

Caso sejam informados, serão os arquivos .html e .graphql a serem renderizados, respectivamente. Caso não sejam informados, serão renderizados os arquivos especificados nas propriedades path e query principais.

🚧

Atenção

Para fazer sentido a utilização de customs, aconselhamos que utilize pelo menos uma das propriedades opcionais.

Exemplo:

{ "type": "hotsite", "path": "hotsite.html", "query": "hotsite.graphql", "customs": [ { "urlMatch": "", "path": "home.html", "query": "home.graphql" }, { "urlMatch": "listadedesejos", "path": "custom/wishlist.html" }, { "urlMatch": "*", "subtype": "brand", "path": "custom/brands.html", "priority": 10 }, { "urlMatch": "*vans*", "path": "custom/vans.html", "priority": 20 }, { "urlMatch": "outlet*|black-friday", "path": "custom/promo.html" }, { "urlMatch": "mycategory", "subtype": "category", "path": "category.html" } ] }

Para o tipo product

Para páginas do tipo product é possível inserir um objeto semelhante ao de hotsite, mas sem a propriedade subtype, pois é exclusiva de páginas desse tipo.
Existem propriedades extras exclusivas para o tipo product:

  • productIds: um array de IDs de produtos que serão utilizados para dar match e utilizar a regra especificada.
  • categoryIds: um array de IDs de categorias que segue o mesmo intuito de productIds, mas para categorias.

As propriedades opcionais path e query também são válidas e seguem as mesmas regras do tipo hotsite.

Exemplo:

{ "type": "product", "path": "product.html", "query": "product.graphql", "customs": [ { "urlMatch": "kit-pratico*", "path": "custom/custom_product.html", "priority": 1 }, { "productIds": [9, 222], "path": "custom/custom_product.html", "priority": 2 }, { "categoryIds": [473], "path": "custom/custom_product.html", "priority": 10 } ] }