Несомненно, все владельцы интернет-магазинов стремятся сделать интерфейс своего проекта наиболее удобным и досконально продумывают его юзабилити, а также прочие аспекты. Одной из таких ситуаций является метод фильтрации товаров в интернет-магазинах созданных на платформе uCoz.
Чем отличается этот фильтр от стандартного? Данный скрипт позволяет использовать дополнительные поля товара для фильтрации. Все, что вам нужно, это открыть страницу редактирования товара и заполнить эти поля.
Меню фильтрации выводится на странице каталога товаров. Фильтровать товары можно по 9-ти признакам. В разных категориях признаки могут быть разные. Например, в категории "Смартфоны" вы можете вывести признак "Разрешение экрана", а в других категориях с аксессуарами к смартфону такой признак не нужен и вы можете его не выводить. Там будут другие девять признаков.
Опишем далее этот пример. У признака "Разрешение экрана" может быть несколько значений. Чтобы отфильтровать весь каталог по разрешению экрана, нужное разрешение отмечается галочкой. Чтобы вывелись смартфоны с любым разрешением, можно отметить галочкой пункт "Все".
Кроме того, фильтровать товары можно по цене (от-до) и по производителю. "Производитель" - это десятый признак, который доступен во всех категориях (если у товаров это поле заполнено).
Что даёт этот скрипт для КЛИЕНТА?Последовательный алгоритм обдуманных шагов к свершению покупки и, как следствие, удовлетворение покупательской потребности. Демонстрируя клиенту доступные опции, фильтр помогает ему определиться с точным выбором приобретения. Таким образом ваш покупатель точно не будет сожалеть о совершенном выборе, его лояльность к магазине повысится и он непременно захочет вернуться снова.
Что даёт этот скрипт для ПРОДАВЦА?Превращение разового клиента в постоянного покупателя, что обеспечивает расширение клиентской базы. Посещаемость сайта увеличивается и это не останется незамеченным поисковиками, позиции сайта поднимаются, положительные отзывы о магазине увеличиваются, прибыль возрастает, а значит изначальная задача создания интернет-магазина на пути успеха.
Фильтры призваны для того, чтобы отсортировать товар по определенным значениям указанным во время добавления товара и упростить поиск для потенциального покупателя. Но стандартные фильтры uCoz не позволяют выбрать несколько значений для фильтрации товаров. Наш скрипт фильтров решает этот вопрос.
На выбор есть 5 вариантов выбора оформления регулятора цены!
А также несколько вариантов дизайна чекбоксов!
Предлагаем вам ознакомиться с видео-демонстрацией скрипта, а также представляем полный перечень базовых преимуществ :
- кроссбраузерный, современно стилизованный скрипт. Отзывчивый функционал и динамичная работа синхронная действиям клиента. Скрипт работает только на странице категории (шаблон «каталог товаров» );
- настройка плагинов необходимых для работы скрипта максимально упрощена и сводится к указанию "вкл./выкл." в файле настроек скрипта (config.php) ;
- возможность множественного выбора значений для фильтрации товаров;
- возможность настройки активности групп фильтров или отдельных значений (чекбокс);
- любые стандартные поля в модуле интернет-магазин возможно сделать значением для фильтрации. Например, "есть в наличии/нет в наличии", "дополнительные поля 1-9" и так далее;
- присутствует кнопка быстрого сброса значений фильтров;
- возможность сворачивания и разворачивания блоков фильтра с запоминаем выбора на cookie;
- возможность активации и деактивации слайдера выбора цены;
- возможность активации и деактивации стилизованного скролл-бара;
- удобная и полная стилизации фильтра. Вы сможете изменить размеры и цвет фона фильтра, слайдера цены, скролл-бара и чекбоксов;
- выбранные значения для фильтрации товаров сохраняются и не будут сброшены при обновлении страницы;
- присутствует кнопка быстрого сброса для полной очистки значений фильтров.
- Требования к установке:
- активированное PHP.
Сегодня я расскажу как сделать фильтр товаров на php . В фильтре пользователь сможет выбирать множество параметров для сортировки и получать в ответ сгенерированный SQL запрос с результатами поиска. Итак, чтобы все работало на нужны 3 вещи:
- База данных SQL с информацией для тестов
- PHP скрипт для обработки запроса и вывода результатов на страницу
- HTML форма фильтра товаров с полями сортировки
В данном уроке я покажу как сделать простейший вариант фильтра. В таком виде его еще нельзя использовать на сайте. Во-первых, нужно повысить безопасность запроса, добавить проверку данных, которые приходят от пользователя и конечно же добавить украшательств.
За основу взята рабочая копия базы данных из моей самописной CMS и заполнена информацией о мобильных телефонах, их параметрах, ценах и т.д. в целях обучения. В этом уроке по созданию фильтра товаров на php мы будем использовать только 4 таблицы из базы:
- items - артикул товара, название товара, наличие, цена обычная и цена по скидке
- attribute_vendor - аттрибут "производитель" (Samsung, Lenovo, HTC и т.д.)
- group_attribute_vendor - группа атрибутов содержит пары значений "код товара-код производителя"
- item_photo - для 1 товара может быть 2 и более фотографии, поэтому тут я записываю информацию о коде товара и соответствующих ему фотографиях. Для основной фотографии ставлю 1 в поле item_photo_main.
1. HTML код формы фильтра товаров:
2. PHP код фильтра товаров, который создает итоговый SQL запрос для поиска:
function addFilterCondition($where, $add, $and = true) { if ($where) { if ($and) $where .= " AND $add"; else $where .= " OR $add"; } else $where = $add; return $where; } function getMainQuery() { return "SELECT i.item_id, i.item_number, i.item_title, i.stock_id, i.item_price, i.item_discount, ph.item_photo, ph.item_photo_main, ph.item_photo_alt, ph.item_photo_title, vendors.attribute_id FROM (SELECT item_id, item_number, item_title, stock_id, item_price, item_discount FROM items) AS i LEFT JOIN item_photo AS ph ON i.item_number = ph.item_number LEFT JOIN group_attribute_vendor AS vendors ON vendors.item_number = i.item_number"; } if (!empty($_POST["filter"])) { $sql = getMainQuery(); $where = ""; if ($_POST["price_start"]) { $where = addFilterCondition($where, "i.item_price >= "" . htmlspecialchars($_POST["price_start"])) . """; } if ($_POST["price_end"]) { $where = addFilterCondition($where, "i.item_price <= "" . htmlspecialchars($_POST["price_end"])) . """; } if ($_POST["vendors"]) { $ids = $_POST["vendors"]; $inQuery = implode(",", array_fill(0, count($ids), "?")); $where = addFilterCondition($where, "vendors.attribute_id IN (" . $inQuery . ")"); } if ($_POST["stock"]) { $where = addFilterCondition($where, "i.stock_id = 1"); } if ($_POST["discount"]) { $where = addFilterCondition($where, "i.item_discount > 0"); } $second = "ph.item_photo_main=0 ORDER BY i.item_id DESC"; if ($where) { $sql .= " WHERE $where AND " . $second; } else { $sql .= " WHERE " . $second; } } echo "Получили такой SQL запрос:
" . $sql; $stmt = $pdo->prepare($sql); $stmt->execute($ids); $resultsCount = $stmt->rowCount(); echo "В результате найдено: {$resultsCount} строк
";Единственный нюанс был в том, чтобы отправить значения с запятыми в PDO. Я имею ввиду передачу условия IN () для выбора нескольких производителей товара одновременно. Тут помогли запросы в Gogole такого формата: PHP PDO: How to call stored procedure to pass comma separated string to parameter Passing values to MySQL IN operation in PDO prepared statement bind an array to an IN() condition .
Одним из найденных способов решения в данном примере я и воспользовался:
$ids = $_POST["vendors"]; $inQuery = implode(",", array_fill(0, count($ids), "?")); $stmt = $db->prepare("SELECT * FROM table WHERE id IN(" . $inQuery . ")");
Меня иногда просят рассказать, как делаются сложные фильтры поиска . Например, как он сделан на том же Яндекс.Маркете , где может быть сотня различных параметров отбора товаров? В этой статье я расскажу, как такое делается, ведь тут нет абсолютно ничего сложного. Всё это делается по единому принципу, о котором читайте дальше.
Для начала должна быть таблица, по которой будет идти поиск. Пусть это будет упрощённая таблица для ноутбуков:
- 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` <= "".htmlspecialchars($_POST["price_end"])).""";
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;
}
?>
Думаю, что с выполнением получившегося запроса и выводом результата проблем возникнуть не должно. Если это не так или в данном скрипте не всё понятно, то Вам тогда однозначно нужно сначала изучить это: .
Как видите, сложные фильтры реализуются в PHP очень просто. Что касается "красивых " скриптов, где двигаются всякие ползунки и сразу меняется результат - это всё то же самое, только запросы отправляются не через форму, а через Ajax , а затем принимается ответ от сервера с результатом, который динамически выводится через чистый JavaScript , либо с использованием jQuery .
Вот по такому принципу делается любой фильтр поиска на PHP .
1. Фильтрация и сортировка блоков «Quicksand»
Плагин позволяет красиво реализовывать фильтрацию и сортировку элементов на странице с обалденным эффектом. Чтобы посмотреть эффект, на странице демонстрации понажимайте сверху на кнопки сортировки и фильтра.
Это решение отлично подойдет для реализации фильтров в интернет-магазинах или для оформления страниц-портфолио.
3. jQuery плагин jCoverflip
Интерактивная фильтрация блоков по меткам. Подойдет для реализации страницы портфолио либо для страницы с товарами, разбитыми по категориям. Попробуйте в действии этот плагин, для этого достаточно произвести переход между метками, которые выполнены в виде меню. Он, наверняка, вам понравится.
Отлично подойдет для организации портфолио либо галереи на сайте. На демонстрационной странице нажимайте на ссылки вверху, чтобы увидеть результат работы плагина.
5. jQuery плагин «MobilySelect»
Плагин для фильтрации блоков: можно отображать либо все элементы, либо оставить блоки с каким-нибудь определенным классом. Фильтрация происходит с различными анимационными эффектами.
6. jQuery HTML5 портфолио
Реализация красивого портфолио с помощью jQuery и HTML5. Фишка портфолио в реализованном фильтре. Различные работы в портфолио отображаются в зависимости от выбранной категории.