eduilson / store-framework Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://lab.github.com/vtex-trainings/store-framework
Home Page: https://lab.github.com/vtex-trainings/store-framework
Antes de começarmos a colocar as mãos na massa vamos passar por alguns conceitos importantes que serão recorrentemente referenciados daqui pra frente.
O Store Framework é uma ferramenta commerce low-code de construção de frentes de loja únicas e customizadas.
O fluxo de construção se dá pela customização de um tema, que pode ser trabalhado em diferentes workspaces sem que o ambiente de produção seja impactado.
Um tema é, essencialmente, um arranjo de blocos e suas posições. Nele são definidas todas as customizações, posições e estilos de cada um dos blocos que o compõem. Também é possível declarar novas páginas em um tema que, futuramente, podem representar páginas institucionais ou landing pages promocionais (dia das mães, black friday, cyber monday). O resultado final de um tema e o conteúdo que o compõe é a frente de uma loja.
Os blocos são a abstração mínima no Store Framework. Eles declaram pequenas peças que compõem o layout de uma loja. Por mais que pareçam simples, os blocos tem alto poder de customização, fazendo com que design complexos sejam possíveis de ser alcançados. Há quatro níveis de customização para blocos:
Ambientes de trabalho protegidos que representam uma cópia bem próxima do está montado em produção, possibilitando a evolução de temas sem que nada na loja seja afetado.
Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏
É importante estabelecer que este não é um curso expositivo. O seu objetivo é ensinar os participantes sobre o Store Framework do VTEX IO a partir de atividades práticas. Por isso, para que se consiga avançar, é preciso que um pouco do seu tempo e dedicação sejam investidos.
No começo do curso você recebeu um repositório com código mínimo e queremos que, ao completar todas as tarefas, você o tenha transformado em uma loja completa e funcional.
O curso é divido em etapas. Ao começo de cada etapa, você receberá instruções iniciais, como você já recebeu nesse e no anterior. Você deve ler todo o conteúdo apresentado e receberá, ao fim, uma pequena atividade.
Para que suas respostas sejam enviadas, siga os seguintes passos:
git clone
https://github.com/eduilson/store-framework
Open
na notificação que abre no canto inferior direitostore-framework
;eduilson/store-framework
e clique em Install.Ao terminar de ler todo o conteúdo e fazer a atividade proposta, você deve enviar a sua resposta seguindo os passos abaixo:
Source Control
, no menu lateral do VSCode;+
na seção de CHANGES;✓
(Commit);+ Create new branch...
;Quando terminar de fazer todo o fluxo, nosso robô responderá se você conseguiu ou não acertar a resposta que esperávamos. Se sim, receberá uma resposta como:
Em seguida, você receberá uma outra resposta que indicará os próximos passos:
Se você é familiarizado com o git, todo esse fluxo equivale a criar uma branch com um nome predefinido, fazer commit das mudanças e dar push.
Ao longo do curso, é possível que você não consiga completar corretamente a atividade na primeira tentativa. Se isso acontecer, você receberá uma mensagem de feedback que indicará qual foi o por quê da falha:
Você pode submeter quantas respostas você quiser, basta refazer todo o processo explicado na seção anterior.
A qualquer momento do curso você pode acompanhar o seu progresso voltando na página inicial. Nela, serão indicados todos os steps, quais você já completou e um botão para você voltar para o step de onde parou:
A todo momento, abrindo o terminal do VSCode, você pode executar um vtex link
e acompanhar a evolução do seu projeto em https://{workspace}--{conta}.myvtex.com
. Certifique-se que visualmente a solução é equiparável com o que foi apresentado e que nenhum erro aconteceu no link.
Não crie issues e PRs durante o fluxo do curso, isso pode interferir no seu funcionament
Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏
Começamos nossa jornada pelo clássico "Hello, World!". Para criar algo do tipo, precisamos conhecer os blocos do Store Framework e usar um que nos possibilite a criação de textos. Este bloco se chama Rich Text.
O Rich Text é somente um das dezenas de blocos disponíveis no Store Framework. É um bloco que parece simples, mas que possibilita uma série de customizações para criar textos. Para começar, todo texto escrito no Rich Text suporta linguagem Markdown, isso faz com que a estilização do texto seja muito mais fácil.
Olhando a documentação do bloco é possível encontrar a especificação técnica. Uma das seções presentes é a de Blocks API nela é vista toda a lista de propriedades (props) que o Rich Text possui. As propriedades são o principal ponto de customização de um bloco, são elas que garantem que um mesmo bloco possa ter visual e comportamento completamente diferente, dependendo de como for configurado.
Vamos então começar a personalizar a home page. No seu tema é possível encontrar um arquivo chamado home.jsonc
na pasta /store/blocks
. Neste arquivo é determinada a organização dos blocos que se deseja usar. A linguagem para composição do layout é simples e baseada em JSON.
No home.jsonc
se ver um bloco que é padrão em todos os temas: store.home
. Este bloco determina os blocos filhos que estarão expostos na home page.
{
"store.home": {
"blocks": []
}
...
}
Vamos então usar o Rich Text em seu corpo:
{
"store.home": {
"blocks": [
"rich-text"
]
}
...
}
Dessa forma, o store.home
agora sabe que precisará renderizar um Rich Text. Todavia, ainda não especificamos qual o visual desse Rich Text. Para isso, precisamos fazer uma definição de bloco.
A definição de blocos deve ser sempre feita fora de qualquer outro bloco, no nível da raiz do arquivo JSON.
{
"store.home": {
"blocks": [
"rich-text" <----- Aqui o bloco está sendo usado dentro de outro
]
},
"rich-text": { <----- Aqui está na raiz
}
}
Na definição é possível determinar o comportamento e visual de um bloco. Para tal devem ser usados pontos de customização, começaremos usando as props
do Rich Text:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
}
}
}
Observe novamente a documentação do Rich Text e vamos, então, definir as props que usaremos para customizá-lo.
Queremos fazer um simples "Hello, World!", olhando nas props vemos uma que se chama: text
(Text written in markdown language to be displayed). Essa é, então, a prop que determinará qual o texto que será exibido.
Incluindo essa prop temos, então:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "Hello, World!"
}
}
}
Olhando a documentação do Markdown vemos que para deixar itálico basta colocar *
antes e depois do texto:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "*Hello, World!*"
}
}
}
Para posicioná-lo ao centro, podemos adicionar a prop textPosition
e atribuir a ela o valor CENTER
:
{
"store.home": {
"blocks": [
"rich-text"
]
},
"rich-text": {
"props": {
"text": "*Hello, World!*",
"textPosition": "CENTER"
}
}
}
Defina um Rich Text na sua home e crie um texto "Hello, World!" em negrito e posicionado à direita.
ℹ️ Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.
Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.
Para o vídeo de setup do Mac, clique aqui
Antes de começar a botar a mão na massa e aprender mais sobre o Store Framework do VTEX IO, algumas configurações básicas precisam ser feitas por você, como:
Confira abaixo o passo a passo para cada uma dessas configurações:
Instale o Git no seu computador acessando o link abaixo e selecionando o software usado pelo seu computador (Windows, MAC ou Linux):
O Toolbelt é a ferramenta de linha de comando do VTEX IO. É ele quem permite a realização de qualquer atividade na plataforma, como criar um novo workspace de desenvolvimento, fazer login em uma conta VTEX, desenvolver novas apps, gerenciar as já existentes, etc.
Uma vez que o Toolbelt é quem estabelece a comunicação entre o desenvolvedor e a plataforma, você precisará dele para conseguir realizar todas as atividades propostas durante o curso do Store Framework.
npm i -g vtex
no seu terminal se você estiver trabalhando de um Windows e yarn global add vtex
no MAC;Você pode executar o comando vtex-v
(Windows) ou vtex
(MAC) para confirmar se a instalação do Toolbelt ocorreu como esperado.
Com a instalação concluída, o seu próximo passo deve ser logar em uma conta VTEX.
Execute o comando vtex login contaVTEX
no seu terminal, substituindo contaVTEX
pelo nome real da conta em que você deseja trabalhar. Por exemplo, vtex login appliancetheme
.
Uma vez logado, execute o comando vtex whoami
para confirmar em qual conta e workspace você está.
Workspaces nada mais são do que espaços de trabalho. Na plataforma do VTEX IO, as contas possuem três tipos principais de workspaces: master, de produção e desenvolvimento.
O próximo passo irá fazer com que um workspace de desenvolvimento seja criado para você, permitindo que as configurações feitas nas atividades do curso não alterem a versão final pública da loja.
vtex use nome-do-workspace
, substituindo nome-do-workspace
pelo nome desejado. Por exemplo, vtex use devworkspace
.Depois que seu workspace foi criado, você conseguirá acessá-lo a partir do link https://{workspace}--{conta}.myvtex.com
, substituindo {workspace}
e {conta}
pelo workspace criado anteriormente e pelo nome da conta, respectivamente. Por exemplo, https://devworkspace--appliancetheme.myvtex.com
Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏
Com todas as configurações básicas concluídas, você está pronto pra começar o curso!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.