Html для сортировки товаров

Вывод HTML-таблицы с функцией сортировки на PHP + MySQL

Несколько примеров как вывести данные из БД в таблицу и добавить к ней возможность сортировки.

Итак, простой вывод таблицы и базы:

prepare("SELECT * FROM `tours` ORDER BY `hotel`"); $sth->execute(); $list = $sth->fetchAll(PDO::FETCH_ASSOC);

Вывод:

 
 
 
Заезд
 
Отель
 
Курорт
 
Тип номера
 
Питание
 
Цена
 
 
   
 
 
 
 
 
 EUR
 
 

Результат:

Основной принцип пользовательской сортировки основан на GET параметрах, к ссылке в href добавляется параметр ?sort=xxx со значением текущей сортировки. PHP-скрипт его получает, проверяет и подставляет в SQL-запрос.

Далее рассмотрим его детально на нескольких примерах:

Сортировка в шапке таблицы

Заведем массив $sort_list с ключами и вариантами сортировки, чтобы упростить вывод ссылок заведем функцию sort_link_th() , которая будет их формировать исходя из значения переменной $_GET[‘sort’] .

 '`date`', 'date_desc' => '`date` DESC', 'hotel_asc' => '`hotel`', 'hotel_desc' => '`hotel` DESC', 'city_asc' => '`city`', 'city_desc' => '`city` DESC', 'type_asc' => '`type`', 'type_desc' => '`type` DESC', 'food_asc' => '`food`', 'food_desc' => '`food` DESC', 'price_asc' => '`price`', 'price_desc' => '`price` DESC', ); /* Проверка GET-переменной */ $sort = @$_GET['sort']; if (array_key_exists($sort, $sort_list)) < $sort_sql = $sort_list[$sort]; >else < $sort_sql = reset($sort_list); >/* Запрос в БД */ $dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль'); $sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY "); $sth->execute(); $list = $sth->fetchAll(PDO::FETCH_ASSOC); /* Функция вывода ссылок */ function sort_link_th($title, $a, $b) < $sort = @$_GET['sort']; if ($sort == $a) < return '' . $title . ' ▲'; > elseif ($sort == $b) < return '' . $title . ' ▼'; > else < return '' . $title . ''; > >

Вывод:

Результат:

Сортировка в виде списка

Преведущий код немного переделан:

 '`date`', 'date_desc' => '`date` DESC', 'hotel_asc' => '`hotel`', 'hotel_desc' => '`hotel` DESC', 'city_asc' => '`city`', 'city_desc' => '`city` DESC', 'type_asc' => '`type`', 'type_desc' => '`type` DESC', 'food_asc' => '`food`', 'food_desc' => '`food` DESC', 'price_asc' => '`price`', 'price_desc' => '`price` DESC', ); /* Проверка GET-переменной */ $sort = @$_GET['sort']; if (array_key_exists($sort, $sort_list)) < $sort_sql = $sort_list[$sort]; >else < $sort_sql = reset($sort_list); >/* Запрос в БД */ $dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль'); $sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY "); $sth->execute(); $list = $sth->fetchAll(PDO::FETCH_ASSOC); /* Функция вывода ссылок */ function sort_link_bar($title, $a, $b) < $sort = @$_GET['sort']; if ($sort == $a) < return '' . $title . ' ↑'; > elseif ($sort == $b) < return '' . $title . ' ↓'; > else < return '' . $title . ''; > >

Вывод:

 
 
    
 
 
Заезд
 
Отель
 
Курорт
 
Тип номера
 
Питание
 
Цена
 
 
   
 
 
 
 
 
 EUR
 
 

Сортировка полем select

Во этом примере управление сортировкой будет производится с помощью , при его изменении отправляется форма c выбранным ключом сортировки .

 '`date`', 'type' => '`type`', 'food' => '`food`', 'price_asc' => '`price`', 'price_desc' => '`price` DESC', ); /* Проверка GET-переменной */ $sort = @$_GET['sort']; if (array_key_exists($sort, $sort_list)) < $sort_sql = $sort_list[$sort]; >else < $sort_sql = reset($sort_list); >/* Запрос в БД */ $dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль'); $sth = $dbh->prepare("SELECT * FROM `tours` ORDER BY "); $sth->execute(); $list = $sth->fetchAll(PDO::FETCH_ASSOC);

Вывод:

 
Дата заезда Сначало дешевые Сначало дорогие Тип номера Питание  
 
   
 
 
Заезд
 
Отель
 
Курорт
 
Тип номера
 
Питание
 
Цена
 
 
   
 
 
 
 
 
 EUR
 
 
 

Источник

Сортировка по произвольному полю (WordPress)

Рассмотрим, как отсортировать по произвольному полю (ACF) в WordPress. Для примера будем использовать select, но здесь нет разницы какие элементы форм использовать.

Какие шаги необходимо предпринять:

Создание произвольного поля

Пусть произвольное поле будет цена — будем сортировать по нему (по возрастанию и убыванию).

HTML-разметка фильтра сортировки

Начнём с простой HTML-разметки, далее сделаем её динамической, т.е. будем проверять какой тип сортировки в текущий момент выбран.

 
 Сначала дешёвые >Сначала дорогие  Фильтровать 

Вывод товаров

Пусть у нас есть таксономия «Товары» my_product и таксономия «Категории товаров» my_product_category .

Выведем товары с сортировкой по умолчанию (ASC). Для упрощения, как уже говорил выше, после того как у нас всё выведется по умолчанию, только тогда мы добавим динамики.

 "my_product", "posts_per_page" => get_option("posts_per_page"), "paged" => $paged, "taxonomy" => $tax_name, "meta_key" => "price", # поле ACF "orderby" => "meta_value_num", "order" => ASC # Сначала дешёвые )); if ($query->have_posts()) < while ($query->have_posts()) < $query->the_post(); get_template_part("/template-parts/loop-template"); > > else echo "
Нет товаров в данной категории.
"; ?>

Обратите внимание, мы сортируем по произвольному полю ACF price.

Пагинация. Более подробно о создании пагинации можно прочитать в этой статье — Пагинация в WordPress без плагинов.

Доработка формы фильтра

Если все вышеописанные шаги у вас не вызвали проблем и всё успешно работает, добавим динамики.

При отправке формы и перезагрузке страницы мы увидим хвосты в URL — GET-параметры. Будем добавлять атрибут checked выбранному select option :

 Сначала дешёвые Сначала дорогие 

Вывод товаров для выбранной сортировки

Осталось получить и добавить текущее значение сортировки в запрос WP_Query.

if ($_GET["sorting"]) < $sorting = $_GET["sorting"]; >else < // по умолчанию $sorting = "ASC"; >$query = new WP_Query(array( "post_type" => "solutions", "posts_per_page" => get_option("posts_per_page"), "paged" => $paged, "taxonomy" => $tax_name, "meta_key" => "price", # поле ACF "orderby" => "meta_value_num", "order" => $sorting ));

Отправка формы при выборе option

Можно добавить автоматическую отправку формы при выборе какого-либо option:

const form = document.querySelector(".sorting_form"); const select = document.querySelector(".sorting_select"); select.addEventListener("change", function () < form.submit(); >)

На этом на сегодня всё. Может пригодиться:

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Источник

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

Источник