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:

• Loja em produção: https://awake.fbits.store
• Repositório do projeto: https://git.fbits.net/stores/awake

📘

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: https://github.com/tailwindlabs/tailwindcss/releases

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

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