Info Card: o call to action do Store Framework

Info Card: call to action do Store Framework

Introdução

Uma loja precisa de uma boa página inicial para envolver os usuários, aumentando o tempo da sessão e, portanto, as chances de conversão. Para tal, é necessário utilizar vários elementos, como banners promocionais, estantes com destaques, material sobre nós, etc.

Criamos o próximo bloco na página inicial usando uma call to action. No Store Framework, temos um bloco desenhado para esse fim, denominado Info Card.

Começando com o Info Card

imageimage

Usando o Info Card, você pode criar imagens que possuem links e botões (parte superior ou lateral do bloco) que direcionam o fluxo do usuário (Call to action).

Olhando a documentação, podemos ver que:

  • isFullModeStyle define se o Call to Action (CTA) é definido acima do banner;
  • textPosition define a posição do texto;
  • textAlignment define o alinhamento do texto;
  • imageUrl define qual imagem será usada como banner;
  • headline determina qual texto será usado como título;
  • callToActionMode permite escolher o modo CTA como um link ou um botão;
  • callToActionText define o texto CTA;
  • callToActionUrl determina a URL para a qual ele redireciona;

Portanto, temos 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"
    }
  }
}

Instâncias de Blocos

Você pode ter se perguntado:

"E se eu quisesse ter dois info cards diferentes?"

É possível por meio de instâncias de blocos.

Todos os blocos têm nomes pré-estabelecidos, mas você pode criar instâncias de bloco e definir diferentes formas de exibição dos tipos de bloco. Após cada bloco ter sido definido, simplesmente coloque um '#' com um nome arbitrário, 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: Ao longo do curso, você notará vários ..., que você não deve copiar, pois representa o progresso alcançado durante as etapas anteriores.

Atividade

  1. No arquivo home.jsonc, com base no código acima, crie o info-card#button-left logo abaixo do infocard: info-card#button-right. Este novo info card deve implementar os seguintes adereços:

    • O título deve ser Shining chrome
    • Uma frase de call to action do tipo link com o seguinte texto em vez de um botão: Go to Collection
    • A seguinte imagem https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
    • O seguinte subtítulo Give your kitchen a cool style adding warm metallic finishes.<br>Available until December 2020.
    • Texto à esquerda da imagem (textPosition).
    ...
      "info-card#button-left": {
        "props": {
        "isFullModeStyle": false,
        "textPosition": "left",
        "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png",
        "headline": "Shining chrome",
        "subhead": "Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.",
        "callToActionMode": "link",
        "callToActionText": "Go to collection",
        "textAlignment": "center"
        }
      }
    ...
    

O resultado esperado será semelhante a este:

imagemimagem

Note: Lembre-se de acessar a documentação do Info Card se você tiver alguma dúvida sobre a atividade.

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