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 que, no topo ou ao lado, existam links ou botões 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

Copie o código acima, crie um info-card#button-left depois do info-card#button-right, que tenha um botão e seja exibido como a imagem abaixo:

DICA: Utilize a imagem a seguir para compor o seu info-card#button-left:

https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png

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#link or info-card#button :x: Your blocks.jsonc file is missing either info-card#link or info-card#button :x: You didn't the infocard 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#link and info-card#button :x: You didn't the infocard 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::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

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

iaronaraujo / store-framework