How To
Facet Show/Hide

5min
﻿
By default the sections within the facets menu are expanded when the page loads. Depending on the amount of filters/options, as well as the intention of the UI, it may be desired to have the menu load in an alternative state.
This guide presents two options:
 Default as collapsed (default and/or mobile view)
Toggle visibility on button click (mobile optimized)
﻿
Default as Collapsed 
By default the facets within the menu are expanded when the page loads. Depending on the amount of facets as well as the intention of the UI, it may be desired to have each load in a collapsed state.
The following example reverses the default state so that the filters appear as collapsed.
A built in conditional check for isMobileDevice() identifies mobile user-agents.
JS
|
// This variable ensures we only collapse the filters on page load
var klevu_filters_collapsed = false;

// Change this value to true if you only want to collapse filters on mobile
var klevu_filters_collapsed_mobile_only = false;

klevu.afterTemplateRender('landing,catnav', function(data, scope){
  if (!klevu_filters_collapsed && (klevu.dom.helpers.isMobileDevice() || !klevu_filters_collapsed_mobile_only)) {

    // Find all filter triggers and click them to collapse them
    var filterHeaders = document.querySelectorAll('.klevuMeta[data-section="productList"] .kuFilterHead.kuCollapse');
    if (filterHeaders.length) {
        klevu.each(filterHeaders, function(key, header){
            header.click();
        });
    }          
    klevu_filters_collapsed = true;
  } 
});

// This variable ensures we only collapse the filters on page load
var klevu_filters_collapsed = false;

// Change this value to true if you only want to collapse filters on mobile
var klevu_filters_collapsed_mobile_only = false;

klevu.afterTemplateRender('landing,catnav', function(data, scope){
  if (!klevu_filters_collapsed && (klevu.dom.helpers.isMobileDevice() || !klevu_filters_collapsed_mobile_only)) {

    // Find all filter triggers and click them to collapse them
    var filterHeaders = document.querySelectorAll('.klevuMeta[data-section="productList"] .kuFilterHead.kuCollapse');
    if (filterHeaders.length) {
        klevu.each(filterHeaders, function(key, header){
            header.click();
        });
    }          
    klevu_filters_collapsed = true;
  } 
});
﻿
Facet Menu Collapsed on Page Load
﻿
﻿
Toggle Visibility on Button Click
The responsive nature of the Klevu Template re-positions the facet menu at the top of the product grid as the screen viewport is reduced to a mobile aspect ratio.
Depending on the amount of displayable facets and/or other components of the UI, it is possible the the facet menu would extend beyond the initial page view on a mobile device, even if collapsed. In this scenario, hiding the facets from initial view and then revealing them on a button trigger can be a useful modification.
The following example suppresses the facet menu on a mobile aspect ratio. A button is placed at the top of the product grid with a small icon and text. Triggering the button will toggle the facet menu visibility.
HTML
|
<script type="text/javascript">

// Create the useroptions object if it does not already exist
if (!window.klevu_uc_userOptions) window.klevu_uc_userOptions = {};

// set the landingFilterPosition
window.klevu_uc_userOptions.landingFilterPosition = 'top';

klevu({
  theme: {
    setTemplates: {
      filtersCollapsedHidden: {
        scope: "landing,catnav",
        selector: "#klevuLandingTemplateFiltersCollapsed",
        name: "filters"
      }
    },
  },
});

klevu.afterTemplateRender("landing,catnav", function(data, scope) {
  var target = klevu.getSetting(
    scope.kScope.settings,
    "settings.search.searchBoxTarget"
  );
  klevu.each(klevu.dom.find("#kuFilterOpener", target), function (
    key,
    value
  ) {
    klevu.event.attach(value, "click", function (event) {
      document
        .getElementsByTagName("body")[0]
        .classList.toggle("filter_opened");
    });
  });
});

</script>

<style>
/* CSS to show and hide filters on smaller screens, but 
  always show filters on larger screens */
.kuFilters {
  display: block;
}
.kuFiltersTop, .filter_opened .kuFiltersTop {
  display: none;
}
#kuFilterOpener {
  display: none;
}
@media (max-width: 768px) {
  .kuFiltersTop {
    display: none;
  }
  .kuFilters {
    display: none;
  }
  .filter_opened .kuFiltersTop {
    display: block;
  }
  body .kuSearchResultsPageContainer [ku-container][data-container-id="ku_landing_main_content_left"] {
    position: relative;
    max-width: initial;
    width: 100%;
    min-height: 42px;
    display: block;
  }
  #kuFilterOpener {
    display: block;
    width: 80%;
    height: 32px;
    margin: auto;
  }
}
</style>

