Lookbook multi-galería

Para crear una página de Lookbook, es necesario crear una página CMS y luego añadirle un widget de Lookbook. Aunque esto es suficiente, también es posible añadir más widgets a esta página para convertirla en un Lookbook multi-galería. El usuario selecciona en un menú qué categoría de contenido quiere ver, y el widget correspondiente se carga, mostrando el contenido perteneciente a la categoría que el usuario ha seleccionado.

Haz clic aquí para un ejemplo

Creando los widgets en el Widget Editor

Para crear un lookbook multi-galería, abra el Widget Editor y cree un widget para cada categoría que desee incluir en el Lookbook. A continuación, debe decidir cómo organizar las categorías que aparecerán en las pestañas multi-galerías. Hay dos maneras de hacerlo:

• Utilizando Collections: Si se han asignado colecciones a su contenido, puede añadir una colección diferente a cada uno de los widgets que ha creado. Puede hacer esto usando la pestaña Filter del Editor de Widgets.
  
  
• Utilizando Product Types: Si prefiere organizar las categorías de las pestañas en función del valor de product_types del product feed, tendrá que añadir el parámetro productType en el código de cada widget. Esto se detalla en el siguiente paso.

Código multi-galería

Una vez configurados los widgets en el Widget Editor, el siguiente paso es añadirlos a la página  CMS del Lookbook.

Por ejemplo, digamos que queremos usar 2 widgets con 2 tipos diferentes de productos. Tendrásque utilizar el código de Código de Inserción del Widget  para insertar los widgets, el parámetro productType en el Código de Configuración del Widget si utilizas Product Types, y el código para que se muestre uno u otro Widget cuando el usuario haga clic en una categoría o en otra. Añade el siguiente bloque de código a su página para implementar esta funcionalidad.

Asegúrate de editar el código para insertar los valores necesarios, como los Widget ID y los parámetros adicionales.

<!--		MENÚ DE CATEGORÍAS		-->
<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">
		<!-- Start Photoslurp embed code -->
		<div class="ps-container">
			<ps-widget data-config="INSERTAR WIDGET ID DEL WIDGET 1"></ps-widget>
			<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
		</div>
		<!-- End Photoslurp embed code -->
	</li>
	<li class="widget-item widget-item_hidden">
		<!-- Start Photoslurp embed code -->
		<div class="ps-container">
			<ps-widget data-config="INSERTAR WIDGET ID DEL WIDGET 2"></ps-widget>
			<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
		</div>
		<!-- End Photoslurp embed code -->
	</li>
</ul>

<style>
  /* ESTILOS DEL MENÚ DE CATEGORÍAS */
  .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>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};

/*	PARÁMETROS ADICIONALES DEL WIDGET 1	*/
photoSlurpWidgetSettings["INSERTAR WIDGET ID DEL WIDGET 1"] = {
  lang: 'INSERTAR CÓDIGO DE IDIOMA',
  productType: 'INSERTAR EL PRODUCTTYPE DEL WIDGET 1'	//OPCIONAL: No es necesario si se está implementando mediante Collections
};

/*	PARÁMETROS ADICIONALES DEL WIDGET 2	*/
photoSlurpWidgetSettings["INSERTAR WIDGET ID DEL WIDGET 2"] = {
  lang: 'INSERTAR CÓDIGO DE IDIOMA',
  productType: 'INSERTAR EL PRODUCTTYPE DEL WIDGET 2'	//OPCIONAL: No es necesario si se está implementando mediante Collections
};

/*	SCRIPT PARA 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>

Nota: Se pueden insertar tantos widgets como se necesiten, pero es importante que la clase widget-item_hidden se asigne a todos los elementos de la lista <li> excepto al primero, y que la clase tab-item_active sólo se asigne al primer elemento de la lista <li> del menú. De esta manera, el único widget que se verá cuando se 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.