{"action":"created","issue":{"url":"https://api.github.com/repos/nathanprestes/store-framework/issues/13","repository_url":"https://api.github.com/repos/nathanprestes/store-framework","labels_url":"https://api.github.com/repos/nathanprestes/store-framework/issues/13/labels{/name}","comments_url":"https://api.github.com/repos/nathanprestes/store-framework/issues/13/comments","events_url":"https://api.github.com/repos/nathanprestes/store-framework/issues/13/events","html_url":"https://github.com/nathanprestes/store-framework/issues/13","id":533471222,"node_id":"MDU6SXNzdWU1MzM0NzEyMjI=","number":13,"title":"Finalizando sua pdp","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":2,"created_at":"2019-12-05T16:49:55Z","updated_at":"2019-12-05T17:37:30Z","closed_at":null,"author_association":"NONE","body":"# Finalizando sua pdp\n\n## :sparkles: **Branch:** pdp3\n\n## Introdução\n\nNeste passo vamos terminar de montar a nossa página de produto. Aprenderemos como empilhar blocos usando o [**Stack Layout**](https://vtex.io/docs/app/vtex.stack-layout), como sugerir produtos similares e como customizar melhor o SKU Selector para produtos com imagem de SKU.\n\n![image](https://user-images.githubusercontent.com/18701182/69393219-50a8a700-0cb7-11ea-8718-c5ec0536cbe2.png)\n\n## Stack Layout\n\nO `stack-layout` é um tipo layout que possibilita que blocos possam ser empilhados sobre outros. É muito útil quando se deseja colocar algum badge em cima de uma imagem ou produto. Também é útil para compor textos compostos sobre imagens (usando um `rich-text` e uma `image`).\n\n![image](https://user-images.githubusercontent.com/18701182/69392819-0a9f1380-0cb6-11ea-8238-1e2e75b9eee9.png)\n\n(Na imagem, uma shelf empilhada sobre um carrossel :point_up_2:)\n\nNeste passo, usaremos o `stack-layout` para colocar a marca sobre as imagens de produto.\n\n## Atividade\n\nEvolua a página de produto adicionando os passos abaixo ao arquivo `product.jsonc`:\n\n1. Declare um [`shelf.relatedProducts`](https://vtex.io/docs/app/vtex.shelf) abaixo da **linha principal** de produto\n\n```json\n\"store.product\": {\n  \"children\": [\n    \"breadcrumb\",\n    \"flex-layout.row#main\",\n    \"shelf.relatedProducts\"\n  ]\n}\n```\n\n2. Troque `product-images` na coluna da esquerda por uma declaração de `stack-layout`;\n\n```json\n\"flex-layout.col#left\": {\n  \"children\": [\n    \"stack-layout#brand\"\n  ]\n}\n```\n\n3. Defina o `stack-layout` e coloque como filhos o `product-images` e [`product-brand`](https://vtex.io/docs/components/product-related/vtex.store-components/product-brand);\n\n```json\n\"stack-layout#brand\": {\n  \"children\": [\n    \"product-images\",\n    \"product-brand\"\n  ]\n}\n```\n\n4. Consulte a [documentação](https://vtex.io/docs/components/product/vtex.store-components/product-brand#configuration) para mudar a forma que o `product-brand` é exibido. Você deve fazer o logo aparecer com altura de **30**. \n\n5. Consulte a [documentação](https://vtex.io/docs/components/product/vtex.store-components/sku-selector) para fazer com que o `sku-selector`: \n  - comece sem nenhum SKU selecionado;\n  - mostre o nome por variação de sku;\n  - mostre erro se nenhuma variação de sku for selecionada.\n  \n  :information_source: Lembre-se de acessar a [documentação](https://vtex.io/docs/app/vtex.stack-layout) do Stack Layout 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=Finalizando+sua+pdp) \n\n----\n\nSe ainda tiver dúvida sobre como enviar sua resposta, você pode rever [aqui](https://github.com/nathanprestes/store-framework/issues/3).\n"},"comment":{"url":"https://api.github.com/repos/nathanprestes/store-framework/issues/comments/562234221","html_url":"https://github.com/nathanprestes/store-framework/issues/13#issuecomment-562234221","issue_url":"https://api.github.com/repos/nathanprestes/store-framework/issues/13","id":562234221,"node_id":"MDEyOklzc3VlQ29tbWVudDU2MjIzNDIyMQ==","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-05T17:37:30Z","updated_at":"2019-12-05T17:37:30Z","author_association":"NONE","body":"## Oopsie, something went wrong :crying_cat_face:\n \n\n### Results \n:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x: \n\n### Tests \n\n:white_check_mark: Code compilation\n:white_check_mark: Define related products shelf\n:white_check_mark: Use and define a `stack-layout` on the left column\n:white_check_mark: Use product images and product brand within the stack layout\n:white_check_mark: Define correct props on `product-brand`\n:x: You didn't define the props correctly on `sku-selector` \n\n### Try again :grin:"}}
{"actor":{"display_login":"vtex-course-hub"}}