gabrielzevedo / store-framework Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 14 KB

Home Page: https://lab.github.com/vtex-trainings/store-framework

store-framework's People

Contributors

Watchers

store-framework's Issues

Prateleira de produtos

✨ Branch: shelf

Introdução

O próximo bloco que vamos utilizar é a Shelf, a nossa prateleira para uma coleção de produtos. Nessa sessão vamos aprender a renderizar e configurar essa prateleira na home da nossa loja.

Shelf

Analisando a documentação da Shelf, vemos que é possível configurar qual coleção de produtos queremos mostrar através das props category, specificationFilters ou collection, de acordo com os produtos cadastrados no catálogo.

As demais props são para configuração na maneira com que os items são mostrados. É importante notar que o componente shelf sempre pede que block do tipo product-summary faça parte da sua composição. Veja a documentação do bloco product-summary para entender mais sobre seu funcionamento

Abaixo, temos o exemplo da implementação de uma Shelf:

{
  "store.home": {
    "blocks": [
      ...
      "shelf"
    ]
  },
  ...
  "shelf": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "category": 1,
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "desktopOnly",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 5,
        "minItemsPerPage": 1,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Top sellers"
      }
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-add-to-list-button",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-identifier.summary",
      "product-summary-buy-button"
    ]
  }
}

Atividade

No arquivo home.jsonc, declare um componente shelf no template store.home
Dentro da pasta blocks, crie um arquivo shelf.jsonc
No arquivo shelf.jsonc, defina o bloco shelf com todas as props propostas no exemplo acima
Altere o número máximo de itens exibidos para 8
Altere o número de itens por página para 4

Obs.: É importante notar que o bloco product-summary.shelf já está declarado dentro do arquivo default.jsonc. Por este motivo, não foi necessário declará-lo nesta atividade.

ℹ️ Lembre-se de acessar a documentação da Shelf caso tenha alguma dúvida durante a atividade.

O resultado final esperado deve ser semelhante a este:

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

CSS handles e o poder da customização de blocos

CSS Handles e o poder da customização de blocos

✨ Branch: csshandles

Introdução

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};
}

Customizando o Info Card

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.

Atividade

No arquivo 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;
Com base nos Handles do Info Card, defina a largura máxima (max-width) de de todos os infocards para 1260px, a margin para 0 auto e o padding para 0.
Mude a cor do título do componente para black;
Coloque o título em negrito (bold);
Mude a cor de fundo do botão durante o hover para white.
Paralelamente ao blockClass vintage, aplique um novo block class chamado metal no infocard info-card#button-left e aplique a cor de fundo #e1e1e1nele.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Evoluindo sua página de produto (pdp)

✨ Branch: pdp2

Introdução

No último passo aprendemos como fazer uma página de produto simples com seus itens mínimos, mas sabemos que o que fizemos está longe de ser uma página de produto ideal, colocaremos outros elementos que vemos com frequência nas páginas de produto de várias lojas.

Mais de 30 blocos de produto

Na nossa documentação é possível encontrar mais 30 blocos relacionados a produto. No começo do curso falamos sobre Shelf e seus blocos relacionados, além de na última seção termos visto outros 4 blocos. Neste passo veremos mais 4:

É importante que ao fim do curso, você tome um tempo para explorar nossos componentes, bem como as possibilidades de customização que se tem com estes.

Atividade

Evolua a página de produto adicionando os outros 4 blocos listados acima da seguinte forma no arquivo product.jsonc:

Defina um breadcrumb logo no início antes da linha principal do produto;

"store.product": {
  "children": [
    "breadcrumb",
    "flex-layout.row#main"
  ]
}

Defina o product-identifier.product logo abaixo do product-name;
Crie uma linha logo abaixo do preço com o sku-selector e o product-quantity como children;

