6eJlbIu

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

Recommended Posts

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

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

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

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

Share this post


Link to post
Share on other sites

начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в 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']
в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

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

 

Share this post


Link to post
Share on other sites
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 обратиться к базе данных?
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
7 часов назад, Switch74 сказал:

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,554
    Total Members
    3,128
    Most Online
    Zzzione
    Newest Member
    Zzzione
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.