<!-- override template to filter button which will open close filters on the mobile -->
<script type="template/klevu" id="klevuLandingTemplateFiltersCollapsed">
  <% if(data.query[dataLocal].filters.length > 0 ) { %>
    <button id="kuFilterOpener"> 
        <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <image width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAA9pJREFUeJzt3c1R20AYxvEnH/foyC1KBZAKonRAB7iD0AHuIKQCnAoMFSBOOUIqQKkAuQJyWHmGMbtCkl+vvv6/mR0YGUuvvavdlex9kQAAAAAAAAAAAAAAAABgrBJJPyStJT3vlHX1WNJbdDioC0lPel3xu+Wp+ltMRCL/Gf9WWYveYBK6VP7LRoARW6p75W/LMnLMMJKq2ZjfZE6QRo0cJi61f+Vvy2Xk2KN5V/NYKumbht/6N/JX0KPsYi8kffFsP5f0yegYh1JIuqt+NpbJpvuMUfLAa7A+jk8+gNffdBjLfC/gfeCFLTXuS6BsJPuMJVFgMhtqAGOufLQQagCrmEEcwMNI9hnTtW/jx8AfX0oqJZ1q+L2Br2JKucmh1QRtU+2zybGHppSr/FXPcUS3kt0kahU1cpjIZNcAsqiRw0yu/SvfO3ZiHBK5MbBr5Rca/hwIbzhRt0ZQVs/FBCRqNxzk4syfpFO5Mb1uvM/6Cq4PdR8GTVki171vz/JS7pred60PAAAAAAAAAAAAACM014+DhyiRdFz9ftdnIIgnk3Ql/zrMR0k/NfzFueggkXSr5gs7L/oJE4dwom4rr8lZNAGJ9lt2fxU/ZFhq2u3XlWXsoGHjVPtX/nZOwFAwQrlsGsCzXGoaE3X3ATK5HEFo559erybejv1WbuR6lF2hq4U7hVPpeFl1V3MsS8/7mR3gOD51S+B8DSaYIcSsi4GkeGN2XcIKb52GGgBmItQAJpsYsSexlpwd1zzmrdNQjqBrSd81s4WSRgrPNutcQjeB7b8C23O1nATCXq4BXgYiHqsrq1LcCBqtXJz9s7ZvzqJV9IhhrmvOomvR9U9Gm5xFpfgEcLIyuW7d1yMUctfu6SED4Euhw7HNWyRxzQ4AAAAAAAAAAABgb0P5ODiV9Ln6WVTbyJMzA2eS7hX+NsxarE2YpBO5JEhNvw9HepQJWahbmpR70QhGr2uCpJeNAIY+RD7eH0lHezz/SG7imptEg6gWslka9SSSJ45S3Wyf5VE9qbsPcCa3oLHtxOuvXldQKjfrt/Ig6atn+63hMaailFtV9LvNk87V/excevaX7bG/UPEpDnCcqZRWKWLOAtu7So33F1JEOs4YtUoStTE+OP+Ve6BCDWCp7o3AN2ewbgCh2Opy5MzZRoEFpqEcQbncTZtM7bvvIrA/S6H9hXLkzFkh934VvUYhNxO1mtAs4oYOC5lsKr+IGzYsWfQC3tksxiGRu4nTtfJJYDkBXRsBlT8hidxlSdMxn25/olK5W5S7PcL2/vWir8AAAAAAAAAAAAAAAAAAYHz+Ay8t1mZnuutoAAAAAElFTkSuQmCC" id="img_1" />
        </defs>
        <g>
            <use xlink:href="#img_1" fill="#FFFFFF" stroke="none" transform="scale(0.109375 0.109375)" />
        </g>
        </svg>
        Filters
    </button>
      <div class="kuFilters" role="navigation" data-position="left" aria-label="Product Filters" tabindex="0">

        <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)%>"
                                      >
                                          <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 { %>
                  <!-- 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="text/javascript">

// Create the useroptions object if it does not already exist
if (!window.klevu_uc_userOptions) window.klevu_uc_userOptions = {};

// set the landingFilterPosition
window.klevu_uc_userOptions.landingFilterPosition = 'top';

klevu({
  theme: {
    setTemplates: {
      filtersCollapsedHidden: {
        scope: "landing,catnav",
        selector: "#klevuLandingTemplateFiltersCollapsed",
        name: "filters"
      }
    },
  },
});

klevu.afterTemplateRender("landing,catnav", function(data, scope) {
  var target = klevu.getSetting(
    scope.kScope.settings,
    "settings.search.searchBoxTarget"
  );
  klevu.each(klevu.dom.find("#kuFilterOpener", target), function (
    key,
    value
  ) {
    klevu.event.attach(value, "click", function (event) {
      document
        .getElementsByTagName("body")[0]
        .classList.toggle("filter_opened");
    });
  });
});

</script>

<style>
/* CSS to show and hide filters on smaller screens, but 
  always show filters on larger screens */
.kuFilters {
  display: block;
}
.kuFiltersTop, .filter_opened .kuFiltersTop {
  display: none;
}
#kuFilterOpener {
  display: none;
}
@media (max-width: 768px) {
  .kuFiltersTop {
    display: none;
  }
  .kuFilters {
    display: none;
  }
  .filter_opened .kuFiltersTop {
    display: block;
  }
  body .kuSearchResultsPageContainer [ku-container][data-container-id="ku_landing_main_content_left"] {
    position: relative;
    max-width: initial;
    width: 100%;
    min-height: 42px;
    display: block;
  }
  #kuFilterOpener {
    display: block;
    width: 80%;
    height: 32px;
    margin: auto;
  }
}
</style>