{
  ...
    "children": [ 
      "product-price",
      "flex-layout.row#qty-sku"
    ]
  },
  "flex-layout.row#qty-sku": {
    "children": [
      "sku-selector",
      "product-quantity"
    ]
  },
  ...
}

Defina shipping-simulator logo abaixo da linha com o SKU Selector e o Product Quantity

ℹ️ Lembre-se de acessar a documentação do Breadcrumb, Product Identifier, Product Quantity e SKU Selector caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Hello, World!

✨ Branch: richtext

Introdução

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.

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.

Começando

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.

Definição de blocos

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"
    }
  }
}

Atividade

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.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Carrossel de blocos

✨ Branch: slider-layout

Introdução

O Slider Layout, como o Flex Layout, é uma forma flexível de criar um novo bloco a partir de outros blocos usando children. Ele permite que sejam criados sliders de outros blocos, como info-cards e até mesmo flex-layouts por exemplo.

Vamos utilizar o Slider Layout para tornar um conjunto de info-cards em um slider.

Slider Layout

Analisando a documentação, vemos que você pode utilizar qualquer array de blocos como children, assim como no Flex Layout.

Abaixo, segue um exemplo de implementação de um slider-layout com dois info-card:

  "slider-layout#home": {
    "children": ["info-card#1", "info-card#2"],
    "props": {
      "autoplay": {
        "timeout": 5000,
        "stopOnHover": false
      }
    }
  },
  
  "info-card#1": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  },
  
  "info-card#2": {
    "props": {
      "imageUrl": "https://images.unsplash.com/photo-1524185962737-ea7c028a12cd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
      "isFullModeStyle": true,
      "headline": "Black Friday",
      "callToActionText": "Subscribe",
      "textPosition": "center"
    }
  }

Atividade

Nesta atividade, vamos criar um slider de marcas para o nosso site:

No arquivo home.jsonc, declare o bloco slider-layout#home ao template store.home.
Crie um arquivo chamado slider-layout.jsonc dentro da pasta /store/blocks;
Neste arquivo, baseando-se no código acima, substitua os info-card declarados como children de slider-layout#home e adicione 6 componentes de imagem image como children. Utilize o formato image#brand1, image#brand2 (...) image#brand6 para declarar os componentes;
Declare uma prop src específica para cada image#brand definido. Utilize as URLs abaixo para cada uma delas:
1. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square1.png
2. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square2.png
3. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square3.png
4. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square4.png
5. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square5.png
6. https://appliancetheme.vteximg.com.br/arquivos/flatflat-brand-logo-square6.png
Por fim, você deve utilizar a propriedade de autoplay no bloco slider-layout#home. Faça com que o slide aconteça automaticamente a cada 7 segundos e que ele pare quando o usuário passar o mouse em cima do slide.

ℹ️ Lembre-se de acessar a documentação do Slider Layout e Image caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Funcionamento do curso

Objetivo

É 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.

Introdução

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:

Abra uma nova janela do VSCode
Execute Ctrl + Shift + P (Cmd + Shift + P)
Digite git clone

Digite o nome do repositório como https://github.com/gabrielzevedo/store-framework
Confirme e selecione o lugar onde deseja baixar o repositório
Clique em Open na notificação que abre no canto inferior direito

Abra a página de instalação do nosso robô de testes e clique em Configure;
- ⚠️ Note que este bot é diferente do bot do GitHub Learning Lab. Ele é responsável por analisar a resposta de cada etapa do curso.
Selecione Only selected repositories, clique em Select repositories e digite store-framework;
Clique em gabrielzevedo/store-framework e clique em Install.

Submetendo as suas respostas

Ao terminar de ler todo o conteúdo e fazer a atividade proposta, você deve enviar a sua resposta seguindo os passos abaixo:

Clique em Source Control, no menu lateral do VSCode;

Clique no + na seção de CHANGES;

Escreva alguma mensagem que represente sua mudança. Por exemplo:

Clique no ✓ (Commit);

