Фильтрация товаров html css

Фильтры списка на чистом CSS

Доброго времени суток. Вам, наверное, тоже нравятся СSS3 и трюки, позволяющие не использовать javascript. Но я нигде не встречал фильтрации списка элементов, поэтому хочу рассказать о такой возможности. Допустим, элементы относятся к разным категориям (возможно, как много-ко-много), и нам нужно управлять видимостью элементов тех или иных категорий в списке без использования JS.

По-простому

Допустим, фильтруем элементы по цвету. Для управления списком будут использоваться кнопки, реализуемые парами элементов input и label.

Чекбоксы имеют состояние, которое в CSS мы можем использовать псевдоклассом :checked. Это как раз то, что нам нужно. При нажатии на label определенного цвета чекбокс будет «выключаться», а элементы этого цвета — пропадать из списка. Элементы незамысловатые:

Сама фильтрующая а связь между чекбоксами и элементами списка реализуется с помощью тильда-селектора «~». Для работы этого приема необходимо, чтобы input’ты находились до элементов, причем выше по дереву.

.item < display: none; >input#red:checked ~ .container .item.red < display: block; /* прочее */ >

Сам пример (полноценно, хоть и скромно оформленный) можно посмотреть в живую.

Много-ко-много

А что, если элементы могут находятся в нескольких категориях сразу? То есть, если нам нужна фильтрация по тегам? Пускай у нас будут ткани, которые есть в ассортименте в нескольких цветах:

Заметим, что фильтр будет работать по принципу логического «ИЛИ». То есть, элемент будет виден, пока активен хотя бы один его тег. Если мы хотим, чтобы он работал как логическое «И», нужно изменить CSS, использовав псевдокласс :not.

input#red:not(:checked) ~ .container .item.red < display: none; >.item < display: block; /* другие правила */ >

Работу третьего фильтра можно увидеть здесь.

Очевидно, что область применения такого хака не очень велика… но он прекрасно справляется с демонстрацией мощи тильда-селектора и псевдоклассов, и может, надоумит кого на полезное применение!

Источник

Фильтры в интернет-магазине. Урок 2. Структура проекта и верстка

Переходим ко второй части наших уроков. Здесь рассмотрим структуру проекта, его файлов и папок, сверстаем блоки с фильтрами, товарами и подключим плагин jQueryUI.slider для регулировки цен.

Структура файлов и папок

Те, кто читал мои предыдущие статьи про корзину и отправку заказа, ничего нового не увидят. Если Вы с этими постами не знакомы, то кратко структура представляется так.

В корне проекта лежит файл catalog.html, который содержит базовую верстку и подключает стили и скрипты. В папку js/modules положим файл catalogDB.js. Суффикс «DB» — от database, чтобы отличать модуль с фильтрами, работающий с БД, от первого модуля каталога, рассмотренного в статье про корзину.

В файле js/modules/main.js подключаются и инициализируются все модули, в том числе и наш новый catalogDB. Для его подключения в main.js нужно будет написать пару строк.

В файле css/main.css находятся немногочисленные стили. В целом, мы вполне обойдемся и bootstrap.

В папку scripts закинем файл catalog.php, который будет выполнять всю серверную работу.

И последнее — в качестве элемента управления для регулирования цен мы воспользуемся готовым решением от jQueryUI, а именно компонентом slider. Создадим отдельную папку в корне components, в ней папку jquery-ui и закинем в нее все файлы, имеющие отношение к компоненту slider.

Базовый файл catalog.html

Секция head ничем не отличается от других страниц нашего магазина. Для body навесим атрибут data-page=»catalogDB» (это по аналогии с предыдущими страницами, чтобы отличать их друг от друга). Содержимое body будет простым.

Webdevkin. Интернет-магазин. Фильтры в каталоге


  
Каталог
Каталог с фильтрами
  
Корзина
  
Оформление заказа


// Здесь будут фильтры
 

Пока ничего хитрого. Заголовок h2, меню nav nav-pills и два контейнера для фильтров и списка товаров. Ими мы займемся чуть позже. В списке товаров будет крутиться гифка до тех пор, пока не загрузятся данные с сервера.

В конце перед закрывающимся тегом body подключаем 5 javascript-файлов: jQuery, underscore, наш новый модуль catalogDB, старую добрую корзину и main.js — главный модуль приложения, который запускает все остальное. Подробнее эти модули расписаны в статье Корзина для интернет-магазина на фронте.

