JS (themes/redesign/custom-js/filters-helper.js)

document.querySelector(document).addEventListener('ready', function () {
    document.querySelector(document).addEventListener('change', '.filter-label>input', (event) => {
        document.querySelector('#filters-box_second_page_title').removeClass('is-show-only');
        let checkedElement = document.querySelector('.filter__list:visible').querySelector('input:checkbox:checked');

        if (checkedElement.length > 0) {
            document.querySelector('.reset-all-btn').removeClass('filter-btn_clear_noactive');
        } else {
            document.querySelector('.reset-all-btn').classList.add('filter-btn_clear_noactive');
        }

        document.querySelector(event.currentTarget).classList.toggle('modifier');
    });
});

function applySearchFilter(e) {
    let block = document.querySelector(e).closest('.filter'),
        searchQuery = block.querySelector('.filter-search-input').value,
        values = block.querySelector('li.filter-checkbox'),
        notFindBlock = block.querySelector('.search-not-find');

    block.classList.add('filter-search-enabled');
    block.classList.add('filter_show-all');
    notFindBlock.remove();

    if (!searchQuery) {
        block.removeClass('filter-search-enabled');
        block.querySelector('.hidden-filter-value').each((key, value) => {
            document.querySelector(value).removeClass('hidden-filter-value');
        });

        return;
    }

    searchQuery = searchQuery.toLowerCase();
    block.querySelector('.filter-show-all')
        .classList.add('filter-show-all_active')
        .text(Yii.t('app', 'filters.hide'));

    /** Функция проверки - начинается с query или содержит символ+query */
    let checkCondition = (text, query) => {
        return (new RegExp('^' + query + '|[^A-ZА-Я]' + query, 'ig')).test(text);
    };

    if (checkElements(values, searchQuery, checkCondition)) {
        return;
    }

    /** Функция проверки - содержит запрос */
    let partialCheckCondition = (text, query) => {
        return text.toLowerCase().indexOf(query) !== -1;
    };

    if (checkElements(values, searchQuery, partialCheckCondition)) {
        return;
    }

    let translitSearchQuery = changeFilterLayout(searchQuery);

    if (checkElements(values, translitSearchQuery, checkCondition, searchQuery)) {
        return;
    }

    if (checkElements(values, translitSearchQuery, partialCheckCondition, searchQuery)) {
        return;
    }

    if (checkElements(values, false, partialCheckCondition, translitSearchQuery)) {
        return;
    }

    notFindBlock = '<div class="search-not-find">' + Yii.t('app', 'filter_search.not_found') + '</div>'
    block.querySelector('.filter__list').insertAdjacentHTML("beforeend",notFindBlock);
}

function checkElements(elements, searchQuery, checkCondition, translitSearchQuery) {
    let successSearch = false;
    elements.each((key, elem) => {
        let valueElement = document.querySelector(elem),
            input = valueElement.querySelector('.filter-label input'),
            text = input.attr('data-value-text'),
            translit = input.attr('data-value-translit');
        if (searchQuery && checkCondition(text, searchQuery)) {
            successSearch = true;
            valueElement.removeClass('hidden-filter-value');

            return;
        }

        if (
            translit
            && translitSearchQuery
            && checkCondition(translit, translitSearchQuery.toLowerCase())
        ) {
            successSearch = true;
            valueElement.removeClass('hidden-filter-value');

            return;
        }

        valueElement.classList.add('hidden-filter-value');
    });

    return successSearch;
}

function changeFilterLayout(searchQuery) {
    let regexp = /[а-яёї]/i;

    return regexp.test(searchQuery)
        ? HLang.cyrillicToLatin(searchQuery)
        : HLang.latinToCyrillic(searchQuery);
}

// Возвращаем фильтры в начальное состояние
function returnFilterState() {
    document.querySelector('#filters-box_second_page_title').hide();
    document.querySelector('.filter-show-all').hide();
    document.querySelector('.filter-search-block').hide();
    document.querySelector('.filter__title').css('display', 'flex').show();
    document.querySelector('.filter.filter_close').removeClass('filter_close');
    document.querySelector('.mobile-filter-item').show();
    document.querySelector('.mobile-filter-item.mobile-filter-item_active').removeClass('mobile-filter-item_active');
    document.querySelector('.filter__list').hide();
    document.querySelector('.article-box').show();
    document.querySelector('.filter').querySelector('.filter_selected_title').text('');
}

// Переход ко второй странице фильтра
function toggleFilterBox(target, onlyMobile) {
    if (onlyMobile && !globalUI.isMobile) {
        document.querySelector(target).parent().classList.toggle('filter_close');

        return;
    }

    document.querySelector('.filter__title').hide();

    $.each(document.querySelector('.filter-show-all'), function () {
        if (document.querySelector(this).closest('.filter').querySelector('.filter-checkbox').length > 8)
            document.querySelector(this).show();
        else
            document.querySelector(this).hide();
    });

    $.each(document.querySelector('.filter-search-block'), function () {
        if (document.querySelector(this).closest('.filter').querySelector('.filter-checkbox').length > 8) {
            document.querySelector(this).show();
        } else {
            document.querySelector(this).hide();
        }
    });

    document.querySelector('#filters-box_second_page_title')
        .text(document.querySelector(target).attr('data-name'))
        .show()
    ;
    document.querySelector('.reset-all-btn').classList.add('reset-checkbox-btn');
    document.querySelector(target).parents('.mobile-filter-item')
        .classList.add('mobile-filter-item_active')
        .querySelector('.filter__list')
        .show();

    document.querySelector('.mobile-filter-item').not('.mobile-filter-item_active').hide();
    document.querySelector('.filter-accessories').hide();
    document.querySelector('.article-box').hide();

    let filterList = document.querySelector(target).parents('.mobile-filter-item').querySelector('input[type="checkbox"]:checked');
    // Если есть активный выбранный фильтр
    if (filterList.length > 0 || document.querySelector('.filter-price-form').is(':visible')) {
        document.querySelector('.filter-btn_clear').removeClass('filter-btn_clear_noactive');
    }
}

