Para crear una página de Lookbook hay que crear una nueva página CMS y luego insertar un widget de Lookbook en ella. También puedes insertar múltiples widgets de Lookbook para convertirlo en un Lookbook multi-galería, donde el usuario selecciona en un menú qué categoría quiere ver, haciendo que se cargue el widget correspondiente.
Para crear un lookbook de multi-galería, primero tienes que crear un widget, en el Editor de Widgets, para cada categoría que quieras incluir en el lookbook. A continuación, añadirás todos estos widgets al módulo Photoslurp de tu Prestashop como widgets "Lookbook".
Durante el proceso de creación del widget en el módulo de Prestashop, asigna la categoría deseada para cada widget activando la opción "Only show media from product category" y luego seleccionando la categoría de la lista.
Una vez que los widgets se han configurado correctamente en el módulo, el siguiente paso es integrarlos en la página de Lookbook CMS. Por ejemplo, digamos que queremos añadir 2 widgets que incluyan 2 tipos diferentes de productos. Tendrás que insertar ambos widgets en la página del CMS, y también añadir código para que aparezcan o desaparezcan cuando el usuario haga clic en una u otra categoría.
Prestashop 1.6
En Prestashop 1.6, copia y pega el siguiente código en el archivo de plantilla CMS que se encuentra en *themes/nombre_del_tema_de_tu_web/cms.tpl*:
{if $cms->id eq 6}
<menu class="tab-menu">
<li class="tab-item tab-item_active">CATEGORÍA 1</li>
<li class="tab-item">CATEGORÍA 2</li>
</menu>
<ul class="widgets-list">
<li class="widget-item">
{hook h='psWidget' id_pswidget='5'}
</li>
<li class="widget-item widget-item_hidden">
{hook h='psWidget' id_pswidget='6'}
</li>
</ul>
{literal} <style> /* ESTILOS DEL MENÚ DE SELECCIÓN */ .tab-menu { display: flex; align-items: center; justify-content: center; list-style: none; margin-bottom: 3rem; } .tab-item { flex-basis: 25%; background: transparent; border-bottom: 1.5px solid transparent; color: #000; cursor: pointer; text-align: center; padding: 1em 0; } .tab-item:hover { border-bottom-color: #05301a; } .tab-item_active { border-bottom-color: #aaa; } .widgets-list { list-style: none; } .widget-item_hidden { display: none; } .widget-item .ps-container { min-height: 1px; } </style> <script> /* SCRIPT QUE SE ENCARGA DE LA FUNCIONALIDAD MULTI-GALERÍA */ (function() { var arrProto = Array.prototype; var forEach = arrProto.forEach; var indexOf = arrProto.indexOf; var widgetItems = document.querySelectorAll('.widget-item'); forEach.call(document.querySelectorAll('.tab-item'), function(tabItem) { tabItem.addEventListener('click', function() { document.querySelector('.tab-item_active').classList.remove('tab-item_active'); this.classList.add('tab-item_active'); var index = indexOf.call(this.parentNode.children, this); forEach.call(widgetItems, function(el, i) { el.classList[i === index ? 'remove' : 'add']('widget-item_hidden'); }); }); }); })(); </script> {/literal} {/if}
Prestashop 1.7
En Prestashop 1.7, copia y pega el siguiente código en el archivo de plantilla CMS que se encuentra en *themes/nombre_del_tema_de_tu_web/templates/cms/page.tpl*:
{if $cms.id eq 6}
<menu class="tab-menu">
<li class="tab-item tab-item_active">CATEGORÍA 1</li>
<li class="tab-item">CATEGORÍA 2</li>
</menu>
<ul class="widgets-list">
<li class="widget-item">
{hook h='psWidget' id_pswidget='5'}
</li>
<li class="widget-item widget-item_hidden">
{hook h='psWidget' id_pswidget='6'}
</li>
</ul>
{literal} <style> /* ESTILOS DEL MENÚ DE SELECCIÓN */ .tab-menu { display: flex; align-items: center; justify-content: center; list-style: none; margin-bottom: 3rem; } .tab-item { flex-basis: 25%; background: transparent; border-bottom: 1.5px solid transparent; color: #000; cursor: pointer; text-align: center; padding: 1em 0; } .tab-item:hover { border-bottom-color: #05301a; } .tab-item_active { border-bottom-color: #aaa; } .widgets-list { list-style: none; } .widget-item_hidden { display: none; } .widget-item .ps-container { min-height: 1px; } </style> <script> /* SCRIPT QUE SE ENCARGA DE LA FUNCIONALIDAD MULTI-GALERÍA */ (function() { var arrProto = Array.prototype; var forEach = arrProto.forEach; var indexOf = arrProto.indexOf; var widgetItems = document.querySelectorAll('.widget-item'); forEach.call(document.querySelectorAll('.tab-item'), function(tabItem) { tabItem.addEventListener('click', function() { document.querySelector('.tab-item_active').classList.remove('tab-item_active'); this.classList.add('tab-item_active'); var index = indexOf.call(this.parentNode.children, this); forEach.call(widgetItems, function(el, i) { el.classList[i === index ? 'remove' : 'add']('widget-item_hidden'); }); }); }); })(); </script> {/literal} {/if}
Nota: El valor id_pswidget debe ser equivalente al id del widget que se ha asignado en el Módulo de Photoslurp para Prestashop, no al del id del Widget Editor.
Se pueden insertar tantos widgets como se necesiten, pero es importante tener en cuenta que la clase widget-item_hidden esté asignada a todos ítems de lista <li> excepto el primero, y que la clase tab-item_active esté sólo asignada en el primer ítem de lista del menú. De este modo, el único widget que se verá cuando cargue la página será el primero.
Los estilos CSS se pueden ajustar como sea necesario. Dentro del script, también se pueden añadir parámetros adicionales para personalizar el contenido de los widgets.