<script type="template/klevu" id="klevuLandingTemplateBaseCustom">
<div ku-container data-container-id="ku_landing_main_container" data-container-role="main">
<header ku-container data-container-id="ku_landing_main_header_container" data-container-role="header">
<section ku-block data-block-id="ku_landing_main_header_sub_panel"></section>
<section ku-block data-block-id="ku_landing_main_header_banner">
<%=helper.render('klevuLandingPromotionBanner',scope,data,"top") %>
<%=helper.render('klevuLandingPromotionBanner',scope,data,"bottom") %>
</section>
<section ku-block data-block-id="ku_landing_main_header_site_navigation"></section>
</header>
<div class="kuContainer">
<% if(!helper.hasResults(data,"productList") && !helper.hasFilters(data,"productList")) { %>
<%=helper.render('noResultsFoundLanding',scope) %>
<% } else { %>
<%= helper.render('klevuLandingTemplateSearchBar', scope) %>
<%=helper.render('klevuLandingImageSearchUploadBanner',scope,data) %>
<%= helper.render('tab-results', scope) %>
<%= helper.render('results',scope) %>
<% } %>
<div class="kuClearBoth"></div>
</div>
<footer ku-container data-container-id="ku_landing_main_footer_container" data-container-role="footer">
<section ku-block data-block-id="ku_landing_main_footer_sub_panel"></section>
<section ku-block data-block-id="ku_landing_main_footer_banner">
</section>
</footer>
</div>
<!-- start of compare customization -->
<div class="klevu-compare-table" id="klevu-compare-table">
<table class="klevu-compare-table__products">
<div class="klevu-compare-table-header">
<label class="toggle-differences"><input type="checkbox" id="toggleDifferences" <% if (klevu_compare_show_differences_checked) { %>checked<% } %> /><%= helper.translate("Show only differences")%></label>
<button id="klevu-close-compare">
<svg style="pointer-events:none;" enable-background="new 0 0 386.667 386.667" height="15" viewBox="0 0 386.667 386.667" width="15">
<path d="m386.667 45.564-45.564-45.564-147.77 147.769-147.769-147.769-45.564 45.564 147.769 147.769-147.769 147.77 45.564 45.564 147.769-147.769 147.769 147.769 45.564-45.564-147.768-147.77z"/>
</svg>
</button>
</div>
<thead>
<tr>
<th class="klevu-compare-table__label"></th>
<th><img src="" alt=""><span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="klevu-compare-table__label">Label</td>
<td><div class="spec" spec-title="Label"></div></td>
</tr>
</tbody>
</table>
</div>
<!-- end of compare customization -->
</script>
<script type="template/klevu" id="klevuLandingTemplateFiltersCustom">
<% if(data.query[dataLocal].filters.length > 0 ) { %>
<div class="kuFilters" role="navigation" data-position="left" aria-label="Product Filters" tabindex="0">
<!-- start of compare customization -->
<div class="klevu-compare-widget klevu-compare-widget--klevu-hidden" id="klevu-compare-widget">
<ul class="klevu-compare-widget__images"></ul>
<div class="klevu-compare-widget__header">
<span><%= helper.translate("To compare")%><span class="klevu-compare-widget__selected-amount"></span></span>
<button id="klevu-compare-button" type="button" disabled><%= helper.translate("Compare")%></button>
</div>
</div>
<!-- end of compare customization -->
<h3 class="kuFiltersTitleHeading"><%=helper.translate("Narrow by")%></h3>
<% helper.each(data.query[dataLocal].filters,function(key,filter){ %>
<% if(filter.type == "OPTIONS"){ %>
<div class="kuFilterBox klevuFilter <%=(filter.multiselect)?'kuMulticheck':''%>" data-filter="<%=filter.key%>" <% if(filter.multiselect){ %> data-singleselect="false" <% } else { %> data-singleselect="true"<% } %>>
<div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
<% var filter_label = (filter.label=="klevu_price") ? "price" : filter.label; %>
<%=helper.translate(filter_label)%>
</div>
<div data-optionCount="<%= filter.options.length %>" class="kuFilterNames <%= (filter.options.length <= 5 ) ? 'kuFilterShowAll': '' %> <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
<ul>
<% helper.each(filter.options,function(key,filterOption){ %>
<li <% if(filterOption.selected ==true) { %> class="kuSelected"<% } %>>
<a
target="_self"
href="#"
title="<%=helper.escapeHTML(filterOption.name)%>"
class="klevuFilterOption<% if(filterOption.selected ==true) { %> klevuFilterOptionActive<% } %>"
data-value="<%=helper.escapeHTML(filterOption.value)%>"
data-name="<%=helper.escapeHTML(filterOption.name)%>"
>
<span class="kuFilterIcon"></span>
<span class="kufacet-text"><%=filterOption.name%></span>
<% if(filterOption.selected ==true) { %>
<span class="kuFilterCancel">X</span>
<% } else { %>
<span class="kuFilterTotal"><%=filterOption.count%></span>
<% } %>
</a>
</li>
<% }); %>
</ul>
<% if(filter.options.length > 5 ) { %>
<div class="kuShowOpt" tabindex="-1">
<span class="kuFilterDot"></span><span class="kuFilterDot"></span><span class="kuFilterDot"></span>
</div>
<% } %>
</div>
</div>
<% } else if(filter.type == "SLIDER") { %>
<div class="kuFilterBox klevuFilter" data-filter="<%=filter.key%>">
<div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
<% var filter_label = (filter.label=="klevu_price") ? "price" : filter.label; %>
<%=helper.translate(filter_label)%>
</div>
<div class="kuFilterNames sliderFilterNames <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
<div class="kuPriceSlider klevuSliderFilter" data-query = "<%=dataLocal%>">
<div data-querykey = "<%=dataLocal%>" class="noUi-target noUi-ltr noUi-horizontal noUi-background kuSliderFilter kuPriceRangeSliderFilter<%=dataLocal%>"></div>
</div>
</div>
</div>
<% } else if (filter.type == "RATING") { %>
<div class="kuFilterBox klevuFilter <%=(filter.multiselect)?'kuMulticheck':''%>" data-filter="<%=filter.key%>" <% if(filter.multiselect){ %> data-singleselect="false" <% } else { %> data-singleselect="true"<% } %>>
<div class="kuFilterHead <%=(filter.isCollapsed) ? 'kuExpand' : 'kuCollapse'%>">
<%=helper.translate(filter.label)%>
</div>
<div data-optionCount="<%= filter.options.length %>" class="kuFilterNames <%= (filter.options.length <= 5 ) ? 'kuFilterShowAll': '' %> <%=(filter.isCollapsed) ? 'kuFilterCollapse' : ''%>">
<ul>
<% helper.each(filter.options,function(key,filterOption){ %>
<li <% if(filterOption.selected ==true) { %> class="kuSelected"<% } %>>
<a
target="_self"
href="#"
title="<%=helper.escapeHTML(filterOption.name)%>"
class="klevuFilterOption<% if(filterOption.selected ==true) { %> klevuFilterOptionActive<% } %>"
data-value="<%=helper.escapeHTML(filterOption.value)%>"
data-name="<%=helper.escapeHTML(filterOption.name)%>"
>
<span class="kuFilterIcon"></span>
<span class="kufacet-text">
<div class="klevuFacetStars">
<div class="klevuFacetRating" style="width:<%=(20*Number(filterOption.name))%>%;"></div>
</div>
</span>
<% if(filterOption.selected ==true) { %>
<span class="kuFilterCancel">X</span>
<% } else { %>
<span class="kuFilterTotal"><%=filterOption.count%></span>
<% } %>
</a>
</li>
<% }); %>
</ul>
</div>
</div>
<% } else { %>
<!-- Other Facets -->
<% } %>
<% }); %>
<!-- <div class="kuFiltersFooter">
<a target="_self" href="javascript:void(0)" class="kuBtn kuFacetsSlideOut kuMobileFilterCloseBtn" role="button" tabindex="0" area-label=""><%=helper.translate("Close")%></a>
</div> -->
</div>
<% } %>
</script>
<script type="template/klevu" id="klevuLandingTemplateProductBlockCustom">
<%
var updatedProductName = dataLocal.name;
if(klevu.search.modules.kmcInputs.base.getSkuOnPageEnableValue()) {
if(klevu.dom.helpers.cleanUpSku(dataLocal.sku)) {
updatedProductName += klevu.dom.helpers.cleanUpSku(dataLocal.sku);
}
}
%>
<li ku-product-block class="klevuProduct" data-id="<%=dataLocal.id%>">
<div class="kuProdWrap">
<header ku-block data-block-id="ku_landing_result_item_header">
<%=helper.render('landingProductBadge', scope, data, dataLocal) %>
</header>
<% var desc = [dataLocal.summaryAttribute,dataLocal.packageText,dataLocal.summaryDescription].filter(function(el) { return el; }); desc = desc.join(" "); %>
<main ku-block data-block-id="ku_landing_result_item_info">
<div class="kuProdTop">
<div class="klevuImgWrap">
<a data-id="<%=dataLocal.id%>" href="<%=dataLocal.url%>" class="klevuProductClick kuTrackRecentView">
<img src="<%=dataLocal.image%>" origin="<%=dataLocal.image%>" onerror="klevu.dom.helpers.cleanUpProductImage(this)" alt="<%=updatedProductName%>" class="kuProdImg">
<%=helper.render('landingImageRollover', scope, data, dataLocal) %>
</a>
</div>
<!-- <div class="kuQuickView">
<button data-id="<%=dataLocal.id%>" class="kuBtn kuBtnLight kuQuickViewBtn" role="button" tabindex="0" area-label="">Quick view</button>
</div> -->
</div>
</main>
<footer ku-block="" data-block-id="ku_landing_result_item_footer">
<div class="kuProdBottom">
<div class="kuName kuClippedOne"><a data-id="<%=dataLocal.id%>" href="<%=dataLocal.url%>" class="klevuProductClick kuTrackRecentView" title="<%= updatedProductName %>"><%= updatedProductName %></a></div>
<% if(dataLocal.inStock && dataLocal.inStock != "yes") { %>
<%=helper.render('landingProductStock', scope, data, dataLocal) %>
<% } else { %>
<% if(klevu.search.modules.kmcInputs.base.getShowPrices()) { %>
<div class="kuPrice">
<%
var kuTotalVariants = klevu.dom.helpers.cleanUpPriceValue(dataLocal.totalVariants);
var kuStartPrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.startPrice,dataLocal.currency);
var kuSalePrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.salePrice,dataLocal.currency);
var kuPrice = klevu.dom.helpers.cleanUpPriceValue(dataLocal.price,dataLocal.currency);
%>
<% if(!Number.isNaN(kuTotalVariants) && !Number.isNaN(kuStartPrice)) { %>
<div class="kuSalePrice kuStartPrice kuClippedOne">
<span class="klevuQuickPriceGreyText"><%=helper.translate("Starting at")%></span>
<span><%=helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.startPrice))%></span>
</div>
<% } else if(!Number.isNaN(kuSalePrice) && !Number.isNaN(kuPrice) && (kuPrice > kuSalePrice)){ %>
<span class="kuOrigPrice kuClippedOne">
<%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.price)) %>
</span>
<span class="kuSalePrice kuSpecialPrice kuClippedOne">
<%=helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.salePrice))%>
</span>
<% } else if(!Number.isNaN(kuSalePrice)) { %>
<span class="kuSalePrice kuSpecialPrice">
<%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.salePrice)) %>
</span>
<% } else if(!Number.isNaN(kuPrice)) { %>
<span class="kuSalePrice">
<%= helper.processCurrency(dataLocal.currency,parseFloat(dataLocal.price)) %>
</span>
<% } %>
<%=helper.render('searchResultProductVATLabel', scope, data, dataLocal) %>
</div>
<% } %>
<% } %>
</div>
<div class="kuProdAdditional">
<div class="kuProdAdditionalData">
<% if(desc && desc.length) { %>
<div class="kuDesc kuClippedTwo"> <%=desc%> </div>
<% } %>
<%=helper.render('landingProductSwatch',scope,data,dataLocal) %>
<%=helper.render('klevuLandingProductRating',scope,data,dataLocal) %>
<% var isAddToCartEnabled = klevu.search.modules.kmcInputs.base.getAddToCartEnableValue(); %>
<% if(isAddToCartEnabled) { %>
<%=helper.render('landingPageProductAddToCart',scope,data,dataLocal) %>
<% } %>
</div>
</div>
</footer>
</div>
<!-- start of compare customization -->
<button class="klevu-compare" data-id="<%=dataLocal.id%>" data-itemGroupId="<%=dataLocal.itemGroupId%>">
<input id="klevuCompare_<%=dataLocal.id%>" class="klevu-compare__checkbox" type="checkbox" style="pointer-events:none"/>
<label for="klevuCompare_<%=dataLocal.id%>" class="klevu-compare__label"> <%= helper.translate("Compare")%> </label>
</button>
<!-- end of compare customization -->
</li>
</script>