Multiple-gallery Lookbook

In order to create a Lookbook page, you will need to create a CMS page and then attach a Lookbook-type widget into it. While this works just fine, it's also possible to attach more widgets to this page so it becomes multiple-gallery Lookbook. The user selects from a menu which category of content they want to see, and the corresponding widget shows up, displaying the content pertaining to the category that the user has selected.

Click here for a live example

Creating the widgets in the Widget Editor

To create a multiple-gallery lookbook, first you need to create one widget for each category that you want to include in your lookbook in the Widget Editor. From this point, you should decide how to organize the categories that will show up in the tabs. There's two different ways.

• By Collections: If you've assigned collections to your media content, you can add a different collection to each of the widgets that you've created. You can do so in the Filter tab of the Widget Editor.
• By Product Types: If you prefer to organize the tab categories in terms of the product_types value of your product feed, you'll need to add the productType additional parameter in the code of each widget. This will be detailed in the next step.

Multiple-gallery code

Once the widgets are properly set up in the Widget Editor, inserting them in your Lookbook's CMS page goes next. As an example, let's say you want to add 2 widgets that feature two differents kinds of products. You'll need to add both widgets into your CMS page, and also add new code in order to make them appear or disappear whenever the user clicks on a category. You can do both things by adding the following code block in your page.

Please make sure to edit the code in order to insert all required values such Widget ID's and additional parameters.

<!--		MENU SELECTOR		-->
<menu class="tab-menu">
	<li class="tab-item tab-item_active">CATEGORY 1</li>
	<li class="tab-item">CATEGORY 2</li>
</menu>
<ul class="widgets-list">
	<li class="widget-item">
		<!-- Start Photoslurp embed code -->
		<div class="ps-container">
			<ps-widget data-config="INSERT WIDGET ID FOR 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="INSERT WIDGET ID FOR WIDGET 2"></ps-widget>
			<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
		</div>
		<!-- End Photoslurp embed code -->
	</li>
</ul>

<style>
	/* MENU SELECTOR STYLES */
	
	.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 || {};
  
	/*	ADDITIONAL WIDGET PARAMETERS 1	*/
	photoSlurpWidgetSettings["INSERT THE WIDGET ID OF WIDGET 1"] = {
		lang: 'INSERT LANGUAGE CODE',
		productType: 'INSERT THE PRODUCTTYPE FOR WIDGET 1' //OPTIONAL: Not necessary if you're implementing by Collections
	};

	/*	ADDITIONAL WIDGET PARAMETERS 2	*/
	photoSlurpWidgetSettings["INSERT THE WIDGET ID OF WIDGET 2"] = {
		lang: 'INSERT LANGUAGE CODE',
		productType: 'INSERT THE PRODUCTTYPE FOR WIDGET 2' //OPTIONAL: Not necessary if you're implementing by Collections
	};

	/*	SCRIPT THAT HANDLES MULTI-GALLERY FUNCTIONALITY		*/
	(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>

Note: You can insert as many widgets as you need, just make sure that the class widget-item_hidden is assigned in all but the first list item, and that the class tab-item_active is only assigned in the first list item of the menu. This way, the only widget you'll see when loading the page will be the first one.

The CSS styles can be tweaked as you see fit. Within the script, you can also add Additional Widget Parameters in order to further customize the content of the widgets.