{"action":"created","issue":{"url":"https://api.github.com/repos/pvicari/store-framework/issues/5","repository_url":"https://api.github.com/repos/pvicari/store-framework","labels_url":"https://api.github.com/repos/pvicari/store-framework/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/pvicari/store-framework/issues/5/comments","events_url":"https://api.github.com/repos/pvicari/store-framework/issues/5/events","html_url":"https://github.com/pvicari/store-framework/issues/5","id":533365400,"node_id":"MDU6SXNzdWU1MzMzNjU0MDA=","number":5,"title":"Info Card: o call to action do Store Framework","user":{"login":"github-learning-lab[bot]","id":37936606,"node_id":"MDM6Qm90Mzc5MzY2MDY=","avatar_url":"https://avatars0.githubusercontent.com/in/10572?v=4","gravatar_id":"","url":"https://api.github.com/users/github-learning-lab%5Bbot%5D","html_url":"https://github.com/apps/github-learning-lab","followers_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/followers","following_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/repos","events_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/github-learning-lab%5Bbot%5D/received_events","type":"Bot","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2019-12-05T13:53:17Z","updated_at":"2019-12-05T14:02:56Z","closed_at":null,"author_association":"NONE","body":"# Info Card: o call to action do Store Framework\n\n## :sparkles: **Branch:** infocard\n\n## Introdução\n\nUma 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.\n\nCriaremos 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**](https://vtex.io/docs/app/vtex.store-components/Info-Card).\n\n## Info Card\n\n![image](https://user-images.githubusercontent.com/18701182/68480411-7b085800-0213-11ea-9426-31dcb0d0aa7d.png)\n\nCom 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*).\n\nOlhando a [documentação](https://vtex.io/docs/app/vtex.store-components/info-card#blocks-api) é possível ver que:\n\n- `isFullModeStyle` define se o *Call to Action (CTA)* deve estar acima do banner;\n- `textPosition` definirá a posição do texto;\n- `textAlignment` definirá o alinhamento do texto;\n- `imageUrl` definirá qual imagem será usada como banner;\n- `headline` determinará qual o texto que será usado de título;\n- `callToActionMode` possibilitará a escolha do *CTA* como sendo um link ou um botão;\n- `callToActionText` definirá o texto do *CTA*;\n- `callToActionUrl` determinará o link ao qual será redirecionado;\n\nFicamos, assim, com as seguintes props:\n\n```json\n  {\n    \"store.home\": {\n      \"blocks\": [\n        \"rich-text\",\n        \"info-card\"\n      ]\n    },\n    \"rich-text\": {\n      \"props\": {\n        \"text\": \"*Hello, World!*\",\n        \"textPosition\": \"RIGHT\"\n      }\n    },\n    \"info-card\": {\n      \"props\": {\n      \"isFullModeStyle\": false,\n      \"textPosition\": \"right\",\n      \"imageUrl\": \"https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png\",\n      \"headline\": \"Vintage Pink\",\n      \"subhead\": \"Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.\",\n      \"callToActionMode\": \"button\",\n      \"callToActionText\": \"Explore\",\n      \"callToActionUrl\": \"/sale/d\",\n      \"textAlignment\": \"center\"\n      }\n    }\n  }\n```\n\n## Instanciando blocos\n\nPode ser que você tenha se perguntado: \n> \"E se eu quiser ter dois Info Cards com aparências diferentes?\" \n\nIsso é possível através da **instanciação de blocos**.\n\nTodos 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:\n\n```json\n  {\n    \"store.home\": {\n      \"blocks\": [\n        \"rich-text\",\n        \"info-card#button-right\"\n      ]\n    },\n    ...\n    \"info-card#button-right\": {\n      \"props\": {\n        \"isFullModeStyle\": false,\n        \"textPosition\": \"right\",\n        \"imageUrl\": \"https://appliancetheme.vteximg.com.br/arquivos/cozinha-rosa-min.png\",\n        \"headline\": \"Vintage Pink\",\n        \"subhead\": \"Give your kitchen a boho style adding vintage apparels.<br>Available until January 2020.\",\n        \"callToActionMode\": \"button\",\n        \"callToActionText\": \"Explore\",\n        \"callToActionUrl\": \"/sale/d\",\n        \"textAlignment\": \"center\"\n      }\n    }\n  }\n```\n\n> **ATENÇÃO:** Durante o curso serão vistos vários `...`, essa parte não deve ser copiada e representa o progresso de steps anteriores\n\n## Atividade\n\nA 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:\n\n 1. O título `Shining chrome`\n 2. Um call to action do tipo link com o texto `Go to Collection` no lugar do botao\n 3. A imagem `https://appliancetheme.vteximg.com.br/arquivos/cozinha-cinza-min.png`\n 4. O subtítulo `Give your kitchen a cool style adding warm metallic finishes.<br>Available until January 2020.`\n 5. O texto posicionado à esquerda.\n\nO resultado esperado é semelhante ao apresentado na imagem abaixo:\n\n![image](https://appliancetheme.vteximg.com.br/arquivos/info-card-activity.png)\n\n:information_source: Lembre-se de acessar a documentação do [Info Card](https://vtex.io/docs/app/vtex.store-components/Info-Card) caso tenha alguma dúvida durante a atividade.\n\n---\n\n### :no_entry_sign: Perdido? \n\nHá algum problema com esse passo? Que tal nos enviar um feedback? :pray:\n\n[Criar feedback](https://docs.google.com/forms/d/e/1FAIpQLSeaWrm0Hogm-txm5Ww6mUa68eDuE3WnpFjUSVJ3Wi3dnmCb7A/viewform?usp=pp_url&entry.1784529524=Info+Card:+o+call+to+action+do+Store+Framework) \n\n----\n\nSe ainda tiver dúvida sobre como enviar sua resposta, você pode rever [aqui](https://github.com/pvicari/store-framework/issues/3).\n"},"comment":{"url":"https://api.github.com/repos/pvicari/store-framework/issues/comments/562141634","html_url":"https://github.com/pvicari/store-framework/issues/5#issuecomment-562141634","issue_url":"https://api.github.com/repos/pvicari/store-framework/issues/5","id":562141634,"node_id":"MDEyOklzc3VlQ29tbWVudDU2MjE0MTYzNA==","user":{"login":"vtex-course-hub[bot]","id":57236986,"node_id":"MDM6Qm90NTcyMzY5ODY=","avatar_url":"https://avatars3.githubusercontent.com/u/56606363?v=4","gravatar_id":"","url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D","html_url":"https://github.com/apps/vtex-course-hub","followers_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/followers","following_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/following{/other_user}","gists_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/gists{/gist_id}","starred_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/subscriptions","organizations_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/orgs","repos_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/repos","events_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/events{/privacy}","received_events_url":"https://api.github.com/users/vtex-course-hub%5Bbot%5D/received_events","type":"Bot","site_admin":false},"created_at":"2019-12-05T14:02:56Z","updated_at":"2019-12-05T14:02:56Z","author_association":"NONE","body":"## Oopsie, something went wrong :crying_cat_face:\n \n\n### Results \n:x: \n\n### Tests \n\n:x: Didn't manage to load a home.jsonc file on your repository :( \n\n### Try again :grin:"}}
{"actor":{"display_login":"vtex-course-hub"}}