Advanced Filter

A template including a panel with filter options and a gallery of filterable items.

Dependencies

• Accordion
• Custom Select
• Filter
• Number Input
• Radio Checkbox Buttons
• Read More
• Responsive Sidebar
• Search Input
• Slider
• Multi-Value Slider

How to

The Advanced Filter template is used to create a filterable gallery of elements, with advanced filtering options.

The filter sidebar is built using different custom inputs that you can find in the CodyHouse UI gallery. Add/remove those elements based on your needs.

Filtering #

The template uses the Filter component for the filtering animation. We have created three custom filtering function (priceRange, indexValue and searchInput) for filtering by price (Input Slider), filtering by index (Input Nuber) and by search (Input Search). You can modify/remove/add custom functions based on your needs:

var gallery = document.getElementById('adv-filter-gallery');
if(gallery) {
  new Filter({
    element: gallery, // this is your gallery element
    priceRange: function(items){ // this is the price custom function
      var filteredArray = [],
        minVal = document.getElementById('priceMinValue').value,
        maxVal = document.getElementById('priceMaxValue').value;
      for(var i = 0; i < items.length; i++) {
        var price = parseInt(items[i].getAttribute('data-price'));
        filteredArray[i] = (price >= minVal) && (price <= maxVal);
      } 
      return filteredArray;
    },
    indexValue: function(items){ // this is the index custom function
      var filteredArray = [],
        value = document.getElementById('indexValue').value;
      for(var i = 0; i < items.length; i++) {
        var index = parseInt(items[i].getAttribute('data-sort-index'));
        filteredArray[i] = index >= value;
      } 
      return filteredArray;
    },
    searchInput: function(items) { // this is the search custom function
      var filteredArray = [],
        value = document.getElementById('search-products').value; // search input
      for(var i = 0; i < items.length; i++) {
        // you can update the data-search attribute to include all search values (in the demo, only categories are included)
        var searchFilter = items[i].getAttribute('data-search');
        filteredArray[i] = searchFilter == '' || searchFilter.toLowerCase().indexOf(value.toLowerCase()) > -1;
      } 
      return filteredArray;
    }
  });
}

You can find more info on setting up filters and custom functions on the Filter component Info page.

Filter Selection Preview #

Each filter section has a label that shows the selected filters. It remains visible when the section is collapsed to remind the user of the filter selections they did.

The value of the labels differs based on the type of controls the section contains. You can customize these values passing data attributes to the .js-adv-filter__item parent element.

Radio/Checkbox list

• If no options are selected, the data-default-text attribute is used;
• If a single option is selected, the label of that option is used;
• If mutiple options are selected, the data-multi-select-text attribute is used ({n} is replaced by the number of selections).

<li class="js-adv-filter__item" data-multi-select-text="{n} filters selected" data-default-text="All">
  <!-- This label will be updated based on selection -->
  <span class="js-adv-filter__selection">All</span>

  <!-- List of nputs here -->
</li>

Select element

The label of the selected <option> is used.

Input Range

The data-number-format attribute is used ({n} is replaced by the value of the <input type="range">).

<li class="js-adv-filter__item" data-number-format="${n}">
  <!-- This label will be updated based on selection -->
  <span class="js-adv-filter__selection">$100</span>

  <!-- input range here -->
</li>

Input Number

If the section contains a single <input type="number">:

• If the input value is equal to its min value, the data-default-text attribute is used;
• If the input value is bigger than its min value, the data-number-format attribute is used ({n} is replaced by the value of the <input type="number">).

If the section contains multiple <input type="number">:

• If the value of each input is equal to its min value, the data-default-text attribute is used;
• If one (or multiple) input value is bigger than its min value, the data-multi-select-text is used ({n} is replaced by the number of modified <input type="number">).

Custom Filtering #

If you do not want to use the Filter component to animate your gallery (e.g., you need to fetch your results from a databse), here's some steps you need to follow:

• In the advanced-filter.js file, remove the initialization of the Filter object (bottom of the file);

// in the advanced-filter.js, remove the code below 👇
var gallery = document.getElementById('adv-filter-gallery');
if(gallery) {
  // Filter object initialization here
}

• For the counting function to work, make sure to trigger the filter-selection-updated event at the end of each filtering;

var customEvent = new CustomEvent('filter-selection-updated');
var galleryList = document.getElementsByClassName('js-adv-filter__gallery')[0];
galleryList.dispatchEvent(customEvent);

Categories

• Content and Layout > Filter
• Content and Layout > Sidebar
• Ecommerce > Filter

Bug report & feedback

Component Github page ↗