<!-- override template to filter button which will open close filters on the mobile -->
<script type="template/klevu" id="klevuLandingTemplateFiltersCollapsed">
  <% if(data.query[dataLocal].filters.length > 0 ) { %>
    <button id="kuFilterOpener"> 
        <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <image width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAA9pJREFUeJzt3c1R20AYxvEnH/foyC1KBZAKonRAB7iD0AHuIKQCnAoMFSBOOUIqQKkAuQJyWHmGMbtCkl+vvv6/mR0YGUuvvavdlex9kQAAAAAAAAAAAAAAAABgrBJJPyStJT3vlHX1WNJbdDioC0lPel3xu+Wp+ltMRCL/Gf9WWYveYBK6VP7LRoARW6p75W/LMnLMMJKq2ZjfZE6QRo0cJi61f+Vvy2Xk2KN5V/NYKumbht/6N/JX0KPsYi8kffFsP5f0yegYh1JIuqt+NpbJpvuMUfLAa7A+jk8+gNffdBjLfC/gfeCFLTXuS6BsJPuMJVFgMhtqAGOufLQQagCrmEEcwMNI9hnTtW/jx8AfX0oqJZ1q+L2Br2JKucmh1QRtU+2zybGHppSr/FXPcUS3kt0kahU1cpjIZNcAsqiRw0yu/SvfO3ZiHBK5MbBr5Rca/hwIbzhRt0ZQVs/FBCRqNxzk4syfpFO5Mb1uvM/6Cq4PdR8GTVki171vz/JS7pred60PAAAAAAAAAAAAACM014+DhyiRdFz9ftdnIIgnk3Ql/zrMR0k/NfzFueggkXSr5gs7L/oJE4dwom4rr8lZNAGJ9lt2fxU/ZFhq2u3XlWXsoGHjVPtX/nZOwFAwQrlsGsCzXGoaE3X3ATK5HEFo559erybejv1WbuR6lF2hq4U7hVPpeFl1V3MsS8/7mR3gOD51S+B8DSaYIcSsi4GkeGN2XcIKb52GGgBmItQAJpsYsSexlpwd1zzmrdNQjqBrSd81s4WSRgrPNutcQjeB7b8C23O1nATCXq4BXgYiHqsrq1LcCBqtXJz9s7ZvzqJV9IhhrmvOomvR9U9Gm5xFpfgEcLIyuW7d1yMUctfu6SED4Euhw7HNWyRxzQ4AAAAAAAAAAABgb0P5ODiV9Ln6WVTbyJMzA2eS7hX+NsxarE2YpBO5JEhNvw9HepQJWahbmpR70QhGr2uCpJeNAIY+RD7eH0lHezz/SG7imptEg6gWslka9SSSJ45S3Wyf5VE9qbsPcCa3oLHtxOuvXldQKjfrt/Ig6atn+63hMaailFtV9LvNk87V/excevaX7bG/UPEpDnCcqZRWKWLOAtu7So33F1JEOs4YtUoStTE+OP+Ve6BCDWCp7o3AN2ewbgCh2Opy5MzZRoEFpqEcQbncTZtM7bvvIrA/S6H9hXLkzFkh934VvUYhNxO1mtAs4oYOC5lsKr+IGzYsWfQC3tksxiGRu4nTtfJJYDkBXRsBlT8hidxlSdMxn25/olK5W5S7PcL2/vWir8AAAAAAAAAAAAAAAAAAYHz+Ay8t1mZnuutoAAAAAElFTkSuQmCC" id="img_1" />
        </defs>
        <g>
            <use xlink:href="#img_1" fill="#FFFFFF" stroke="none" transform="scale(0.109375 0.109375)" />
        </g>
        </svg>
        Filters
    </button>
      <div class="kuFilters" role="navigation" data-position="left" aria-label="Product Filters" tabindex="0">

        <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)%>"
                                      >
                                          <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 { %>
                  <!-- 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>
﻿
Facet Toggle on Mobile View
﻿
﻿
Updated 05 Sep 2023
Did this page help you?
Facet Option Order
Infinite Scroll Results
Docs powered by
Archbee
TABLE OF CONTENTS
Default as Collapsed
Toggle Visibility on Button Click