Фильтрация элементов репитера по нескольким тегам выбора в Wix

Я создаю веб-сайт Wix с коллекцией данных (проектов) с несколькими полями тегов выбора (DepartmentTags, orgnisationTags, sectionTags, statusTags). Я создал на своем веб-сайте повторитель для отображения сбора данных и хочу отфильтровать отображаемые элементы на основе нескольких фильтров тегов выбора.

На данный момент я отфильтровал список только на основе одного набора тегов выбора (DepartmentTags). Поэтому, когда выбран DepartmentTag, список проектов, принадлежащих этому отделу, фильтруется.

      import wixData from 'wix-data';

const collectionName = 'projects';

$w.onReady(function () { 

    setRepeatedItemsInRepeater()
    loadDataToRepeater()

    $w('#departmentTags').onChange((event) => {
        const selectedTags = $w('#departmentTags').value
        loadDataToRepeater(selectedTags)
    })
    
});

function setRepeatedItemsInRepeater() {
    $w('#projectRepeater').onItemReady(($item, itemData) => {

        $item('#projectImage').src = itemData.Image;
        $item('#projectTitle').text = itemData.Title;
        $item('#projectSummary').text = itemData.Summary;

    })
}

function loadDataToRepeater(selectedCategories = []) {

    let dataQuery = wixData.query(collectionName)

    if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll('department', selectedCategories)
    }
    
    dataQuery
        .find()
        .then(results => {
            const itemsReadyForRepeater = results.items
            $w('#projectRepeater').data = itemsReadyForRepeater;
        })
}

Теперь я также хочу включить остальные теги выбора в фильтрацию проектов. Например, я хочу, чтобы пользователь мог выбирать отделы, организации и статусы, а перечисленные проекты на ретрансляторе фильтровались по всем трем категориям.

1 ответ

Похоже, вам нужно установить onChange всех элементов тега к некоторой функции, например:

      function tagChange() {
  const selectedDepts = $w('#departmentTags').value;
  const selectedOrgs = $w('#organizationTags').value;
  const selectedStatuses = $w('#statusTags').value;

  loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses);
}

Затем измените loadDataToRepeater функция будет выглядеть примерно так:

      function loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses) {

    wixData.query(collectionName)
      .hasAll('department', selectedDepts)
      .hasAll('organization', selectedOrgs)
      .hasAll('status', selectedStatuses)
      .find()
      .then(results => {
        $w('#projectRepeater').data = results.items;
      });
}
Другие вопросы по тегам