github-learning-lab[bot] commented 4 years ago

Info Card: o call to action do Store Framework

:sparkles: 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:

:information_source: Lembre-se de acessar a documentação do Info Card caso tenha alguma dúvida durante a atividade.

:no_entry_sign: Perdido?

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

Criar feedback

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

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::x::x:

Tests

:white_check_mark: Code compilation :x: Home block doesn't have info-card#button-right or info-card#button-left :x: Your blocks.jsonc file is missing either info-card#button-right or info-card#button-left :x: You didn't use the info-card properties we're expecting

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :x: You didn't use the info-card properties we're expecting

Try again :grin:

vtex-course-hub[bot] commented 4 years ago

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Code compilation :white_check_mark: Define two info cards in the home block :white_check_mark: Declare info-card#button-right and info-card#button-left :white_check_mark: Define the correct info card properties

github-learning-lab[bot] commented 4 years ago

Você terminou este passo com sucesso!

Vá para o próximo passo:

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

wender / store-framework