🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Advanced Filter

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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 two custom filtering function (priceRange and indexValue) for filtering by price (Input Slider) and filtering by index (Input Nuber). 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;
    }
  });
}

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);

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us