Фильтры товаров php mysql

Product Search Filtering using Ajax, PHP & MySQL

Product Filtering is an important functionality of eCommerce websites to allow users to filter products listing according to requirement.

So if you’re looking for solution to implement product search filtering in your project then you’re here at right place. In our previous tutorial you have learned to implement your own captcha script in PHP. In this tutorial you will learn how to implement Product Search Filtering using Ajax, PHP & MySQL.

We will cover this tutorial with live example with product filtering functionality just like eCommerce website to filter product with categories, brands, size, material and sort with latest product and price.

So let’s implement product search filtering with PHP & MySQL. The major files are:

Step1: Create MySQL Database Table

First we will create MySQL database table products to store product details and display with filter functionality.

CREATE TABLE `products` ( `id` int(11) NOT NULL, `sku_id` varchar(50) NOT NULL, `category_id` int(11) NOT NULL, `category_name` varchar(255) NOT NULL, `product_name` varchar(300) NOT NULL, `image` varchar(300) NOT NULL, `price` int(11) NOT NULL, `brand` varchar(100) NOT NULL, `material` varchar(100) NOT NULL, `size` varchar(20) NOT NULL, `qty` int(11) NOT NULL, `created_date` datetime NOT NULL, `updated_date` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step2: Design Form with Filter Options

In index.php file, we will design HTML Form to display product filter options and product listing. We will also create a container with id results to list products.

Step3: Get Product Filter Options

In index.php file, we will call product filter options by calling methods from class Product.php .

include("Product.php"); $product = new Product(); $categories = $product->getCategories(); $brands = $product->getBrand(); $materials = $product->getMaterial(); $productSizes = $product->getProductSize(); $totalRecords = $product->getTotalProducts();

We will implement these methods in class Product.php to get filter options values.

public function getCategories() < $sqlQuery = " SELECT category_id, category_name FROM ".$this->productTable." GROUP BY category_name"; return $this->getData($sqlQuery); > public function getBrand () < $sql = ''; if(isset($_POST['category']) && $_POST['category']!="") < $category = $_POST['category']; $sql.=" WHERE category_id IN ('".implode("','",$category)."')"; >$sqlQuery = " SELECT distinct brand FROM ".$this->productTable." $sql GROUP BY brand"; return $this->getData($sqlQuery); > public function getMaterial () < $sql = ''; if(isset($_POST['brand']) && $_POST['brand']!="") < $brand = $_POST['brand']; $sql.=" WHERE brand IN ('".implode("','",$brand)."')"; >$sqlQuery = " SELECT distinct material FROM ".$this->productTable." $sql GROUP BY material"; return $this->getData($sqlQuery); > public function getProductSize () < $sql = ''; if(isset($_POST['brand']) && $_POST['brand']!="") < $brand = $_POST['brand']; $sql.=" WHERE brand IN ('".implode("','",$brand)."')"; >$sqlQuery = " SELECT distinct size FROM ".$this->productTable." $sql GROUP BY size"; return $this->getData($sqlQuery); >

Step4: Products Listing with Filter

In script.js file, we will implement functionality to load products from MySQL database using product filter by making ajax request to load_products.php file to load products details.

var totalRecord = 0; var category = getCheckboxValues('category'); var brand = getCheckboxValues('brand'); var material = getCheckboxValues('material'); var size = getCheckboxValues('size'); var totalData = $("#totalRecords").val(); var sorting = getCheckboxValues('sorting'); $.ajax(< type: 'POST', url : "load_products.php", dataType: "json", data:, success: function (data) < $("#results").append(data.products); totalRecord++; >>); $(window).scroll(function() < scrollHeight = parseInt($(window).scrollTop() + $(window).height()); if(scrollHeight == $(document).height())< if(totalRecord , success: function (data) < $("#results").append(data.products); $('.loader').hide(); totalRecord++; >>); > > >);

Step5: Get Products from MySQL Database

In load_products.php file, we will include class Product.php and call method getProducts() to get products and return as JSON data to load product listing.

getProducts(); $productData = array( "products" => $products ); echo json_encode($productData); ?>

In class Product.php , we will implement getProducts() method to get products from MySQL database table products and return product listing HTML.

public function getProducts() < $productPerPage = 9; $totalRecord = strtolower(trim(str_replace("/","",$_POST['totalRecord']))); $start = ceil($totalRecord * $productPerPage); $sql= "SELECT * FROM ".$this->productTable." WHERE qty != 0"; if(isset($_POST['category']) && $_POST['category']!="") < $sql.=" AND category_id IN ('".implode("','",$_POST['category'])."')"; >if(isset($_POST['brand']) && $_POST['brand']!="") < $sql.=" AND brand IN ('".implode("','",$_POST['brand'])."')"; >if(isset($_POST['material']) && $_POST['material']!="") < $sql.=" AND material IN ('".implode("','",$_POST['material'])."')"; >if(isset($_POST['size']) && $_POST['size']!="") < $sql.=" AND size IN (".implode(',',$_POST['size']).")"; >if(isset($_POST['sorting']) && $_POST['sorting']!="") < $sorting = implode("','",$_POST['sorting']); if($sorting == 'newest' || $sorting == '') < $sql.=" ORDER BY id DESC"; >else if($sorting == 'low') < $sql.=" ORDER BY price ASC"; >else if($sorting == 'high') < $sql.=" ORDER BY price DESC"; >> else < $sql.=" ORDER BY id DESC"; >$sql.=" LIMIT $start, $productPerPage"; $products = $this->getData($sql); $rowcount = $this->getNumRows($sql); $productHTML = ''; if(isset($products) && count($products)) < foreach ($products as $key =>$product) < $productHTML .= '
'; $productHTML .= '
'; $productHTML .= '
'; $productHTML .= ''; $productHTML .= '
'; $productHTML .= '
'; $productHTML .= ''.$product['product_name'].''; $productHTML .= '
$'.$product['price'].'
'; $productHTML .= '
Brand : '.$product['brand'].'
'; $productHTML .= '
Material : '.$product['material'].'
'; $productHTML .= '
Size : '.$product['size'].'
'; $productHTML .= '
'; $productHTML .= '
'; $productHTML .= '
'; > > return $productHTML; >

You may also like:

• User Management System with PHP & MySQL
• Datatables Add Edit Delete with Ajax, PHP & MySQL
• Build Helpdesk System with jQuery, PHP & MySQL
• Build Online Voting System with PHP & MySQL
• School Management System with PHP & MySQL
• DataTables Add Edit Delete with CodeIgniter
• Create RESTful API using CodeIgniter
• Build Reusable Captcha Script with PHP
• Product Search Filtering using Ajax, PHP & MySQL
• Image Upload and Crop in Modal with jQuery, PHP & MySQL
• Build Push Notification System with PHP & MySQL
• Project Management System with PHP and MySQL
• Hospital Management System with PHP & MySQL
• Build Newsletter System with PHP and MySQL
• Skeleton Screen Loading Effect with Ajax and PHP
• Build Discussion Forum with PHP and MySQL
• Customer Relationship Management (CRM) System with PHP & MySQL
• Online Exam System with PHP & MySQL
• Expense Management System with PHP & MySQL

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download

6 thoughts on “ Product Search Filtering using Ajax, PHP & MySQL ”

Dear Webdamn,
thank you for this script.
It’s possible add a slider range price selection?, I have try many times without success.
I dont’ understand how pass value to ajax with other element different from checkboxes.
Thank you very much for you help.

Источник

Фильтры и сортировка в интернет-магазине на 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, гита.
Истории из жизни айти и обсуждение кода.

Источник