Как реализовать множественную фильтрацию карточек товаров по нажатию на несколько переключателей?

Question

[Никита]

Я разрабатываю сайт на Worpress с подключением своего плагина на php. Там я через шорткод вывожу код html на страницу с переключателями и карточками товаров.

И мне нужно реализовать множественную фильтрацию карточек по нажатию на переключатели. То есть, когда выбирается, например, фильтр "Корпус 1", то показываются, соответственно, карточки с корпусом 1. И когда дальше выбираются ещё фильтры, чтобы они работали одновременно. То есть (Корпус 1, Шведский стол, Валюта USD и так далее), чтобы фильтры друг на друга накладывались.
Пример кода переключателя (Корпус):

<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-aa354fc sc_inner_width_none sc_content_align_inherit sc_layouts_column_icons_position_left sc_fly_static trx_addons_parallax_layers_inited trx_addons_parallax_blocks_inited" data-id="aa354fc" data-element_type="column">
    <div class="elementor-widget-wrap elementor-element-populated">
        <div class="elementor-element elementor-element-14aba057 sc_fly_static elementor-widget elementor-widget-elementskit-heading trx_addons_parallax_layers_inited trx_addons_parallax_blocks_inited" data-id="14aba057" data-element_type="widget" data-settings="{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}" data-widget_type="elementskit-heading.default">
            <div class="elementor-widget-container">
                <div class="ekit-wid-con">
                    <div class="ekit-heading elementskit-section-title-wraper text_left   ekit_heading_tablet-   ekit_heading_mobile-">
                        <h6 class="ekit-heading--title elementskit-section-title ">Корпус</h6>
                    </div>
                </div>
            </div>
        </div>
        <!--Переключатель Корпус-->
        <div class="elementor-element elementor-element-8c906a8 elementor-widget__width-initial sc_fly_static elementor-widget elementor-widget-elementskit-advanced-toggle trx_addons_parallax_layers_inited trx_addons_parallax_blocks_inited" data-id="8c906a8" data-element_type="widget" data-settings="{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}" data-widget_type="elementskit-advanced-toggle.default">
            <div class="elementor-widget-container">
                <div class="ekit-wid-con">
                    <div class="elementkit-toggle-tab-wraper">
                        <div class="elemenetskit-toogle-controls-wraper-outer">
                            <div class="elemenetskit-toogle-controls-wraper">
                                <div class="elemenetskit-toggle-indicator elementor-repeater-item-b4ee135" style="width: 152.812px; height: 54.2812px; left: 0px; top: 0px;">
                                </div>
                                <ul class="nav nav-tabs elementkit-tab-nav">
                                    <li data-elementor_current_item="elementor-repeater-item-b4ee135" class="elementor-repeater-item-b4ee135 ">
                                        <a class="elementskit-toggle-nav-link  active" id="content-b4ee1356530e48a09060-tab" data-ekit-toggle="tab" href="#content-b4ee1356530e48a09060" aria-describedby="content-b4ee1356530e48a09060" data-indicator-color="#FFC107" style="">
                                            <span class="elementskit-tab-title">Корпус № 1</span>
                                        </a>
                                    </li>
                                    <li data-elementor_current_item="elementor-repeater-item-c20aed1" class="elementor-repeater-item-c20aed1 ">
                                        <a class="elementskit-toggle-nav-link " id="content-c20aed16530e48a09060-tab" data-ekit-toggle="tab" href="#content-c20aed16530e48a09060" aria-describedby="content-c20aed16530e48a09060" data-indicator-color="#FFC107">
                                            <span class="elementskit-tab-title">Корпус № 2</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Пример кода карточки товара:

<li class="ekit-price-card-item elementor-repeater-item-6fae510">
    <div class="ekit-price-card-image">
        <img decoding="async" src="https://new.xn--80aaatobfqofbf0ajs.xn--90ais/wp-content/plugins/elementor/assets/images/placeholder.png" title="" alt="" loading="lazy">
    </div>
    <div class="ekit-price-card-caption">
        <div class="ekit-price-card-caption-header">
            <span class="ekit-price-card-caption-header-title">Chicken Masala Fries</span>
            <p class="ekit-price-card-caption-header-description">Cheese Kunafa (Arabian Dessert)</p>
        </div>
        <div class="ekit-price-card-caption-footer">
            <span class="ekit-price-card-caption-footer-price">$12.48</span>
            <a class="ekit-price-card-caption-footer-button" href="#">ADD TO CART</a>
        </div>
    </div>
</li>

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

Comments

[Mors Clamor]

Массив, где будут активные фильтры и алгоритм, который по этому массиву их применяет, вопрос-то в чем? Дело не в языке программирования вовсе

Answer 1

[Алексей Ярков]