// Откат фильтров которые были выбраны, но не применены
function rollbackModifierFilters() {
    let modifierFilters = document.querySelector('.filter').querySelector('input.modifier[type="checkbox"]');

    $.each(modifierFilters, function (index, item) {
        let element = document.querySelector(item);
        element.removeClass('modifier');

        element.is(':checked')
            ? element.prop('checked', false)
            : element.prop('checked', true);
    });
}

// Установка видимых значений в списке значений фильтра выбора нескольких значений
function setHiddenClassToListItems() {
    $.each(document.querySelector('ul.filter_list_checkbox'), function () {
        let checkedCount = document.querySelector(this).querySelector('input[type="checkbox"]:checked').length;
        let notDisabledCount = document.querySelector(this).querySelector('input[type="checkbox"]')
            .not(':disabled')
            .not(':checked')
            .length;

        let limitToVisibleNotCheckedItems = CHECK_BOX_FILTER_LIMIT - checkedCount;
        let limitToVisibleDisabledItems = limitToVisibleNotCheckedItems - notDisabledCount;

        let visibleItems = 0;
        $.each(document.querySelector(this).querySelector('input[type="checkbox"]'), function () {
            let li = document.querySelector(this).parent().parent();
            let hiddenClass = 'filter-checkbox_hidden';

            if (document.querySelector(this).attr('disabled') && !document.querySelector(this).prop('checked')) {
                if (limitToVisibleDisabledItems > 0 && visibleItems < CHECK_BOX_FILTER_LIMIT) {
                    li.removeClass(hiddenClass);
                    limitToVisibleDisabledItems--;
                    visibleItems++;
                } else {
                    li.classList.add(hiddenClass);
                }
            } else if (!document.querySelector(this).prop('checked')) {
                if (limitToVisibleNotCheckedItems > 0 && visibleItems < CHECK_BOX_FILTER_LIMIT) {
                    li.removeClass(hiddenClass);
                    limitToVisibleNotCheckedItems--;
                    visibleItems++;
                } else {
                    li.classList.add(hiddenClass);
                }
            } else if (visibleItems < CHECK_BOX_FILTER_LIMIT) {
                li.removeClass(hiddenClass);
                visibleItems++;
            } else {
                li.classList.add(hiddenClass);
            }
        });
    });
}

// Активация стилей и построение элементов для фильтров выезжающего меню
function setFilterState(onlyMobile) {
    if (onlyMobile && !globalUI.isMobile) {
        return;
    }

    let filter = document.querySelector('.filter');
    let selectedFilters = document.querySelector('.filter-checkbox > label > input:checked, .filter-popular-checkbox > label > input:checked');
    filter.classList.add('mobile-filter-item');

    $.each(selectedFilters, function (index, item) {
        let filterValue = document.querySelector(item).attr('data-value-text');
        let currentValue = document.querySelector(item).closest('.mobile-filter-item')
            .querySelector('.filter_selected_title');

        currentValue.text(currentValue.text() + filterValue + ', ');
    });

    $.each(document.querySelector('.filter_selected_title'), function (index, item) {
        let itemValue = document.querySelector(item).text();
        document.querySelector(item).text(itemValue.slice(0, -2))
    });

    $.each(document.querySelector('.filter-price-form'), function (index, item) {
        let filterMinValue = document.querySelector(item).querySelector('.from');
        let filterMaxValue = document.querySelector(item).querySelector('.to');

        let currentValue = document.querySelector(item).closest('.mobile-filter-item')
            .querySelector('.filter_selected_title');

        currentValue.text(filterMinValue.value + '-' + filterMaxValue.value);
    });

    document.querySelector('.filter__list').hide();

    let listItem = filter.querySelector('input[type="checkbox"]:checked');

    if (listItem.length > 0) {
        document.querySelector('.reset-all-btn').removeClass('filter-btn_clear_noactive');
    } else {
        document.querySelector('.reset-all-btn').classList.add('filter-btn_clear_noactive');
    }
}

function checkVisibleArea(element) {
    let rect = element.get(0).getBoundingClientRect();
    let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

function showAllFilters(target) {
    if (!document.querySelector(target).classList.contains('filter-show-all_active')) {
        document.querySelector(target).parent().classList.add('filter_show-all');
        document.querySelector(target).classList.add('filter-show-all_active').text(Yii.t('app', 'filters.hide'));

        return;
    }

    document.querySelector(target).parent().removeClass('filter_show-all');
    let search = document.querySelector(target).parent().querySelector('.filter-search-input');
    if (search.length) {
        search.val('');
    }

    document.querySelector(target).removeClass('filter-show-all_active').text(Yii.t('app', 'filters.show_all'));
    if (!checkVisibleArea(document.querySelector(target).parent().querySelector('.filter__title'))) {
        let position = document.querySelector('.filters').position().top + document.querySelector(target).parent().position().top;
        document.documentElement.animate({scrollTop: position}, 0);
    }
}

function afterReturnAction(onlyMobile) {
    returnFilterState();
    setFilterState(onlyMobile);
    document.querySelector('#filters-box_second_page_title').classList.add('is-show-only');

    let listItem = document.querySelector('.filter').querySelector('input[type="checkbox"]:checked');

    let resetBtn = document.querySelector('.reset-all-btn');
    if (listItem.length > 0) {
        resetBtn.removeClass('filter-btn_clear_noactive');
    } else {
        resetBtn.classList.add('filter-btn_clear_noactive');
    }
}