Clique no canto inferior esquerdo;

Quando uma nova janela aparecer, coloque o nome da Branch que lhe foi dado no começo do texto e clique em + Create new branch...;

Para finalizar, clique na nuvem no canto inferior esquerdo:

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.

Tentando novamente

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.
⚠️ No item 6 não será necessário refazer tudo, uma vez que a branch do step já foi criada. No item 7, ao invés de ver uma nuvem, você verá algumas setas, basta clicar nelas para reenviar:

Progresso do curso

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:

Não esqueça de linkar

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.

⚠️ Cuidado ⚠️

Não crie issues e PRs durante o fluxo do curso, isso pode interferir no seu funcionament

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Para continuar clique em Close issue

Página de produto

✨ Branch: pdp1

Introdução

Terminada a página inicial da nossa loja, começamos um novo template da loja: a página de produto. Páginas de produto são provavelmente o template que mais possuem blocos diferentes, o que as torna extremamente customizáveis e flexíveis.

MVP

Vamos então construir uma página de produto mínima, em que tenhamos somente o essencial:

imagens;
preço;
nome;
botão de comprar

Blocos de produto

A maioria dos blocos de produto, diferentemente dos de conteúdo, possuem um contexto ao qual estão inseridos. Tudo isso faz com que esses blocos sejam um pouco "plug-n-play": colocar um product-images na página de produto, automaticamente redenrizará as imagens do produto da página, da mesma forma se faz com o preço e o nome.

Nada disso quer dizer, no entanto, que esses blocos são pouco customizáveis, conforme veremos adiante.

Atividade

Construa uma página de produto usando os blocos product-images, product-price, product-name e buy-button no arquivo product.jsonc declarado dentro da pasta store/blocks. Esperamos que na estrutura tenhamos:

Uma linha na store.product;

{
 "store.product": {
    "children": [
      "flex-layout.row#main"
    ]
  }
}

Dentro da linha devem haver duas colunas;

"flex-layout.row#main": { 
  "props": { 
    "marginTop": 6
  },
  "children": [
    "flex-layout.col#left",
    "flex-layout.col#right"
  ]
}

Dentro da coluna da esquerda deve haver um product-images;

"flex-layout.col#left": {
  "children": [
    "product-images"
  ]
}

Dentro da coluna da direita deve haver o product-name, product-price e o buy-button;

Além disso, queremos que:

A coluna da direita esteja verticalmente alinhada ao centro (veja as props verticalAlign e preventVerticalStretch na documentação de Flex Layout Column)
O product-price mostre o total de economia e o preço de listagem (showSavings e showListPrice)

ℹ️ Lembre-se de acessar a documentação do product-images, product-price, product-name e buy-button caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Tornando seu conteúdo responsivo

✨ Branch: responsiveimage

Introdução

A página inicial de um e-commerce é sempre o primeiro contato do cliente com a marca. Por isso, é comum que o lojista queira estabelecer uma comunicação direta com os seus usuários nesse momento estratégico da navegação.

No Store Framework, existem alguns componentes que atendem a esse cenário, como o Info Card visto nos passos anteriores e o Rich Text.

Como vimos no terceiro passo, o Rich Text é responsável por transformar textos em elementos HTML, com a grande vantagem de ler em Markdown. Isso dá ao componente a flexibilidade de aceitar diferentes estruturas de texto, permitindo ao lojista construir sua comunicação de forma mais clara e direta.

Configurando o Rich Text

Assim como a sua funcionalidade, a configuração do Rich Text também é simples.

Da mesma forma que o "Hello, world!" foi feito, podemos montar um exemplo de implementação do bloco usando texto escrito em markdown. Por exemplo:

"rich-text": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

Como falado anteriormente, o uso de Markdown permite flexibilidade ao componente. Mas, por outro lado, também pode fazer com que a sua renderização sofra alterações de acordo com o dispositivo usado pelo usuário.

