Lookbook multi-galería

Para crear una página de Lookbook es necesario crear una nueva página CMS y luego añadirle un widget de tipo Lookbook. Dejarlo así es suficientemente correcto, pero 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 entonces carga el correspondiente widget en la página, mostrando aquel contenido que pertenece 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, primero se necesita ir al Widget Editor y crear un widget para cada categoría que se quiera incluir en el lookbook. Una vez hecho, se debe decidir cómo organizar las categorías que aparecerán en las pestañas multi-galería. Hay dos maneras diferentes: 

• Mediante Collections: Si se han asignado colecciones a tu contenido, puedes añadir una colección diferente a cada uno de los widgets que has creado. Puedes hacerlo usando la pestaña Filter del Widget Editor.
• Mediante Product Types: Si prefieres organizar las categorías de las pestañas en función del valor product_types value del product feed, necesitarás añadir el parámetro adicional productType en el código de cada widget. Esto se detallará en el siguiente paso.

Código multi-galería

Una vez los widgets estén correctamente configurados en el Widget Editor, el siguiente paso es integrarlos en la página CMS del Lookbook. Por ejemplo, supongamos que queremos añadir 2 widgets que incluyan 2 tipos diferentes de productos. Se necesitará insertar ambos widgets en la página CMS, y también añadir código para hacerlos aparecer o desaparecer cuando el usuario haga click en una categoría u otra. Se pueden conseguir ambas cosas añadiendo el siguiente bloque de código en tu página.

Asegúrate de editar el código para insertar los valores requeridos, como los Widget ID y otros 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 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.