// товары, отображаемые в карточках
const products = [
  {
    title: 'Молоток',
    color: 'red',
    price: 100500,
  },
  {
    title: 'Гвоздь',
    color: 'blue',
    price: 100,
  },
  {
    title: 'Пассатижи',
    color: 'green',
    price: 100000,
  },
];

// массив фильтров
const filters = [
  {
    property: 'color',
    values: 'red', // ищем товары по цвету
    type: 'equal', // ищем по точному совпадению свойства
  },
  {
    property: 'title',
    values: 'воз', // ищем товары по части названия
    type: 'contains', // ищем по частичному совпадению, по вхождению подстроки в строку например
  }
];

// фильтруем список товаров
const filteredProducts = products.filter((product) => {
  // Домашнее задание:
  // Написать логику поиска каждого товара в зависимости от набора в массиве фильтров
});

console.log(filteredProducts); // выводим отфильтрованный массив

Comments

[Никита]

у меня массив с данными карточек содержится в php. а фильтровать нужно на странице сайта через JS

[szQocks]

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

[szQocks]

Никита, если у тебя нет на фронте данных, как ты собираешься филььровать карточки ? по ДОМ элементам, не смеши

[Никита]

szQocks, так вот как это сделать?

[Никита]

szQocks, а что не так с ДОМ? Мне в принципе не важно как это будет сделано. Мне главное, чтобы работало и желательно попроще)

[szQocks]

Никита, представь что ты отфильтровал карточки по дом элементам, окей - как вернуть их обратно ? ( представь что пользователь отменил фильтр, или изменил ) ну отменить/изменить фильтр что бы показались все которые были изначально или другие уже ? прежде чем фильтровать, для этого придётся пробегаться по всем карточкам дом и собрать данные в массив, ну текст собирать и всякую подобную чушь остальную и создавать на фронте массив карточек

если это звучит вроде бы адекватно для тебя, тогда представь что там пагинация у карточек? - и тогда твоя тупая идея пробегаться по дом элементам - отлетает как сказочный пирог на ужин

[Никита]

szQocks, так как мне в итоге это реализовать? может есть какой-нибудь пример или где-то можно почитать/посмотреть, как это сделать?

[Алексей Ярков]

Никита,

так как мне в итоге это реализовать?

Что именно? Как с РНР в JS массив отдать и работать с ним?

[szQocks]

Никита, я же написал как реализовать, примеров у меня нет, да и не знаю php, ты же должен знать, ты же пишешь на php

[Никита]

Алексей Ярков, да. Просто вёрстку, в т.ч. с данными для карточек из массива, я добавляю в строковую переменную, а потом шорткод вызывает функцию, которая возвращает эту переменную.
Массив на php вот такого вида:

$pricesdataset[] = array(
            'записьID' => $preiskurantID,
            'fields' => array(
                'корпусID' => $korpus,
                'номерID' => $numberID,
                'номер_название' => $number_title,
                'периодID' => $periodID,
                'период_название' => $period_title,
                'заселение' => $living,
                'питание' => $meal,
                'валюта' => $currency,
                'стоимость' => $price,
                'скидка' => $salepercent,
                'изображение' => $image_url,
                'описание' => $describe_url,
            ),
        );

[Александр Васильев]

Подумай над реализацией связки форма - php -запрос в бд - ajax - обработка на фронте только того, что запросил

Answer 2

[rPman]

Выводишь все карточки на php, но в style корневого div-а каждой ставишь им display:none, а скриптом на js в зависимости от фильтра пробегаешь по всем корневым div-ам каждой карточки и включаешь их отображение display:inline (тогда карточки будут располагаться друг за другом), можешь использовать display:block тогда один над другим будет (там еще от float зависит)

Работа с элементами на javascript зависит от выбранного фреймворка, например в jquery ты можешь написать $('.имя_класса').each(function(){...}), а чтобы удобнее было фильтровать, заранее на php добавь каждому корневому тегу атрибуты со значениями по которым будешь проводить фильтрацию, например атрибут category а значения Шведский стол, другой атрибут curency а значения usd/rub/... тогда выбирая в фильтре значения в функции erach просто проверяешь сравниваешь значения атрибутов с выбранными на форме и соответственно включаешь и выключаешь их.

Этот подход наиболее простой, для тех кто большую работу по формированию страницы делает на php но хочет внести в логику страницы больше динамики на основе javascript. Недостаток - клиент получает вне зависимости от выбранного фильтра полный список карточек, и если их много, лучше реализовать другой способ...

Если формировать карточки на javascript, размер данных, передаваемых с сервера будет в несколько раз меньше, так как описание карточки занимает значительно меньше места в сетевом трафике чем готовых html (с оговорками, если включено сжатие страницы на сервере, то разница в размерах будет уже не такой значимой)