Фильтры и сортировка в интернет-магазине на ajax, php и mysql. Серия уроков
Тема интернет-магазинов набирает обороты. После корзины на фронте, отправки заказов и доставки рассмотрим, как сделать фильтрацию и сортировку товаров в связке ajax, php и mysql. Материал довольно большой, и я решил провести эксперимент. Вся информация будет содержаться не в одной большой статье, а разбита на серию небольших уроков. Каждый урок будет посвящен отдельной логически обособленной части, и в конце урока мы будем получать законченную часть нашего приложения, например, готовую структуру данных, верстку или js-код. После прохождения всех уроков мы построим законченную систему фильтров, небольшую, но расширяемую под свои нужды.
Думаю, такое разбиение на уроки даст нам некоторые преимущества. Во-первых, материал легче усваивается небольшими порциями, а во-вторых, нам не понадобится полностью проходить всю огромную статью целиком, прежде чем увидеть какой-то результат. Что-то работающее будет в конце каждого урока. Итак, начали.
Что мы хотим сделать и как это будет работать
Пусть в нашем магазине имеется набор товаров со стандартными параметрами: артикул, название и цена. Добавим к ним категорию товара, производителя (или бренд) и рейтинг (или популярность). Нам нужно иметь возможность выбрать категорию товара (одну), бренд (один, несколько или ни одного), минимальную и максимальную планку цены. Также хорошо бы сортировать товары по цене, названию и рейтингу.
Все эти параметры будут раскиданы по кнопкам, выпадающим спискам и чекбоксам. Основа фильтров — категории. При смене категории будет перестраиваться список брендов и меняться минимальный и максимальный пороги цен.
Я очень не люблю лишние кнопки «Фильтровать», поэтому у нас фильтрация будет происходить мгновенно, сразу же при смене любых параметров. Отметили бренд или сменили сортировку — ушел запрос на сервер — приняли ответ в виде json — отобразили на клиенте.
Имейте в виду, такой подход мгновенного реагирования на действия дружелюбен для клиентов, но требователен к ресурсам сервера. Если в каталоге десятки тысяч товаров и множество фильтров, то возможно, посетителям придется заметное время ждать завершения запросов. В этом случае стоит подумать, чтобы внедрить-таки отдельную кнопку для фильтрации для уменьшения количества запросов к серверу.
После прохождения всех уроков у нас получится рабочая страница примерно такого вида.
А еще лучше посмотреть здесь — Демонстрационный интернет-магазин
Что будем использовать из технологий и библиотек
На клиенте чистый javascript и jQuery, bootstrap поможет нам сверстать интерфейс. Плагин jQueryUI.slider даст возможность подключить симпатичный слайдер для регулировки цен. underscore.js поможет обрабатывать на клиенте данные, приходящие с сервера. На сервере код напишем на php, который будет лезть в базу mysql через mysqli. Для хранения всех данных нам понадобится несколько табличек, которые мы создадим в первом же уроке.
Последовательность уроков
Писать код мы будем в рамках все того же проекта корзины на фронте и отправки заказа. Связь с предыдущими статьями небольшая, но есть. Мы создадим отдельную страницу с каталогом, где и подключим фильтры. Каркас страницы и структура модулей будет такая же, как и вышеозначенных статьях, отдельно зацикливаться не буду. Так же будет подключен модуль корзины, чтобы была возможность добавлять наши товары в корзину без лишних телодвижений. Весь код будет полностью совместим со старым проектом, работа старого каталога и отправки заказа не нарушится.
На первом уроке мы рассмотрим структуру БД, создадим нужные таблицы и наполним их тестовыми данными.
Во втором разберем общую структуру проекта и сверстаем панель фильтров и список товаров. Конечно же, с возможностью добавлять их в корзину.
В третьем рассмотрим базовую работу с фильтрами на фронте, напишем модуль catalog.js, навесим события сбора данных с формы фильтрации и отправим данные на сервер. На сервере поставим заглушку, которая будет возвращать нам какие-то данные в виде json.
В четвертом уроке мы напишем весь серверный код, который извлекает товары из базы, и отправим их клиенту, клиент данные примет и отобразит их в браузере.
В пятом клиент эти данные примет и отобразит их в браузере.
И на последнем, шестом уроке мы добьем некоторые пункты, касающиеся правильной работы фильтров, например, перестроения списка брендов при смене категории и изменении порога цен и еще некоторые тонкости.
Внимание! Кому интересна тема более сложных фильтров, не пропустите опрос — Нужны ли сложные динамические фильтры?
Все об интернет-магазинах
- Демо интернет-магазина
- Корзина интернет-магазина. С чего все началось
- Оформляем заказ на клиенте и сервере
- Добавляем доставку
- Фильтры и сортировки на клиенте и сервере
- Урок 0. Вводный
- Урок 1. Структура базы данных
- Урок 2. Структура проекта и верстка
- Урок 3. Сбор данных на клиенте и отправка на сервер
- Урок 4. Пишем базовый php-код и sql-запросы
- Урок 5. Прием данных с сервера и рендеринг на клиенте
- Урок 6. Заключительный, дорабатываем некоторые штрихи
- Сравнение товаров
- Постраничная навигация по товарам
- Преобразуем каталог, переключаем внешний вид товаров одной кнопкой
- Отправка sms при оформлении заказа
- Админка интернет-магазина на vue.js — серия уроков
- Авторизация на сессиях. Делаем логин в админке
- Docker для начинающих. Докеризуем интернет-магазин
Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.
Истории из жизни айти и обсуждение кода.
Фильтр поиска на PHP
Меня иногда просят рассказать, как делаются сложные фильтры поиска. Например, как он сделан на том же Яндекс.Маркете, где может быть сотня различных параметров отбора товаров? В этой статье я расскажу, как такое делается, ведь тут нет абсолютно ничего сложного. Всё это делается по единому принципу, о котором читайте дальше.
Для начала должна быть таблица, по которой будет идти поиск. Пусть это будет упрощённая таблица для ноутбуков:
- id — уникальный идентификатор.
- price — цена.
- manufacturer — производитель.
- wi-fi — наличие Wi-Fi.
Теперь разберём форму поиска:
Думаю, здесь, всё прозрачно. Единственное, что обратите внимание на manufacturers[]. Квадратные скобки означают, что в скрипт попадёт массив со всеми значениями, выбранными пользователем. Чтобы лучше это понять, просто выведите print_r($_POST), тогда Вы всё поймёте.
Теперь разберём скрипт. В целях упрощения скрипта я не стал его усложнять скриптами, отвечающими за безопасность, и ограничился функцией htmlspecialchars(). Однако, в реальности, обязательно надо проверять всё, что приходит от пользователя, используя, например, регулярные выражения и/или встроенные функции проверки переменных на их значение.
Главная задача скрипта — «собрать» SQL-запрос на основе того, что пришло от пользователя:
function addWhere($where, $add, $and = true) if ($where) if ($and) $where .= » AND $add»;
else $where .= » OR $add»;
>
else $where = $add;
return $where;
>
if (!empty($_POST[«filter»])) $where = «»;
if ($_POST[«price_start»]) $where = addWhere($where, «`price` >= ‘».htmlspecialchars($_POST[«price_start»])).»‘»;
if ($_POST[«price_end»]) $where = addWhere($where, «`price` if ($_POST[«manufacturers»]) $where = addWhere($where, «`manufacturer` IN («.htmlspecialchars(implode(«,», $_POST[«manufacturers»])).»)»);
if ($_POST[«wifi»]) $where = addWhere($where, «`wifi` = ‘1’»);
$sql = «SELECT * FROM `my_table`»;
if ($where) $sql .= » WHERE $where»;
echo $sql;
>
?>
Думаю, что с выполнением получившегося запроса и выводом результата проблем возникнуть не должно. Если это не так или в данном скрипте не всё понятно, то Вам тогда однозначно нужно сначала изучить это: http://srs.myrusakov.ru/php.
Как видите, сложные фильтры реализуются в PHP очень просто. Что касается «красивых» скриптов, где двигаются всякие ползунки и сразу меняется результат — это всё то же самое, только запросы отправляются не через форму, а через Ajax, а затем принимается ответ от сервера с результатом, который динамически выводится через чистый JavaScript, либо с использованием jQuery.
Вот по такому принципу делается любой фильтр поиска на PHP.
Создано 08.11.2013 12:08:52
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 5 ):
Миша, а будут ли статьи про MongoDB? Очень надо. И, есть идея нового курса — асинхронный интернет-магазин на MongoDB и NodeJS! Будет очень поучительно, и это будет первый курс в интернете!
Возможно в скорости и будет.
будет ли урок по созданию фильтрация по парамметрам для каждой категории меню отдельное? все это динамическим путем?
Добрый день! Вы описали метод, когда в базе вбиты все параметры по столбцам id /price /manufacturer /wi-fi / а, можно ли реализовать фильтрацию при помощи поиска? Если даны к примеру столбцы /id /price и /charakteristiks , а данные /manufacturer и /wi-fi / введены текстом в поле /charakteristiks. Спасибо!
Здравствуйте! Как реализовать такой фильтр с с двумя select? Можете дать наводку?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.