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:

JSON

{
    "type": "search",
    "path": "search.html",
    "query": "search.graphql"
}

Atributo	Tipo	Obrigatório	Descrição
type	string	sim	é 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
path	string	sim	é o arquivo .html dentro da pasta Pages a ser utilizado.
query	string	sim	é 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:

Atributo	Tipo	Obrigatório	Descrição
urlMatch	string	não	Expressã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
subtype	string	não	Pode 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
priority	integer	não	Prioridade 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:

JSON

{
    "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:

JSON

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

Pages no Storefront 2.0

Com o lançamento do Storefront 2.0, em que o checkout também é altamente customizável, foi incluído outros tipos de páginas dentro do pages.json as quais podem ser consultadas por meio desta documentação.