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
        }
    ]
}