Tutorial válido solo para tiendas CMS Portal Legado.
Crear enlace para acceder a la sección de listas en su tienda
Las siguientes configuraciones deben realizarse a través de Admin VTEX, accediendo a Storefront > Layout y haga clic en CMS.
Para 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.
<a href=“/giftlist”>Listas</a>
La ruta /giftlist funciona como la casilla de las listas para cada cliente.
Editar template de la home de listas
En 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.
<div class="giftlist giftlist-search"> <h2 class="glsearch-title">Search List</h2> <fieldset class="glsearch"> <form name="giftlistsearchform" id="giftlistsearchform" enctype="multipart/form-data"> <ul class="giftlistsearchul glsearch-ul"> <li class="glsearch-type"> <span> <label for="giftlistsearchtype">List type</label> </span> <select name="giftlistsearchtype" id="giftlistsearchtype"> <option value="x">All/Wish list</option> </select> </li> <li class="glsearch-id"> <span> <label for="giftlistsearchid">Reference</label> </span> <input type="text" id="giftlistsearchid" name="giftlistsearchid" placeholder="reference"> </li> <li class="glsearch-name"> <span> <label for="giftlistsearchname">Name</label> </span> <input type="text" id="giftlistsearchname" name="giftlistsearchname" placeholder="name"> </li> <li class="glsearch-surname"> <span> <label for="giftlistsearchsurname">Last name</label> </span> <input type="text" id="giftlistsearchsurname" name="giftlistsearchsurname" placeholder="last name"> </li> <li class="glsearch-eventlocation"> <span> <label for="giftlistsearcheventlocation">Place</label> </span> <input type="text" id="giftlistsearcheventlocation" name="giftlistsearcheventlocation" placeholder="place"> </li> <li class="glsearch-eventcity optional"> <span> <label for="giftlistsearcheventcity">City Event</label> </span> <input type="text" id="giftlistsearcheventcity" name="giftlistsearcheventcity" placeholder="city event"> </li> <li class="glsearch-eventdate optional"> <span> <label for="giftlistsearcheventdate">Date</label> </span> <input type="text" id="giftlistsearcheventdate" name="giftlistsearcheventdate" placeholder="date"> </li> <li class="glsearch-find"> <span> <input type="button" name="giftlistsearchfind" id="giftlistsearchfind" value="Search" class="btn"> </span> </li> </ul> <input type="hidden" id="giftlistsearchimagetypeid" name="giftlistsearchimagetypeid" value="3"> </form> </fieldset> <div class="glsearch-result"></div></div>
Dentro 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:
<ul class="nav nav-list bs-docs-sidenav giftlist-sidenav"> <li>[<i class="icon-chevron-right"></i>Buscar una Lista](/giftlist/)</li> <li>[<i class="icon-chevron-right"></i>Crear nueva Lista](/giftlist/create/)</li> <li>[<i class="icon-chevron-right"></i>Gestionar mis Listas](/giftlist/manage/)</li></ul>
Este código representa una lista con tres links:
- 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 - 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. - 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.
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.
Editar el template de creación de listas
Antes de editar esta plantilla, es necesario crear el tipo de lista que se ofrecerá en su lista tienda.
La 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.
La 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ó.
La 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.
Editar el template de administración de listas
La 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.
La 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.
La 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.
Editar el template de edición de listas
En 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.
La 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.