Расширенный фильтр отключает опции интернет-магазина, если нет товаров - PullRequest
0 голосов
/ 18 марта 2020

Я хочу создать интеллектуальный фильтр в интернет-магазине, например, выбрать опцию, и если в других фильтрах нет товаров, отключите эти опции.

Например:

enter image description here

Я создал пример того, как он работает, но у меня возникла проблема с ним.

Пример:

База данных:

CREATE TABLE processors (
   id int primary key auto_increment,
   Manufacturer char(100),
   Type varchar(255),
);

INSERT INTO processors (Manufacturer, Type) VALUES("Intel", "Intel Xeon Gold");
INSERT INTO processors (Manufacturer, Type) VALUES("Intel", "Intel Celeron");
INSERT INTO processors (Manufacturer, Type) VALUES("Intel", "Intel Pentium");
INSERT INTO processors (Manufacturer, Type) VALUES("Intel", "Intel Core i9");
INSERT INTO processors (Manufacturer, Type) VALUES("Intel", "Intel Core i7");

INSERT INTO processors (Manufacturer, Type) VALUES("AMD", "AMD Ryzen 3");
INSERT INTO processors (Manufacturer, Type) VALUES("AMD", "AMD Ryzen 5");
INSERT INTO processors (Manufacturer, Type) VALUES("AMD", "AMD Ryzen 7");
INSERT INTO processors (Manufacturer, Type) VALUES("AMD", "AMD Ryzen Threadripper");

Параметры фильтра, загруженные из базы данных:

<div id="Manufacturer">
   <ul>
      <li>AMD</li>
      <li>Intel</li>
   </ul>
</div>

Logi c

производитель: опция AMD отмечена

[сторона клиента]

  • Сгенерирована строка фильтра ([Производитель] AMD [Manufacturer_END])
  • Отправить строку фильтра на серверную часть php через ajax

[бэкэнд]

  • SQL команда, сгенерированная на бэкэнде php
   SELECT DISTINCT Type, Manufacturer FROM processors WHERE Manufacturer = "AMD";
  • Производитель удален из команды sql (последний фильтр)
   SELECT DISTINCT Type FROM processors WHERE Manufacturer = "AMD";
  • Выполнить команду SQL, сохранить данные в массиве asso c с именем $ data_arr
  • Cre съел другой массив с именем $ option_keys_arr и загрузил с array_keys ($ data_arr), (ключи будут идентификатором div, который содержит список с опциями)
   <div id="Manufacturer">LIST HERE</div>)
  • Send вернуть $ data_arr и $ option_keys_arr в формате json_encoded на сторону клиента

[на стороне клиента]

  • на стороне клиента получить данные обратно
  • Переберите отправленный $ option_keys_arr в a для l oop и сохраните ключ (и) в переменной
  • Внутри этого для l oop создайте еще один l oop для перебора элементы списка
  • Добавьте класс .disabled к элементам списка, который не находится внутри массива filter_reload_values ​​

Вот клиентская сторона l oop:

// $data_arr
var filter_reload_values = JSON.parse(data["data"]);

// $option_keys_arr
var filter_reload_arr_keys = JSON.parse(data["keys"]);

for (i = 0; i < filter_reload_arr_keys.length; i++) {

    // The key
    var arr_key = filter_reload_arr_keys[i];

    // List object
    var ul_obj = $(`#${arr_key} ul`);

    // Find list items
    $(`#${arr_key}`).find("ul li").each(function () {

        var item_text = $(this).text();

        // List item
        var list_elem = $(this);

        if(filter_reload_values[arr_key].includes(item_text) == true)
        {
            list_elem.removeClass("disabled");
        }
        else {
            list_elem.addClass("disabled");
        }

    });
}

Если выбрано несколько параметров, строка фильтра выглядит следующим образом:

[Manufacturer]AMD[Manufacturer_END][Type]AMD Ryzen 3[Type_END]

Основной лог c основан на перезагрузке каждого параметра фильтра, ожидая, что последний фильтр будет иметь его имена (Производитель, Введите в этом примере) , но есть проблема:

Если я выберите тип: AMD и после него выберите тип: AMD Ryzen 3, в этом случае параметры производителя перезагружены, и Intel получил отключенный класс, это нормально, но если тип: AMD Ryzen 3 снят, производитель перезагружен, но опция Intel по-прежнему отключена, поскольку SQL только получает данные, ГДЕ Производитель = "AMD":

SELECT DISTINCT Manufacturer FROM processors WHERE Manufacturer = "AMD"

Фильтр намного больше, это просто пример для лучшего понимания.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...