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