Documentação

Novos Tipos de Páginas

Suggest Edits

Estrutura Comum

As novas páginas também são configuradas no arquivo config/pages.json com os seguintes campos:

  • type: Identifica o tipo da página.
  • url: URL base da página (customizável).
  • routes: Lista de rotas específicas, com os seguintes atributos:
    • name: Identificador único da rota.
    • url: Segmento da URL adicionado à URL base.
    • path: Caminho do arquivo HTML renderizado.
    • query: Arquivo GraphQL usado para consultas.
    • authLevel (opcional): Define o nível de autenticação necessário para acessar a rota.
    • authFallback (opcional): Define a URL para redirecionamento, caso o usuário não possua o nível de autenticação necessário.
    • queryStrings (opcional): Utilizado para mapear parâmetros de query string para a query da página.

Exemplos de Configuração por Tipo

Tipo de página checkout

Este tipo é focado em todas as páginas relacionadas ao fechamento de pedido, como carrinho, fechamento e confirmação.

{
  "type": "checkout",
  "url": "checkout",
  "routes": [
    {
      "name": "home",
      "url": "",
      "path": "checkout/checkout.html",
      "query": "checkout/checkout.graphql"
    },
    {
      "name": "complete",
      "url": "complete",
      "path": "checkout/close.html",
      "query": "checkout/close.graphql",
      "authLevel": "New",
      "authFallback": "login"
    },
    {
      "name": "confirmation",
      "url": "confirmation",
      "path": "checkout/confirmation.html",
      "query": "checkout/confirmation.graphql",
      "queryStrings": [
        {
          "name": "checkoutId",
          "type": "Uuid"
        }
      ]
    }
  ]
}

Tipo de página login

Este tipo é destinado à todas as páginas relacionadas ao processo de autenticação do usuário, incluindo login, autenticação, recuperação de senha e cadastro.

{
  "type": "login",
  "url": "login",
  "routes": [
    {
      "name": "simple",
      "url": "",
      "path": "login/simple.html",
      "query": "login/simple.graphql"
    },
    {
      "name": "authenticate",
      "url": "authenticate",
      "path": "login/authenticate.html",
      "query": "login/authenticate.graphql"
    }
    // ...
  ]
}

Tipo de página account

Este tipo é destinado às páginas da conta do usuário, permitindo que os usuários gerenciem suas informações pessoais, visualizem pedidos, alterem senhas, gerenciem endereços, contas correntes e assinaturas.

{
  "type": "account",
  "url": "account",
  "routes": [
    {
      "name": "orders",
      "url": "",
      "path": "account/orders.html",
      "query": "account/orders.graphql",
      "authLevel": "Authenticated",
      "authFallback": "login/authenticate",
      "queryStrings": [
        {
          "name": "orderId",
          "type": "Long"
        }
      ]
    },
    {
      "name": "data",
      "url": "my-data",
      "path": "account/account.html",
      "query": "account/account.graphql",
      "authLevel": "Simple",
      "authFallback": "login/authenticate"
    }
    // ...
  ]
}

Tipo de página partner

Este tipo é destinado às páginas de Parceiro do sistema, permitindo a gestão de portfólio e preços, além de outras funcionalidades específicas para parceiros.

{
  "type": "partner",
  "url": "partner",
  "routes": [
    {
      "name": "client",
      "url": "list",
      "path": "partner/list_client.html",
      "query": "partner/list_client.graphql",
      "authLevel": "Simple",
      "authFallback": "login/authenticate"
    },
    {
      "name": "closed",
      "url": "closed",
      "path": "partner/closed.html"
    }
  ]
}

O campo name nas rotas

O name da rota é utilizado para facilitar a navegação na loja. A estrutura de rotas é mapeada para o campo store.urls.checkout_pages, que está disponível no contexto do Scriban.

Exemplo de Uso:

<a href="{{store.urls.checkout_pages.account.orders}}">Meus pedidos</a>

O campo store.urls.checkout_pages é preenchido com as rotas mapeadas no pages.json, então se mapearmos este campo para um json no ambiente local veremos o seguinte:

{
  "checkout": {
    "home": "https://localhost:5501/checkout",
    "complete": "https://localhost:5501/checkout/complete",
    "confirmation": "https://localhost:5501/checkout/confirmation"
  },
  "login": {
    "simple": "https://localhost:5501/login",
    "authenticate": "https://localhost:5501/login/authenticate",
    "password_recovery": "https://localhost:5501/login/password/recovery",
    "signup": "https://localhost:5501/login/signup",
    "impersonate": "https://localhost:5501/login/impersonate"
  },
  "account": {
    "orders": "https://localhost:5501/account",
    "data": "https://localhost:5501/account/my-data",
    "password": "https://localhost:5501/account/password",
    "addresses": "https://localhost:5501/account/addresses",
    "checking_account": "https://localhost:5501/account/checking_account",
    "subscriptions": "https://localhost:5501/account/subscriptions"
  }
}

No ambiente de produção, as URLs refletirão o domínio de produção configurado.

O campo authLevel

O campo authLevel é utilizado para definir o nível de autenticação necessário para acessar uma rota específica. Ele controla como as rotas são acessadas e redireciona o usuário, caso não atenda aos critérios definidos. Existem três opções disponíveis para o campo authLevel, que são:

  • New: Indica que o usuário iniciou um cadastro, preenchendo informações básicas como e-mail ou CPF, mas ainda não concluiu o processo de autenticação. Este nível pode ser utilizado para processos de onboarding ou para páginas de finalização de cadastro.
  • Simple: Indica que o login foi realizado respondendo a perguntas simples de validação. Esse nível é utilizado para acessos que não exigem autenticação completa, mas verificam informações básicas do usuário.
  • Authenticated: Indica que o login foi realizado com credenciais completas, como usuário e senha, ou através de um provedor de login social. Este nível é recomendado para acessos que exigem maior segurança ou dados sensíveis.

O Campo authFallback

Quando o usuário não possui o nível de autenticação exigido pela rota, ele será redirecionado para a url definida em authFallback.

Exemplo de Redirecionamento:
Se a rota exige AUTHENTICATED e o usuário está autenticado apenas no nível SIMPLE, ele será redirecionado para a URL definida no authFallback.

{
  "name": "orders",
  "url": "",
  "path": "account/orders.html",
  "authLevel": "Authenticated",
  "authFallback": "login/authenticate"
}

Neste exemplo, usuários não autenticados no nível AUTHENTICATED serão redirecionados para a página de autenticação definida pela rota login/authenticate.

Updated about 1 month ago