Заготовка модуля catalogDB.js

Сильно мудрить не будем и пойдем по стопам и примерам предыдущих статей. Объявим модуль-переменную catalogDB и заведем в ней пока единственную функцию init, которую экспортируем во внешний мир. В init будет для начала строчка вывода в консоль соответствующего сообщения. Дальше, конечно же, ее расширим.

'use strict'; // Модуль каталога для работы с БД var catalogDB = (function($) < // Инициализация модуля function init() < console.info('init catalogDB'); >// Экспортируем наружу return < init: init >>)(jQuery);

Редактируем главный модуль main.js

Напоминаю, в main.js у нас находится модуль app — главный модуль приложения. И его метод init, который и выполняет всю работу по инициализации соответствующих частей приложения. Чтобы завести наш новый catalogDB, нужно дописать метод init в main.js вот так:

function init() < if (page === 'catalog') < catalog.init(); cart.init(optionsCatalog); >// --- Новый код if (page === 'catalogDB') < catalogDB.init(); cart.init(optionsCatalog); >// --- Новый код if (page === 'cart') < cart.init(optionsCart); >if (page === 'order') < order.init(); cart.init(optionsOrder); >>

Мы просто запускаем catalogDB.init и инициализируем корзину с настройками, как на самой первой странице каталога.

Если все сделали правильно, то увидите примерно такую картину

Верстаем панель фильтров

Для начала добавим контейнерам filters и goods бутстраповские классы col-md-12, дабы они занимали всю доступную ширину. И добавим между ними парочку переносов строк, если прямо сейчас не хотим возиться с css.

А в filters уже напишем основную верстку

 
Все категории Ноутбуки Смартфоны Категория №2 Категория №3 
 
 

Верстка стандартная, на что стоит обратить внимание, так это на id, data-атрибуты, классы c js-префиксом и атрибуты name. Все эти данные будут использоваться в дальнейшем в js-коде или участовать в формировании данных для отправки на сервер (как атрибуты name).

Понятно, что пока все данные захардкожены. Категории, бренды и цены будут подтягиваться с сервера и выглядеть прилично. Я сознательно подготовил сначала всю верстку, чтобы потом не отвлекаться на нее при разработке js-кода. А пока это выглядит так

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

Подключаем слайдер jqueryUI

Для подключения слайдера нам понадобится немногое — скачать нужные файлы с официального сайта и закинуть их в папку проекта. Вот ссылка на используемый в нашей статье компонент. В скачанном плагине будет по одному css и js файлу и папку images с иконками. Создадим в корне нашего проекта папку components, а в ней jquery-ui, куда и положим скачанные файлы. А теперь заставим все это добро работать.

Сначала подключим на странице каталога catalog.html два нужных файла — components/jquery-ui/jquery-ui.min.css в секции head и components/jquery-ui/jquery-ui.min.js — среди скриптов в конце страницы. Только js подключайте обязательно после jquery и до catalogDB.

Ну и самое интересное — js-код для инициализации слайдера. Модуль catalogDB.js будет выглядеть так:

'use strict'; // Модуль каталога для работы с БД var catalogDB = (function($) < var ui = < $prices: $('#prices'), $pricesLabel: $('#prices-label'), $minPrice: $('#min-price'), $maxPrice: $('#max-price') >; // Инициализация модуля function init() < _initPrices(< minPrice: 5000, maxPrice: 50000 >); > // Изменение диапазона цен function _onSlidePrices(event, elem) < var minPrice = elem.values[0], maxPrice = elem.values[1]; ui.$pricesLabel.html(minPrice + ' - ' + maxPrice + ' руб.'); ui.$minPrice.val(minPrice); ui.$maxPrice.val(maxPrice); >// Инициализация цен с помощью jqueryUI function _initPrices(options) < ui.$prices.slider(< range: true, min: options.minPrice, max: options.maxPrice, values: [options.minPrice, options.maxPrice], slide: _onSlidePrices >); > // Экспортируем наружу return < init: init >>)(jQuery);

