{"section":"tutorials","requestedLocale":"pt","requestedSlug":"desenvolver-o-front-end-para-a-feature-de-listas-na-sua-loja","locale":"pt","slug":"desenvolver-o-front-end-para-a-feature-de-listas-na-sua-loja","path":"docs/pt/tutorials/storefront/layout/desenvolver-o-front-end-para-a-feature-de-listas-na-sua-loja.md","branch":"main","content":"> Tutorial válido apenas para lojas CMS Portal (Legado).\n\n## Criar link para acessar a seção de listas na sua loja\nAs configurações abaixo devem ser feitas através do Admin VTEX, acessando **Storefront > Layout** e clie na pasta **CMS**.\n\nPara criar o elemento html que dá ao cliente o acesso às listas na Home da sua loja, você deve incluir o código abaixo no seu template.\n\n```html\n<a href=“/giftlist”>Listas</a>\n```\n\nA rota `/giftlist` funciona como a Home das listas para cada cliente. \n\n## Editar template da home de listas\n\nNo template `new-Giftlist`, encontrado no CMS da sua loja, já temos incluído o controle `<vtex.cmc:GiftListSearchV2 />`. Esse controle __renderiza a busca das listas__ criadas pelos seus clientes. Veja abaixo o código renderizado por este template.\n\n```html\n<div class=\"giftlist giftlist-search\">\n    <h2 class=\"glsearch-title\">Search List</h2>\n    <fieldset class=\"glsearch\">\n        <form name=\"giftlistsearchform\" id=\"giftlistsearchform\" enctype=\"multipart/form-data\">\n            <ul class=\"giftlistsearchul glsearch-ul\">\n                <li class=\"glsearch-type\">\n                    <span>\n                        <label for=\"giftlistsearchtype\">List type</label>\n                    </span>\n                    <select name=\"giftlistsearchtype\" id=\"giftlistsearchtype\">\n                        \n                        <option value=\"x\">All/Wish list</option>\n                    </select>\n\n                </li>\n                <li class=\"glsearch-id\">\n                    <span>\n                        <label for=\"giftlistsearchid\">Reference</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearchid\" name=\"giftlistsearchid\" placeholder=\"reference\">\n                </li>\n                <li class=\"glsearch-name\">\n                    <span>\n                        <label for=\"giftlistsearchname\">Name</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearchname\" name=\"giftlistsearchname\" placeholder=\"name\">\n                </li>\n                <li class=\"glsearch-surname\">\n                    <span>\n                        <label for=\"giftlistsearchsurname\">Last name</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearchsurname\" name=\"giftlistsearchsurname\" placeholder=\"last name\">\n                </li>\n                <li class=\"glsearch-eventlocation\">\n                    <span>\n                        <label for=\"giftlistsearcheventlocation\">Place</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearcheventlocation\" name=\"giftlistsearcheventlocation\" placeholder=\"place\">\n                </li>\n                <li class=\"glsearch-eventcity optional\">\n                    <span>\n                        <label for=\"giftlistsearcheventcity\">City Event</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearcheventcity\" name=\"giftlistsearcheventcity\" placeholder=\"city event\">\n                </li>\n                <li class=\"glsearch-eventdate optional\">\n                    <span>\n                        <label for=\"giftlistsearcheventdate\">Date</label>\n                    </span>\n                    <input type=\"text\" id=\"giftlistsearcheventdate\" name=\"giftlistsearcheventdate\" placeholder=\"date\">\n                </li>\n\n                <li class=\"glsearch-find\">\n                    <span>\n                        <input type=\"button\" name=\"giftlistsearchfind\" id=\"giftlistsearchfind\" value=\"Search\" class=\"btn\">\n                    </span>\n                </li>\n            </ul>\n            <input type=\"hidden\" id=\"giftlistsearchimagetypeid\" name=\"giftlistsearchimagetypeid\" value=\"3\">\n        </form>\n    </fieldset>\n    <div class=\"glsearch-result\"></div>\n</div>\n```\n\nDentro do template `new-GiftList`, há um subtemplate com o nome `new-GiftList-Sidebar-nav`. Este subtemplate contém o snippet de código abaixo e pode ser encontrado na seção de `Sub Templates`, dentro de `HTML Templates` no seu CMS:\n\n```html\n<ul class=\"nav nav-list bs-docs-sidenav giftlist-sidenav\">\n    <li>[<i class=\"icon-chevron-right\"></i> Buscar uma Lista](/giftlist/)</li>\n    <li>[<i class=\"icon-chevron-right\"></i> Criar nova Lista](/giftlist/create/)</li>\n    <li>[<i class=\"icon-chevron-right\"></i> Gerenciar minhas Listas](/giftlist/manage/)</li>\n</ul>\n```\n\nEste código renderiza uma lista com __três links__:\n\n1. __Buscar uma Lista__: Este link leva o cliente para a rota `/giflist`, que é a home das listas e onde são realizadas as buscas pelas listas\n2. __Criar nova Lista__: Este link leva o cliente para a rota `/giftlist/create`, onde o cliente cria suas listas. Nos próximos passos, vamos explicar como é feita a criação de listas.\n3. __Gerenciar minhas Listas__: Este link leva o cliente para a rota `/giftlist/manage`, onde o cliente pode gerenciar suas listas. Nos próximos passos, vamos explicar como é feito o gerenciamento de listas.\n\n> ❗ Não desmarque a flag **Authentication Required** já selecionada por default nas pastas abaixo. A identificação é necessária para que as listas sejam exibidas para cada usuário específico.\n\n## Editar o template de criação de listas\n\n> ℹ️ Antes de editar este template, é necessário [criar o Tipo de Lista](/pt/docs/tutorials/criando-tipo-de-lista) que será oferecido na sua loja. \n\nO template para criação de listas está localizado na rota `giftlist/create`. O template default desta rota é o `new-GiftList-Create`, localizado na seção `HTML Templates` do seu CMS.\n\nO template de criação de listas vem com o controle `<vtex.cmc:GiftListFormV2 />` por default. Este controle irá renderizar as informações de criação de lista __de acordo com o tipo de lista__ que foi criado.\n\nA pasta `giftlist/create`, por default, já vem com a flag marcada de `Authentication Required`. Por conta disso, será solicitado um login quando for feito o acesso a esta seção.\n\n## Editar o template de gerenciamento de listas\n\nO template para gerenciamento de listas está localizado na rota `giftlist/manage`. O template default desta rota é o `new-GiftList-manage`, localizado na seção `HTML Templates` do seu CMS.\n\nO template de gerenciamento de listas vem com o controle `<vtex.cmc:GiftListManagerV2 />` por default. Este controle irá renderizar as listas que foram criadas pelo cliente na rota `giftlist/create`.\n\nA pasta `giftlist/manage`, por default, já vem com a flag marcada de `Authentication Required`. Por conta disso, será solicitado um login quando for feito o acesso a esta seção.\n\n## Editar o template de edição de listas\n\nDentro do controle `<vtex.cmc:GiftListManagerV2 />`, localizado no template  `new-GiftList-manage`, é renderizado um botão `Edit` que leva o cliente para a rota `giftlist/edit`. Esta rota lê o template `new-GiftList-Edit`, onde o cliente consegue editar suas listas.\n\nO template de edição de listas vem com o controle `<vtex.cmc:GiftListFormV2 />` por default. Este controle é o mesmo do template da rota `giftlist/create`. No entanto, ele não irá renderizar um formulário de criação de lista. Considerando o contexto de edição, o controle irá renderizar as informações da lista escolhida para que o cliente possa editar."}