Documentação

Template Padrão

Awake - Modelo Padrão para o Storefront SSR

Desenvolvida como um template inicial para uso com o Storefront SSR, a Awake oferece exemplos de implementação de todas as principais funcionalidades para sua loja, organizadas em categorias na página inicial e componentes nomeados no projeto, facilitando a personalização e alterações necessárias. O tema é responsivo e alcança uma excelente pontuação no Lighthouse/PageSpeed.

Fique por dentro:

📘

Integração com o Git

Para acessar o repositório do Storefront no Git, siga as instruções detalhadas em Integração com o Repositório (Git).

A Awake será continuamente atualizada com as novidades do Storefront, garantindo sua compatibilidade com as últimas funcionalidades disponíveis. Todo usuário criado no Gitlab receberá automaticamente, além do acesso para edição do template de sua loja, acesso à leitura para o repositório do template padrão, portanto ele sempre estará disponível como referência para o desenvolvimento de novas features.

A Wake Commerce incentiva a contribuição dos usuários para o modelo padrão por meio de Merge Requests a partir de um Fork do projeto. O time de desenvolvimento avaliará as contribuições. Caso você identifique pontos de melhoria ou bugs relacionados ao modelo padrão, pode abrir uma Issue para que a equipe possa investigar e solucionar.

TailwindCSS

Para a estilização do modelo padrão, a Awake utiliza o framework CSS chamado TailwindCSS. O TailwindCSS é um "framework CSS utilitário" que adota o conceito de Atomic CSS, priorizando o uso de classes pequenas com nomes baseados em suas funções visuais. Para obter uma visão geral do framework e suas vantagens, você pode ler o artigo do blog FreeCodeCamp.org

A documentação oficial do framework pode ser acessada em https://tailwindcss.com/docs/installation. Caso você deseje continuar usando-o no seu template, será necessário baixar o CLI do tailwindcss para compilar as alterações de estilo.

O CLI é a aplicação que analisa os arquivos HTML definidos no arquivo tailwind.config.js para gerar o arquivo output.css, que contém somente as classes do framework que foram utilizadas no template. Ao detectar alguma adição ou remoção de classe ao salvar um arquivo, ele automaticamente gera o novo output, garantindo que não sejam incluídos códigos que não serão utilizados.

Faça o download do CLI: Release v3.4.18

Após baixar o CLI, adicione-o às variáveis de ambiente do seu sistema e execute o seguinte comando dentro da pasta do template:

tailwindcss -i ./Assets/CSS/input.css -o ./Assets/CSS/output.css --watch

Esse comando irá analisar o arquivo input.css definido no diretório Assets/CSS e gerar o arquivo output.css, que conterá apenas as classes do TailwindCSS_utilizadas no template. O parâmetro --watch_ permitirá que o CLI detecte automaticamente adições ou remoções de classes e atualize o arquivo de saída conforme você realiza alterações.

Mais detalhes em: https://tailwindcss.com/blog/standalone-cli#get-started

Design Studio no template padrão

O template padrão passou a incluir suporte ao Design Studio, permitindo que lojas criadas a partir da Awake já nasçam com blocos editáveis na home sem necessidade de alterações no código.

Estrutura de pastas adicionada:

  • Sections/ — contém os blocos disponíveis para o CMS. Cada bloco é composto por dois arquivos:
    • <nome-do-bloco>.html — markup e renderização da seção
    • <nome-do-bloco>.schema.json — definição técnica dos campos editáveis exibidos no editor

Configuração de Página (JSON): arquivo que define quais seções são permitidas em cada tipo de página (ex: home.json, hotsite.json).

Section Schema (JSON): arquivo de definição técnica de cada bloco (ex: banner_carousel.schema.json), que descreve os campos editáveis expostos no Design Studio.

Blocos disponíveis por padrão

Os seguintes blocos são disponibilizados neste primeiro momento:

  • Carrossel de banners (banner_carousel) — suporta até 5 banners, com imagem desktop, imagem mobile e link por banner
  • Vitrine de produtos de hotsite (carousel_hotsite) — vitrine alimentada por um hotsite, com título, quantidade de itens por view e cor de fundo
  • Vitrine de lista de produtos (carousel_product_list) — vitrine montada a partir de uma lista de IDs de produtos, com título, quantidade de itens por view e cor de fundo
  • Newsletter (newsletter_signup) — bloco de captura com título, placeholders, texto do botão, cores e imagem de apoio, todos editáveis
  • Footer (footer) — segue o mesmo padrão do componente de rodapé, mas com todos os campos editáveis: atendimento, telefones, links de ajuda, links institucionais, redes sociais e formas de pagamento