Для начала создадим объект ui, в котором закешируем нужные dom-элементы.
_initPrices выполняет саму инициализацию слайдера (взято из документации jqueryUI). В параметре options мы передаем минимальное и максимальное значение для слайдера. Опция slide содержит функцию _onSlidePrices, вызываемую при изменении позиций слайдера. В _onSlidePrices пишем код, который перерисовывает метку с указанием диапазона цен и устанавливает значения для скрытых инпутов min-price и max-price. А в методе init мы просто запустим _initPrices с левыми настройками 5000 и 50000.

Слайдер подключен, можете поиграть с ним и наблюдать, как меняются значения цен

Пора бы уже и заканчивать с версткой и переходить к более интересным вещам, но нам осталось еще совсем немного — заделать список товаров. Утешает то, что после этого к верстке мы уже не вернемся 🙂

Верстаем список товаров

Товары у нас будут очень похожи на уже упоминаемый каталог из статьи про корзину в интернет-магазине. Разве что чуть компактнее для экономии места. Добавим в разметку верстку для одного товара. Смотрим html-код.

Артикул 12, Acer Aspire
Бренд: Acer
18000 руб.
Добавить в корзину

data-атрибуты ровно такие же, какие и нужны для возможности добавления товаров в корзину. Картинки для всех товаров Вы найдете в исходниках (ссылка будет после публикации всех уроков). И последним штрихом добавим немного css-кода в файл css/main.css. Необязательно, но для небольшой красоты пусть будет.

/* Каталог товаров с фильтрами*/ .small-good-item < border: solid 1px gray; padding: 5px; list-style: none; border-radius: 2px; >.small-good-item__img < max-width: 60%; >.small-good-item__name < color: steelblue; >.small-good-item__price

Наконец наша верстка полностью готова, результат видим ниже

Подведем итоги

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

Верстать нам больше не придется, следующий урок будет о том, как собрать все нужные данные на клиенте, как отправить их на сервер и вернуть какой-то результат. А пока можете вспомнить предыдущий урок про структуру базы данных. Она нам еще пригодится при написании серверного кода.

Все об интернет-магазинах

• Демо интернет-магазина
• Корзина интернет-магазина. С чего все началось
• Оформляем заказ на клиенте и сервере
• Добавляем доставку
• Фильтры и сортировки на клиенте и сервере
• Урок 0. Вводный
• Урок 1. Структура базы данных
• Урок 2. Структура проекта и верстка
• Урок 3. Сбор данных на клиенте и отправка на сервер
• Урок 4. Пишем базовый php-код и sql-запросы
• Урок 5. Прием данных с сервера и рендеринг на клиенте
• Урок 6. Заключительный, дорабатываем некоторые штрихи
• Сравнение товаров
• Постраничная навигация по товарам
• Преобразуем каталог, переключаем внешний вид товаров одной кнопкой
• Отправка sms при оформлении заказа
• Админка интернет-магазина на vue.js — серия уроков
• Авторизация на сессиях. Делаем логин в админке
• Docker для начинающих. Докеризуем интернет-магазин

Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.
Истории из жизни айти и обсуждение кода.

Источник

Фильтр контента на чистом HTML + CSS

Фильтр блоков на чистом HTML и CSS. Серьезным решением это назвать сложно, но чтобы посмотреть на возможности HTML и CSS очень даже ничего! В принципе, можно использовать на каком-нибудь простом сайте за 500р, созданном на коленке с телефона пока ехал в электричке.

HTML

FILTER BY COLOR
 
 BLUE RED GREEN RESET 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 

CSS

body < margin:0; text-align:center; font-family: Verdana; background:#f5f5f5; >h1 < text-align:center; >.container < width:90%; margin:0 auto; >input[type="radio"] < display:none; >label < width:23%; float:left; text-align:center; background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); color:#222222; padding:0.5%; margin:0.5%; margin-bottom:30px; cursor:pointer; >input[type="radio"][id="blue"]:checked + label < background:#6666ff; >input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green < width:0; height:0; padding:0; margin:0; opacity:0; >input[type="radio"][id="red"]:checked + label < background:#ff4466; >input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green < width:0; height:0; padding:0; margin:0; opacity:0; >input[type="radio"][id="green"]:checked + label < background:#66dd99; >input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red < width:0; height:0; padding:0; margin:0; opacity:0; >.tile < width:23%; height:100px; float:left; transition:all 1s; margin:0.5%; padding:0.5%; >.green < background:#66dd99; >.blue < background:#6666ff; >.red

Источник