dayvidds / 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
Dando uma rápida olhada na sua loja atual, você conseguirá perceber que todos os componentes possuem estilos parecidos, mesmo que nenhuma customização tenha sido feita por você.
Todos eles, incluindo o Info Card recém configurado, compartilham valores pré-estabelecidos para fonte, cor de fundo, cor principal, formato dos botões, etc.
Isso se deve ao style.json
, arquivo responsável por declarar valores genéricos de customização para toda loja do Store Framework.
Para criar uma identidade própria para os componentes da sua loja, você pode sobrescrever esses valores por meio de customizações de CSS.
Analisando a recipe para customizações de loja por CSS, percebemos que alguns passos serão necessários para aplicar o estilo próprio desejado por você, como:
Criar um novo arquivo dentro da pasta CSS
com o nome vtex.{AppName}.css
Usar o CSS Handle do componente que será customizado dentro deste arquivo seguindo o formato abaixo:
.{CSSHandle} {
{PropriedadeDeCSS}: {ValorDesejado};
{PropriedadeDeCSS}: {ValorDesejado};
}
Na falta de CSS Handles, aplicar CSS Selectors permitidos, como é o caso do :global(vtex-{componentName})
.
Para aplicar CSS em um bloco específico e não a todos os blocos daquele tipo, usa-se o recurso de blockClass, que aparece ao lado dos handles de css ao inspecionar seu código. As blockClass devem ser declaradas como uma prop no bloco em questão, e então referenciado no arquivo de estilo como mostrado abaixo:
.{CSSHandle}--{blockClass} {
{PropriedadeDeCSS}: {ValorDesejado};
{PropriedadeDeCSS}: {ValorDesejado};
}
Para descobrir os CSS Handles de um componente, como o Info Card, basta acessar a sessão Customization
da sua documentação.
De acordo com a descrição dos CSS Handles e com a recipe customizações de loja por CSS, conseguimos implementar um exemplo de Info Card customizado, alterando seu título e as configurações do botão call to action ao adicionar o código a seguir no arquivo vtex.store-components.css
dentro de /styles/css
:
.infoCardHeadline {
font-family: serif;
font-size: 2.25rem;
font-weight: normal;
color: gray;
border: 2px solid black;
padding: 24px;
}
.infoCardCallActionContainer :global(.vtex-button) {
color: white;
background-color: gray;
border: transparent;
}
.infoCardCallActionContainer :global(.vtex-button):hover {
color: gray;
background-color: blue;
border: transparent;
}
Você pode conferir o efeito das mudanças feitas por você executando o comando vtex link
.
Em seguida, vamos adicionar um estilo específico para o infocard Vintage. Para começar, adicione a prop blockClass
no info-card#button-right
como mostrado abaixo:
"info-card#button-right": {
"props": {
"isFullModeStyle": false,
"textPosition": "right",
"imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
"headline": "Vintage Pink",
"subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
"callToActionMode": "button",
"callToActionText": "Explore",
"callToActionUrl": "/sale/d",
"textAlignment": "center",
"blockClass": "vintage" // <------------
}
}
E então declare uma background-color
para este infocard específico no seu arquivo de css:
.infoCardContainer--vintage {
background-color: #edcfd1
}
Observe o efeito atingido linkando sua app.
vtex.store-components.css
, copie o código acima para usá-lo no arquivo CSS do seu tema, seguindo a recipe sobre customizações de loja por CSS;max-width
) de de todos os infocards para 1260px
, a margin para 0 auto
e o padding para 0
.black
;bold
);white
.vintage
, aplique um novo block class chamado metal
no infocard info-card#button-left
e aplique a cor de fundo #e1e1e1
nele.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.
O Flex Layout é um paradigma de estruturação de layout criado no Store Framework para permitir a construção de layouts complexos. Esse paradigma usa o conceito de linhas e colunas para definir a estrutura e o posicionamento desejados dos blocos em uma determinada página.
Existem dois blocos de construção básicos de cada Flex Layout:
flex-layout.row
flex-layout.col
Se você já está familiarizado com o Flexbox utilizado no CSS, o Flex Layout deve ser simples de entender, já que o Flexbox está sendo utilizar "por debaixo dos panos" pelo flex-layout.row e flex-layout.col.
Com o Flex Layout é possível criar layouts personalizados, utilizando a estrutura de linhas e colunas do Flexbox.
Analisando a documentação do bloco, vemos que você pode utilizar qualquer array de blocos como children
do Flex Layout. Além disso, você deve sempre usar flex-layout.row
e flex-layout.col
, NUNCA flex-layout
de forma isolada.
Abaixo, temos um exemplo de flex layout composto de um flex-layout.row
com dois children: um info-card
e um rich-text
:
"flex-layout.row":{
"children": [
"info-card#rethink",
"rich-text#deletar"
]
},
"info-card#rethink": {
"props": {
"imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/utensilios-cozinha-min.png",
"isFullModeStyle": true,
"headline": "Time to rethink your kitchen",
"callToActionText": "Discover",
"textPosition": "center"
}
},
"rich-text#deletar": {
"props": {
"text": "I'll be deleted soon"
}
}
Declare o flex-layout.row
dentro dos blocks
do template de store.home
e declare os blocos propostos acima no seu arquivo home.jsonc
Altere as children do flex-layout.row
, substituindo o bloco rich-text
por uma coluna flex-layout.col
.
Delete o bloco de rich-text
proposto acima do seu tema.
Declare o bloco flex-layout.col
no seu arquivo home.jsonc
com dois componentes de imagem como children: image#electronics
e image#major-appliance
, nesta ordem.
Defina os blocos image
com as seguintes props:
...
"image#electronics": {
"props": {
"src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/electronics_banner___25d69b49f8224b369375e68513b4d593.png",
"maxWidth": "100%"
}
},
"image#major-appliance": {
"props": {
"src": "https://appliancetheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/major_appliance_banner___bb10093866a127345ddfbcca3efa5022.png",
"maxWidth": "100%"
}
}
O resultado obtido deve ser semelhante a este:
ℹ️ Lembre-se de acessar a documentação do Flex Layout 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.
Uma loja precisa de uma boa home page para manter a atenção do usuário, aumentando o tempo de sessão e, portanto, aumentando as chances de conversão. Para que isso seja possível, vários elementos podem ser usados, como: banners promocionais, prateleiras de destaque, conteúdos institucionais.
Criaremos o próximo bloco na home page usando um Call to Action. No Store Framework, temos um bloco que serve para esse propósito chamado Info Card.
Com o Info Card, é possível criar imagens com links e botões (no topo ou na lateral do bloco) que direcionem o fluxo do usuário (Call to Action).
Olhando a documentação é possível ver que:
isFullModeStyle
define se o Call to Action (CTA) deve estar acima do banner;textPosition
definirá a posição do texto;textAlignment
definirá o alinhamento do texto;imageUrl
definirá qual imagem será usada como banner;headline
determinará qual o texto que será usado de título;callToActionMode
possibilitará a escolha do CTA como sendo um link ou um botão;callToActionText
definirá o texto do CTA;callToActionUrl
determinará o link ao qual será redirecionado;Ficamos, assim, com as seguintes props:
{
"store.home": {
"blocks": [
"rich-text",
"info-card"
]
},
"rich-text": {
"props": {
"text": "*Hello, World!*",
"textPosition": "RIGHT"
}
},
"info-card": {
"props": {
"isFullModeStyle": false,
"textPosition": "right",
"imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
"headline": "Vintage Pink",
"subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
"callToActionMode": "button",
"callToActionText": "Explore",
"callToActionUrl": "/sale/d",
"textAlignment": "center"
}
}
}
Pode ser que você tenha se perguntado:
"E se eu quiser ter dois Info Cards com aparências diferentes?"
Isso é possível através da instanciação de blocos.
Todos os blocos têm nomes preestabelecidos, mas você pode criar instâncias deles e definir aparências diferentes para um mesmo tipo de bloco. Para fazer isso, basta colocar um #
com um nome arbitrário e que faça sentido depois da definição de cada bloco, por exemplo:
{
"store.home": {
"blocks": [
"rich-text",
"info-card#button-right"
]
},
...
"info-card#button-right": {
"props": {
"isFullModeStyle": false,
"textPosition": "right",
"imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
"headline": "Vintage Pink",
"subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
"callToActionMode": "button",
"callToActionText": "Explore",
"callToActionUrl": "/sale/d",
"textAlignment": "center"
}
}
}
ATENÇÃO: Durante o curso serão vistos vários
...
, essa parte não deve ser copiada e representa o progresso de steps anteriores
A partir do código acima, no arquivo home.jsonc
, crie o info-card#button-left
logo abaixo do infocard info-card#button-right
. Este novo infocard deve possuir:
Shining chrome
Go to Collection
no lugar do botaohttps://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
textPosition
).O resultado esperado é semelhante ao apresentado na imagem abaixo:
ℹ️ Lembre-se de acessar a documentação do Info Card 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.
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.
É 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/dayvidds/store-framework
Open
na notificação que abre no canto inferior direitostore-framework
;dayvidds/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? 🙏
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!
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? 🙏
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.