Как делаются фильтры для продуктов на сайтах?

[6eJlbIu]

Здравствуйте. До сегодняшнего дня, я только занимался версткой макетов, и не совсем понимаю как в принципе после верстки сайты оживают и начинают работать. 

Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

Там есть формы: 
- Дата начала аренды
- Дата конца аренды
- Тип транспорта
- Цвет
- Вместимость
- Грузоподъемность

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

[Switch74]

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

table
date_start | date_stop | type | color | capacity | carrying

одна строка - одна позиция
SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
например:

<form method="post">
<input name="date_start">
<input name="date_stop">
....
type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
capacity и carrying возможно потребуется возможность указания диапазона (от и до)
....
</form>

все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
... WHERE `table`.`date_start` = $_POST['date_start']
в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

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

[6eJlbIu]

10 минут назад, Switch74 сказал:

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

table
date_start | date_stop | type | color | capacity | carrying

одна строка - одна позиция
SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
например:

<form method="post">
<input name="date_start">
<input name="date_stop">
....
type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
capacity и carrying возможно потребуется возможность указания диапазона (от и до)
....
</form>

все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
... WHERE `table`.`date_start` = $_POST['date_start']
в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

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

Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
А как через javascript обратиться к базе данных?
 

[Switch74]

именно через js на прямую к БД не обратиться
если у вас данные о ваших торговых позициях хранятся в массивах в js, то можно сделать все это на js с теми же самыми проверками, для начала нужна суть уже готового проекта:
1. как хранятся данные и как выводятся
2. все фильтруемые данные находятся на одной странице или разных
3. требуется ли индексация этих данных
4. что вы можете использовать для создания требуемой вам системы фильтрации и что уже реализовано

[6eJlbIu]

7 часов назад, Switch74 сказал:

именно через js на прямую к БД не обратиться
если у вас данные о ваших торговых позициях хранятся в массивах в js, то можно сделать все это на js с теми же самыми проверками, для начала нужна суть уже готового проекта:
1. как хранятся данные и как выводятся
2. все фильтруемые данные находятся на одной странице или разных
3. требуется ли индексация этих данных
4. что вы можете использовать для создания требуемой вам системы фильтрации и что уже реализовано

1. данные как бы в верстке все прописаны и все
2. карточки товаров повторяются на нескольких страницах, но фильтр только на одной странице
3. не понял что это такое
4. ничего не реализовано, есть только верстка html, css 

[Switch74]

что-то вроде, но это только начало, для разных видов данных возможно понадобятся разные обработчики
а так же возможно потребуется иначе обрабатывать заданные промежутки данных на вроде даты
https://jsfiddle.net/kyud28mp/