Documentação

Componentes Fechados

Suggest Edits

Os componentes fechados são trechos considerados críticos que permanecem sob controle da Wake. Esses trechos podem incluir componentes, snippets, queries e scripts JavaScript, e são mantidos em um repositório dedicado chamado wake-components. Todos os usuários com acesso ao Git têm permissão para acessar esse repositório.

Por padrão, os componentes fechados utilizam o prefixo wake_ para facilitar a identificação nos templates.

O repositório wake-components é versionado por meio de branches. Para selecionar uma versão específica a ser utilizada, é necessário definir a configuração no arquivo settings.json da seguinte forma:

"wake_components_version": "v1"

Caso nenhuma versão seja especificada no settings.json, será utilizada, por padrão, a última versão estável disponível (sem o sufixo -beta).

Os componentes fechados garantem que manutenções, melhorias e correções de bugs sejam propagadas de forma simplificada para o template de todas as lojas.

Estilização

Os estilos CSS dos componentes fechados podem ser personalizados diretamente no repositório da loja, utilizando Tailwind CSS.

Nos templates do Checkout SSR, alguns arquivos CSS são adicionados por padrão, como: input_checkout.css, input_account.css, input_login.css e input_partner.css. Esses arquivos utilizam a diretiva @apply para aplicar customizações de Tailwind em classes utilizadas nos componentes fechados.

Exemplo de estilização:

.wake-checkout-header {
  @apply flex w-full border-b pb-4 mb-6;
}

Essa classe é aplicada no componente fechado wake_checkout_header da seguinte forma:

<div class="wake-checkout-header">
  <div>
    <a href="/">
      <img
        src="{{store.urls.static_img}}logo.svg?theme={{store.theme}}&v={{store.last_modified}}"
        alt="logo"
        width="128"
        height="13"
      />
    </a>
    <div class="security">
      <img
        src="{{store.urls.static_img}}checkout/secure.svg?theme={{store.theme}}&v={{store.last_modified}}"
        alt="ícone de segurança"
        width="20"
        height="20"
      />
      AMBIENTE 100% SEGURO
    </div>
  </div>
</div>

Para continuar personalizando componentes fechados com Tailwind, deve-se executar o comando para compilar o CSS, mapeando o arquivo de entrada para o arquivo de saída:

tailwindcss.exe -i Assets/css/input_checkout.css -o Assets/css/output_checkout.css --watch

Estilização sem Tailwind

Caso você prefira não utilizar o Tailwind para estilizar as páginas, é possível editar diretamente o arquivo CSS de saída (output_checkout.css). Isso elimina a necessidade de compilar o arquivo de entrada (input_checkout.css) com o Tailwind, permitindo ajustes diretamente no código final de estilo.

Customização

A customização dos componentes fechados pode ser feita de duas formas principais:

1. Substituição Completa

Na substituição completa, você opta por não utilizar o componente Wake em sua página, criando uma implementação totalmente nova.
Por exemplo, considere a hierarquia fictícia de componentes de checkout:

wake_checkout (componente pai)
├── wake_checkout_header
├── wake_checkout_steps
│   ├── wake_checkout_cart
│   ├── wake_checkout_address
│   └── wake_checkout_payment
└── wake_checkout_footer

Ao optar pela substituição completa:

  • Você não utiliza o wake_checkout
  • Precisa reimplementar todos os subcomponentes
  • Tem total controle sobre a estrutura e funcionamento
  • Perde todas as atualizações automáticas dos componentes

Exemplo de Substituição

<!-- Ao invés de usar: {{ wake_checkout }} -->
<div class="custom-checkout">
    {{ custom_checkout_header }}
    <div class="custom-steps">
        {{ custom_checkout_cart }}
        {{ custom_checkout_address }}
        {{ custom_checkout_payment }}
    </div>
    {{ custom_checkout_footer }}
</div>

2. Sobrescrita de Componentes

Na sobrescrita de componentes, você mantém o componente pai Wake e customiza apenas componentes específicos dentro da hierarquia.

Usando o mesmo exemplo fictício de checkout:

wake_checkout (mantido)
├── wake_checkout_header (sobrescrito)
├── wake_checkout_steps (mantido)
│   ├── wake_checkout_cart
│   ├── wake_checkout_address (sobrescrito)
│   └── wake_checkout_payment
└── wake_checkout_footer

Neste caso:

  • O wake_checkout continua gerenciando o fluxo geral
  • Você sobrescreve apenas os componentes que precisam de customização
  • Mantém as atualizações automáticas dos componentes não sobrescritos
  • Preserva a estrutura e integração original

Processo de Sobrescrita

Identificando Componentes Disponíveis

O repositório wake-components contém todos os arquivos necessários para o funcionamento dos componentes Wake, incluindo:

  • Arquivo Configs/components.json com a lista completa de componentes
  • Arquivos HTML dos componentes
  • Queries GraphQL
  • Scripts javascript
  • Snippets

Por exemplo, no components.json você encontrará a definição dos componentes:

[
  {
    "name": "wake_checkout_header",
    "path": "checkout/wake_checkout_header.html",
    "params": [],
    "availableInAllPages": true
  }
]

Implementando a Sobrescrita

Para sobrescrever um componente Wake, siga estes passos:

  1. Crie seu arquivo HTML customizado (ex: checkout/custom_wake_checkout_header.html)
  2. No arquivo Configs/components.json da sua loja, mantenha o mesmo name do componente original
  3. Atualize o path para apontar para seu arquivo customizado:
[
  {
    "name": "wake_checkout_header",     // Nome original mantido
    "path": "checkout/custom_wake_checkout_header.html",  // Novo caminho
    "params": [],
    "availableInAllPages": true
  }
]

O storefront identificará a sobrescrita e utilizará sua versão customizada no lugar do componente Wake original, mantendo todos os outros parâmetros e configurações inalterados.


❗️

Atenção

A customização de componentes Wake deve ser considerada apenas em casos excepcionais, pois:

  • Perde-se o suporte automático das atualizações
  • Não se beneficia de correções de bugs futuras
  • Requer manutenção manual das funcionalidades

Updated 5 days ago