Пользовательские фильтры пользовательского интерфейса Webflow CMS

Небольшой учебник по созданию пользовательских фильтров для элементов DOM

ШАГ 1

Импорт List.js и RxJS

В пользовательском коде вашей страницы внутри тега ‹head›

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

ШАГ 2

Написать собственный код

В пользовательском коде вашей страницы перед тегом ‹/body›

‍<script>
var options = {
  valueNames: [
    'gender',
    'lang',
  ],
};

const masterDivId = 'stroumphs';

const observer = new MutationObserver(function(mutations, MO) {
  const masterDiv = document.getElementById(masterDivId);
  if (masterDiv && masterDiv.childNodes) {
    MO.disconnect(); // stop observing
    handleList();
    return;
  }
});

// start observing
observer.observe(document, {
  childList: true,
  subtree: true,
});

const handleList = function() {
  const itemsList = new List(masterDivId, options);

  const filters = [].reduce.call(
    document.getElementsByClassName('filters'),
    function(acc, el) {
      if (acc[el.id] == undefined) {
        acc[el.id] = new rxjs.BehaviorSubject(undefined);
      }
      rxjs.fromEvent(el, 'change').subscribe(function(event) {
        acc[el.id].next(event.target.value || undefined);
      });
      return acc;
    },
    {},
  );

  document.getElementById('reset').addEventListener('click', function() {
    itemsList.filter();
  });

  const mergedObservable = rxjs.combineLatest.apply(
    null,
    Object.values(filters),
  );

  mergedObservable.subscribe(function(values) {
    itemsList.filter(function(item) {
      const values = item.values();
      return Object.entries(filters).reduce(function(acc, filter) {
        const filterName = filter[0].replace('filter', '').toLowerCase();

        if (!acc) return false;
        if (
          filter[1].getValue() == undefined ||
          values[filterName]
            .toLowerCase()
            .match(filter[1].getValue().toLowerCase())
        ) {
          return true;
        }
        return false;
      }, true);
    });
  });
};
</script>

Options представляет ключи вашего объекта

Константа «masterDivId» — это идентификатор вашей оболочки списка коллекций div.

Затем ваш div Collection List должен быть связан с классом «.list» (для работы list.js)

ШАГ 3

Создать форму фильтра

На своей странице создайте форму с вашими фильтрами

И воздействовать на селектор класса «.filters» (для анализа кодом шага 2). Дайте им идентификатор, соответствующий ключу вашей коллекции для фильтрации (например, filterGender или filterLang).

ШАГ 4

Добавьте предметы вашей коллекции

Под списком коллекций поместите элемент с именем класса, соответствующим вашим ключам для фильтрации.

НАСЛАЖДАЙТЕСЬ БЕСПЛАТНЫМИ СОБСТВЕННЫМИ ФИЛЬТРАМИ ДЛЯ WEBFLOW!