Stack Layout

Stack Layout

Introdução

O Stack Layout é mais um tipo possível de construir layouts complexos se alavancando dos blocos nativos, com ele é possível facilmente empilhar bloco. Para este passo, vamos criar um call-to-action (CTA) na página principal com um banner e um botão de redirecionamento.

Atividade

Pensando melhor no problema que queremos resolver, conseguimos dividi-lo em duas partes:

  • Uma imagem (bloco image) de fundo:

imageimage

  • Um botão de CTA:

imageimage

Vamos então construir o info card usando ambos elementos:

  1. Declare o stack-layout na sua página:
{
  "store.home": {
    "blocks": [
+     "stack-layout#cta"
    ]
  }
}
  1. Adicione uma imagem e um link para o stack-layout:
{
  "store.home": {
    "blocks": [
     "stack-layout#cta"
    ]
  },
+ "stack-layout#cta": {
+   "children": [
+     "image#cta",
+     "link#cta"
+   ]
+ }
}
  1. Declare a imagem e o link que usaremos:
{
  ...
+ "image#cta": {
+   "props": {
+     "blockClass": "cover",
+     "width": "100%",
+     "height": 400,
+     "src": "https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"
+   }
+ },
+ "link#cta": {
+   "props": {
+     "displayMode": "button",
+     "buttonProps": {
+       "variant": "primary",
+       "size": "large"
+     },
+     "href": "/washer",
+     "label": "Check these awesome discounts"
+   }
+ }
}
  1. O resultado deve ser então:

infocardinfocard

OPCIONAL: Se você quiser melhorar um pouco o visual do info card criado, siga os passos seguintes:

  1. Crie um arquivo vtex.stack-layout.css na pasta /styles/css e adicione os seguintes estilos:
.stackItem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
  1. No arquivo vtex.store-components.css da pasta /styles/css adicione:
.imageElement--cover {
  object-fit: cover;
}

O resultado deve ser então:

imageimage

Notas

  • Não se preocupe se não entender bem como funcionou a estilização feita nos passos opcionais, temos um curso exclusivo para estilização que será visto mais a frente.

  • Se você clicar no botão e não estiver vendo uma página de resultado de busca, garanta que você tem um layout de busca definido (vimos isso no curso de blocos básicos) seguindo a documentação de Search Result

    Está com dúvidas?

    Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step