{"action":"created","issue":{"url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/23","repository_url":"https://api.github.com/repos/martincorebizglobal/store-framework","labels_url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/23/comments","events_url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/23/events","html_url":"https://github.com/martincorebizglobal/store-framework/issues/23","id":540050966,"node_id":"MDU6SXNzdWU1NDAwNTA5NjY=","number":23,"title":"Menú","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":8,"created_at":"2019-12-19T03:23:29Z","updated_at":"2019-12-30T03:06:08Z","closed_at":null,"author_association":"NONE","body":"# Menú\n\n## :sparkles: **Branch:** menu\n\n## Introducción\n\nCon el Header ya configurado e implementado, ahora vamos a agregarle el [**Menú**](https://vtex.io/docs/components/all/vtex.menu/).\n\nLa configuración del Menú es un paso importante en la construcción del tema, ya que es el bloque responsable de la **navegación** del usuario en su tienda.\n\nDebido a su función y relevancia, el Menú tiene una estructura jerárquica compleja, que involucra *Menu Items*, Submenús y, a partir de este último, cualquier bloque del Store Framework (como otros Menús y *Menu Items*).\n\nA continuación, puede ver una imagen que ejemplifica la estructura del bloque Menú en la práctica:\n\n![menu](https://user-images.githubusercontent.com/52087100/70004800-5cf9f300-1546-11ea-81fc-369e4bb58ed5.png)\n\n## Configurando el Menú\n\nSi se compara con las de algunos bloques, la configuración del menú puede parecer más difícil debido a su estructura de menús, ítems de menú y submenús. \n\nPero el Menú no necesita necesariamente ser configurado siguiendo este escenario más complejo. \n\nA continuación, podemos ver un ejemplo de una implementación básica del bloque, que contiene apenas 3 *Menu Items*:\n\n```json\n{\n  \"vtex.menu@2.x:menu#categories\": {\n    \"children\": [\n      \"menu-item#major-appliances\",\n      \"menu-item#small-appliances\",\n      \"menu-item#electronics\"\n    ],\n\n    \"props\":{\n      \"orientation\": \"horizontal\"\n    }\n  }\n},\n```\n\n## Actividad\n\nEn esta actividad, entenderemos mejor sobre la configuración del [Menú](https://vtex.io/docs/components/all/vtex.menu/) y la jerarquía dentro de este a partir de la construcción de *Menu Items* y Submenús.\n\n1. En el archivo `header.jsonc`, agregue `header-row#menu`  como último ítem en la lista de children del bloque `header-layout.desktop` (configurado en la [actividad anterior]) para que el Menú pueda ser renderizado por el Header de la tienda.\n2. Copie y peque el siguiente código para declarar el bloque `header-row#menu`:\n\n```json\n\"header-row#menu\": {\n  \"children\": [\n    \"header-spacer\",\n    \"vtex.menu@2.x:menu#categories\",\n    \"header-spacer\"\n  ]\n},\n```\n\n3. También debemos preocuparnos con el Menú en el layout de otros dispositivos, como mobile. Por eso, agregue [`drawer`](https://vtex.io/docs/components/all/vtex.store-drawer/) como primer ítem de children del bloque `header-row#main-mobile` .\n\n4. Pegue el siguiente código en el archivo `menu.jsonc` para renderizar horizontalmente los 3 ítems de su Menú principal:\n\n```json\n{\n \"vtex.menu@2.x:menu#categories\": {\n   \"children\": [\n     \"menu-item#major-appliances\",\n     \"menu-item#small-appliances\",\n     \"menu-item#electronics\"\n   ],\n\n   \"props\":{\n     \"orientation\": \"horizontal\"\n   }\n},\n```\n\n5. Como vimos en la introducción, un *Menu Item* puede permitir la configuración de un Submenú dentro de este que, a su vez, puede tener otro Menú con *Menu Items*. Cree entonces el Submenú de *Major Appliance*, aún en el archivo `menu.jsonc`, de acuerdo con el siguiente ejemplo: \n\n```json\n\"vtex.menu@2.x:submenu#major\":{\n  \"children\":[\n    \"vtex.menu@2.x:menu#major\"\n  ]\n},\n```\n\n6. Siguiendo el formato establecido por el bloque `vtex.menu@2.x:menu#categories`, construya el Menú secundario de *Major Appliances* declarado en el último paso en el archivo `menu.jsonc` . Usted debe definir `vertical` como valor de la prop `orientation` y configurar los siguientes *Menu Items* en la lista de children del bloque:  `menu-item#refrigerators`, `menu-item#ovens` y `menu-item#washers` .\n\n7. Cree también el Submenú de *Small Appliances*:\n\n```json\n \"vtex.menu@2.x:submenu#small\":{\n   \"children\":[\n     \"vtex.menu@2.x:menu#small\"\n   ]\n},\n```\n\n8. Construya ahora el Menú secundario de *Small Appliances* en el archivo `menu.jsonc` . Así como se hizo para *Major Appliance*, usted debe definir `vertical` como valor de la prop `orientation` y configurar los siguientes *Menu Items* en la lista de children del bloque:  `menu-item#mixers`, `menu-item#toasters` y `menu-item#coffee` .\n\n9. Basado en los pasos anteriores, haga lo mismo para *Eletronics*: cree su Submenú (`vtex.menu@2.x:submenu#electronics`) y Menú secundario. Después, construya este último con el mismo valor de prop (`vertical`) y configure los siguientes *Menu Items* en la lista de children del bloque: `menu-item#cameras`, `menu-item#laptops` y `menu-item#tvs` . \n\n:information_source: Recuerde acceder a la [documentación](https://vtex.io/docs/components/all/vtex.menu/) del Menú si tiene alguna duda durante la actividad. \n\nResultado esperado:\n![](https://appliancetheme.vteximg.com.br/arquivos/imagem-menu.png)\n\n---\n\n### :no_entry_sign:  ¿Perdido? \n\n¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:\n\n[Crear feedback](https://docs.google.com/forms/d/e/1FAIpQLSeaWrm0Hogm-txm5Ww6mUa68eDuE3WnpFjUSVJ3Wi3dnmCb7A/viewform?usp=pp_url&entry.1784529524=Menu) \n\n----\n\nSi aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar [aquí](https://github.com/martincorebizglobal/store-framework/issues/3).\n"},"comment":{"url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/comments/569569658","html_url":"https://github.com/martincorebizglobal/store-framework/issues/23#issuecomment-569569658","issue_url":"https://api.github.com/repos/martincorebizglobal/store-framework/issues/23","id":569569658,"node_id":"MDEyOklzc3VlQ29tbWVudDU2OTU2OTY1OA==","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-30T03:06:08Z","updated_at":"2019-12-30T03:06:08Z","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::x::x::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark: \n\n### Tests \n\n:white_check_mark: Code compilation:  header.jsonc\n:white_check_mark: Code compilation:  menu-items.jsonc\n:white_check_mark: Code compilation: menu.jsonc\n:x: You havent declared vtex.menu@2.x:submenu#major on your menu-item#major-appliances\n:x: You havent declared vtex.menu@2.x:submenu#small on your menu-item#small-appliances\n:x: You havent declared vtex.menu@2.x:submenu#electronics on your menu-item#electronics\n:white_check_mark: Main Category Menu must be stated\n:white_check_mark: Main Category Menu must have correct children\n:white_check_mark: Main Category Menu must be on horizontal orientation\n:white_check_mark: Major Appliances Menu must be stated\n:white_check_mark: Major Appliances must have correct children\n:white_check_mark: Major Appliances Menu must be on vertical orientation\n:white_check_mark: Small Appliances Menu must be stated\n:white_check_mark: Small Appliances must have correct children\n:white_check_mark: Small Appliances Menu must be on vertical orientation\n:white_check_mark: Electronics Menu must be stated\n:white_check_mark: Electronics Menu must have correct children\n:white_check_mark: Electronics Menu must be on vertical orientation\n:white_check_mark: Menu row must be placed as last child of header\n:white_check_mark: Drawer must be placed as first child of header mobile\n:white_check_mark: Menu row must have correct children\n:white_check_mark: Major Submenu must have major menu as children\n:white_check_mark: Small Submenu must have small menu as children\n:white_check_mark: Electronics Submenu must have electronics menu as children \n\n### Try again :grin:"}}
{"actor":{"display_login":"vtex-course-hub"}}