Info Card: _call to action_ do Store Framework

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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

{"base64":" ","img":{"width":3132,"height":750,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":602951,"url":"https://user-images.githubusercontent.com/18701182/68480411-7b085800-0213-11ea-9426-31dcb0d0aa7d.png"}}

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:


_24{
_24  "store.home": {
_24    "blocks": ["rich-text", "info-card"]
_24  },
_24  "rich-text": {
_24    "props": {
_24      "text": "*Hello, World!*",
_24      "textPosition": "RIGHT"
_24    }
_24  },
_24  "info-card": {
_24    "props": {
_24      "isFullModeStyle": false,
_24      "textPosition": "right",
_24      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
_24      "headline": "Vintage Pink",
_24      "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
_24      "callToActionMode": "button",
_24      "callToActionText": "Explore",
_24      "callToActionUrl": "/sale/d",
_24      "textAlignment": "center"
_24    }
_24  }
_24}

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:


_22  {
_22    "store.home": {
_22      "blocks": [
_22        "rich-text",
_22        "info-card#button-right"
_22      ]
_22    },
_22    ...
_22    "info-card#button-right": {
_22      "props": {
_22        "isFullModeStyle": false,
_22        "textPosition": "right",
_22        "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
_22        "headline": "Vintage Pink",
_22        "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
_22        "callToActionMode": "button",
_22        "callToActionText": "Explore",
_22        "callToActionUrl": "/sale/d",
_22        "textAlignment": "center"
_22      }
_22    }
_22  }

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

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).
_14... _14 "info-card#button-left": { _14 "props": { _14 "isFullModeStyle": false, _14 "textPosition": "left", _14 "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png", _14 "headline": "Shining chrome", _14 "subhead": "Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.", _14 "callToActionMode": "link", _14 "callToActionText": "Go to collection", _14 "textAlignment": "center" _14 } _14 } _14...

O resultado esperado será semelhante a este:

{"base64":" ","img":{"width":1276,"height":691,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":225368,"url":"https://appliancetheme.vteximg.com.br/arquivos/info-card-activity.png"}}

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

Answer sheet

See answer sheet for home.jsonc

home.jsonc


_32// store/blocks/home.jsonc
_32{
_32  "store.home": {
_32    "blocks": ["rich-text", "info-card#button-right", "info-card#button-left"]
_32  },
_32  //...,
_32  "info-card#button-right": {
_32    "props": {
_32      "isFullModeStyle": false,
_32      "textPosition": "right",
_32      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png",
_32      "headline": "Vintage Pink",
_32      "subhead": "Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.",
_32      "callToActionMode": "button",
_32      "callToActionText": "Explore",
_32      "callToActionUrl": "/sale/d",
_32      "textAlignment": "center"
_32    }
_32  },
_32  "info-card#button-left": {
_32    "props": {
_32      "isFullModeStyle": false,
_32      "textPosition": "left",
_32      "imageUrl": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png",
_32      "headline": "Shining chrome",
_32      "subhead": "Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.",
_32      "callToActionMode": "link",
_32      "callToActionText": "Go to collection",
_32      "textAlignment": "center"
_32    }
_32  }
_32}