{"section":"tutorials","requestedLocale":"es","requestedSlug":"desarrollar-el-front-end-para-la-feature-de-listas-en-su-tienda","locale":"es","slug":"desarrollar-el-front-end-para-la-feature-de-listas-en-su-tienda","path":"docs/es/tutorials/storefront/layout/desarrollar-el-front-end-para-la-feature-de-listas-en-su-tienda.md","branch":"main","content":"> Tutorial válido solo para tiendas CMS Portal (Legado).\n\n## Crear enlace para acceder a la sección de listas en su tienda\nLas siguientes configuraciones deben realizarse a través de Admin VTEX, accediendo a **Storefront > Layout** y haga clic en **CMS**.\n\nPara crear el elemento html que da al cliente el acceso a las listas en la casilla de su tienda, usted debe incluir el código abajo en su template.\n\n```html\n<a href=“/giftlist”>Listas</a>\n```\n\nLa ruta `/giftlist` funciona como la casilla de las listas para cada cliente.\n\n## Editar template de la home de listas\n\nEn el template `new-Giftlist`, encontrado en el CMS de tu tienda, ya hemos incluido el control `<vtex.cmc:GiftListSearchV2 /> `. Este control __renderiza la búsqueda de las listas__ creadas por sus clientes. A continuación se muestra el código representado por esta plantilla.\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 del template `new-GiftList`, hay un subtemplate con el nombre` new-GiftList-Sidebar-nav`. Este subtemplate contiene el fragmento de código a continuación y se puede encontrar en la sección de plantillas de plantillas dentro de HTML Templates en su CMS:\n\n```html\n<ul class=\"nav nav-list bs-docs-sidenav giftlist-sidenav\">\n    <li>[<i class=\"icon-chevron-right\"></i>Buscar una Lista](/giftlist/)</li>\n    <li>[<i class=\"icon-chevron-right\"></i>Crear nueva Lista](/giftlist/create/)</li>\n    <li>[<i class=\"icon-chevron-right\"></i>Gestionar mis Listas](/giftlist/manage/)</li>\n</ul>\n```\n\nEste código representa una lista con __tres links__:\n\n1. __Buscar una Lista__: Este enlace lleva al cliente a la ruta `/giflist`, que es la casilla de las listas y donde se realizan las búsquedas por las listas\n2. __Crear nueva Lista__: Este enlace lleva al cliente a la ruta `/giftlist/create`, donde el cliente crea sus listas. En los próximos pasos, vamos a explicar cómo se hace la creación de listas.\n3. __Generación de mis Listas__: Este enlace lleva al cliente a la ruta `/giftlist/manage`, donde el cliente puede administrar sus listas. En los próximos pasos, vamos a explicar cómo se gestiona la lista.\n\n> ❗ No desactive la bandera **Authentication Required** ya seleccionada por defecto en las carpetas siguientes. La identificación es necesaria para que las listas se muestren para cada usuario específico.\n\n## Editar el template de creación de listas\n\n> ℹ️ Antes de editar esta plantilla, es necesario [crear el tipo de lista](/es/docs/tutorials/criando-tipo-de-lista) que se ofrecerá en su lista tienda. \n\nLa plantilla para crear listas se encuentra en la ruta `giftlist/create`. La plantilla por defecto de esta ruta es el `new-GiftList-Create`, ubicado en la sección `HTML Templates` de su CMS.\n\nLa plantilla de creación de listas viene con el control `<vtex.cmc:GiftListFormV2 />` por defecto. Este control representará la información de creación de lista de acuerdo con el tipo de lista que se creó.\n\nLa carpeta `giftlist/create`, por defecto, ya viene con la bandera marcada de `Authentication Required`. Por este motivo, se le pedirá un login cuando se accede a esta sección.\n\n## Editar el template de administración de listas\n\nLa plantilla de gestión de listas se encuentra en la ruta `giftlist/manage`. La plantilla por defecto de esta ruta es el `new-GiftList-manage`, ubicado en la sección `HTML Templates` de su CMS.\n\nLa plantilla de administración de listas viene con el control `<vtex.cmc:GiftListManagerV2 />` por defecto. Este control representará las listas que fueron creadas por el cliente en la ruta `giftlist / create`.\n\nLa carpeta `giftlist/manage`, por defecto, ya viene con la bandera marcada de` Authentication Required`. Por este motivo, se le pedirá un login cuando se accede a esta sección.\n\n## Editar el template de edición de listas\n\nEn el control `<vtex.cmc:GiftListManagerV2 />`, ubicado en la plantilla `new-GiftList-manage`, se representa un botón `Edit` que lleva al cliente a la ruta `giftlist/edit`. Esta ruta lee la plantilla `new-GiftList-Edit`, donde el cliente puede editar sus listas.\n\nLa plantilla de edición de listas viene con el control `<vtex.cmc: GiftListFormV2 />` por defecto. Este control es el mismo del template de la ruta `giftlist/create`. Sin embargo, no rendirá un formulario de creación de lista. En vista del contexto de edición, el control rendirá la información de la lista elegida para que el cliente pueda editar."}