Por exemplo: a frase acima ( # Your Coffee, Your Way \n ### New Coffee Makers Collection ) pode usar um markdown adequado para desktop, mas não necessariamente para mobile (cujo tamanho de tela é menor).

Para resolver esse cenário e tornar o componente mais adaptável a outros dispositivos, devemos usar o Responsive Layout.

Primeiramente devemos delcarar os blocos dentro do template store.home:

"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"

Em seguida devemos declarar esses blocos da seguinte forma:

...

"responsive-layout.desktop#desktop": {
  "children": ["rich-text#desktop"]
},

"responsive-layout.mobile#mobile": {
  "children": ["rich-text#mobile"]
},

"rich-text#desktop": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

"rich-text#mobile": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
}

Ao interpretar o código acima, perceba como duas configurações de Rich Text são construídas a partir do uso de responsive-layout.desktop#desktop e responsive-layout.mobile#mobile.

Atividade

Nessa atividade, vamos brincar um pouco com o markdown do Rich Text e aprender a usá-lo com o componente Image. Tudo isso usando o Responsive Layout, é claro!

Desktop:

Mobile:

Adicione o código proposto acima no arquivo home.jsonc e declare os blocos de responsive-layout no template store.home;
No rich-text#mobile, altere o markdown da primeira frase para h3 e da segunda para h4;
Adicione image#desktop como children de responsive-layout.desktop#desktop. Faça o mesmo com image#mobile em responsive-layout.mobile#mobile;
Declare os seguintes blocos de Image:

"image#desktop": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

"image#mobile": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

Analisando as props do componente Image, defina a largura máxima das duas imagens como 100%.

ℹ️ Lembre-se de acessar a documentação do Responsive Layout caso tenha alguma dúvida durante a atividade.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Info Card: o call to action do Store Framework

✨ Branch: infocard

Introdução

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.

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"
      }
    }
  }

Instanciando blocos

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

Atividade

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:

O título Shining chrome
Um call to action do tipo link com o texto Go to Collection no lugar do botao
A imagem https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
O subtítulo Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
O texto posicionado à esquerda da imagem (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.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Store Framework 101

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.

Introdução

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.

Tema

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.

Blocos

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:

estilo semântico (styles);
propriedades (props);
classes css (handles);
filhos (children)

Workspaces

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.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Para continuar clique em Close issue

Flex Layout: crie layouts utilizando o poder do Flexbox

✨ Branch: flexlayout

Introdução

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.

Flex Layout

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"
    }
  }

Atividade

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.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

Configurações básicas

Para o vídeo de setup do Mac, clique aqui

Introdução

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:

Instalar o Git;
Instalar o Toolbelt;
Fazer login em uma conta VTEX;
Criar um workspace de desenvolvimento;
Linkar seus arquivos locais com a plataforma.

Confira abaixo o passo a passo para cada uma dessas configurações:

Instalando o Git

Instale o Git no seu computador acessando o link abaixo e selecionando o software usado pelo seu computador (Windows, MAC ou Linux):

https://git-scm.com/downloads

Instalando o Toolbelt

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.

Instale o Node.js. Se o computador que você está usando é MAC, instale também o Yarn;
Execute o comando 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.

Fazendo login

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.

Criando um workspace de desenvolvimento

Execute vtex use nome-do-workspace, substituindo nome-do-workspace pelo nome desejado. Por exemplo, vtex use devworkspace.

Visualizando seu workspace

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

Linkando seus arquivos locais

Ao executar vtex link a partir da pasta onde estão os arquivos do seu tema, eles passarão a ser automaticamente sincronizados com a plataforma do VTEX IO. Isso significa que qualquer alteração feita e salva por você será refletida no workspace e na conta em que você está logado, e poderá ser visualizada através do endereço descrito acima.

🚫 Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? 🙏

Criar feedback

Com todas as configurações básicas concluídas, você está pronto pra começar o curso!