0000marcell / store-framework

https://lab.github.com/vtex-trainings/store-framework
0 stars 0 forks source link

Info Card: o call to action do Store Framework #5

Closed github-learning-lab[bot] closed 4 years ago

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

image

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:

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:

  1. O título Shining chrome
  2. Um call to action do tipo link com o texto Go to Collection no lugar do botao
  3. A imagem https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png
  4. O subtítulo Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.
  5. O texto posicionado à esquerda.

O resultado esperado é semelhante ao apresentado na imagem abaixo:

image

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

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

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

Oopsie, something went wrong :crying_cat_face:

Results

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

Tests

:white_check_mark: Code compilation :x: Home block doesn't have info-card#button-right or info-card#button-left :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

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