In order to create a Lookbook page you 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.
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. Then, you have to add all these widgets to your Prestashop's Photoslurp module as "Lookbook" type widgets.
While creating the widgets in Prestashop's module, make sure to assign the desired category for each widget by activating the "Only show media from product category" option, and then selecting its corresponding category.
Once the widgets are properly set up in the module, the next step is to display them in your Lookbook's CMS page. As an example, let's say you want to add 2 widgets that feature two differents kinds of products. You'll need to hook both widgets into your CMS page, and also append code in order to make them appear or disappear whenever the user clicks on a category.
Prestashop 1.6
In Prestashop 1.6, paste the following code into CMS template file located at *themes/name_of_your_site_theme/cms.tpl*:
{if $cms->id eq 6}
<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">
{hook h='psWidget' id_pswidget='5'}
</li>
<li class="widget-item widget-item_hidden">
{hook h='psWidget' id_pswidget='6'}
</li>
</ul>
{literal}
<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>
/* 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>
{/literal}
{/if}
Prestashop 1.7
in Prestashop 1.7, paste the following code into CMS template file located at *themes/name_of_your_site_theme/templates/cms/page.tpl*:
{if $cms.id eq 6}
<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">
{hook h='psWidget' id_pswidget='5'}
</li>
<li class="widget-item widget-item_hidden">
{hook h='psWidget' id_pswidget='6'}
</li>
</ul>
{literal}
<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>
/* 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>
{/literal}
{/if}
Note: The id_pswidget value must be equal to the widget's id assigned by Prestashop's Photoslurp module, not the one in the Widget Editor.
You can hook 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.