Фильтры в интернет-магазине. Урок 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 будет простым.
Пока ничего хитрого. Заголовок h2, меню nav nav-pills и два контейнера для фильтров и списка товаров. Ими мы займемся чуть позже. В списке товаров будет крутиться гифка до тех пор, пока не загрузятся данные с сервера.
В конце перед закрывающимся тегом body подключаем 5 javascript-файлов: jQuery, underscore, наш новый модуль catalogDB, старую добрую корзину и main.js — главный модуль приложения, который запускает все остальное. Подробнее эти модули расписаны в статье Корзина для интернет-магазина на фронте.
Заготовка модуля catalogDB.js
Сильно мудрить не будем и пойдем по стопам и примерам предыдущих статей. Объявим модуль-переменную catalogDB и заведем в ней пока единственную функцию init, которую экспортируем во внешний мир. В init будет для начала строчка вывода в консоль соответствующего сообщения. Дальше, конечно же, ее расширим.
Редактируем главный модуль main.js
Напоминаю, в main.js у нас находится модуль app — главный модуль приложения. И его метод init, который и выполняет всю работу по инициализации соответствующих частей приложения. Чтобы завести наш новый catalogDB, нужно дописать метод init в main.js вот так:
Мы просто запускаем catalogDB.init и инициализируем корзину с настройками, как на самой первой странице каталога.
Если все сделали правильно, то увидите примерно такую картину 
Верстаем панель фильтров
Для начала добавим контейнерам filters и goods бутстраповские классы col-md-12, дабы они занимали всю доступную ширину. И добавим между ними парочку переносов строк, если прямо сейчас не хотим возиться с css.
А в filters уже напишем основную верстку
Верстка стандартная, на что стоит обратить внимание, так это на 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 будет выглядеть так:
Для начала создадим объект ui, в котором закешируем нужные dom-элементы.
_initPrices выполняет саму инициализацию слайдера (взято из документации jqueryUI). В параметре options мы передаем минимальное и максимальное значение для слайдера. Опция slide содержит функцию _onSlidePrices, вызываемую при изменении позиций слайдера. В _onSlidePrices пишем код, который перерисовывает метку с указанием диапазона цен и устанавливает значения для скрытых инпутов min-price и max-price. А в методе init мы просто запустим _initPrices с левыми настройками 5000 и 50000.
Слайдер подключен, можете поиграть с ним и наблюдать, как меняются значения цен 
Пора бы уже и заканчивать с версткой и переходить к более интересным вещам, но нам осталось еще совсем немного — заделать список товаров. Утешает то, что после этого к верстке мы уже не вернемся 🙂
Верстаем список товаров
Товары у нас будут очень похожи на уже упоминаемый каталог из статьи про корзину в интернет-магазине. Разве что чуть компактнее для экономии места. Добавим в разметку верстку для одного товара. Смотрим html-код.
data-атрибуты ровно такие же, какие и нужны для возможности добавления товаров в корзину. Картинки для всех товаров Вы найдете в исходниках (ссылка будет после публикации всех уроков). И последним штрихом добавим немного css-кода в файл css/main.css. Необязательно, но для небольшой красоты пусть будет.
Наконец наша верстка полностью готова, результат видим ниже 
Подведем итоги
На этом уроке мы сверстали весь интерфейс фильтров и товаров нашего интернет-магазина, практически не написав свои стили. Этим мне и нравятся фреймворки вроде bootstrap, которые позволяют быстро накидать прототип страницы, довольно простой, но притом не самый страшный.
Верстать нам больше не придется, следующий урок будет о том, как собрать все нужные данные на клиенте, как отправить их на сервер и вернуть какой-то результат. А пока можете вспомнить предыдущий урок про структуру базы данных. Она нам еще пригодится при написании серверного кода.
Компонент Фильтр Filter
Фильтруйте или сортируйте элементы используя метаданные. Любой элемент может быть отфильтрован или отсортирован независимо от того как элементы расположены. Разметка. Примеры.
Компонент Фильтр часто используется вместе с компонентом Сетка : Grid, особенно Grid + Masonry, но это не обязательно. Любой элемент может быть отфильтрован или отсортирован независимо от того как элементы расположены. Элементы исчезают и перемещаются с плавными переходами между различными состояниями фильтрации и сортировки.
Создание
Как создать и применить фильтр
Чтобы применить компонент Фильтр , вам нужно создать родительский контейнер с атрибутом uk-filter=»target: SELECTOR» . Внутри этого контейнера создайте список элементов управляющих фильтром ( фильтр управления ), а также необходимые элементы, которые вы хотите фильтровать, назовем их (элементы для фильтрации).
Чтобы указать на родительский элемент содержащий элементы, которые вы хотите фильтровать используйте опцию target: SELECTOR .
Далее нам нужно определить метаданные для каждого layout-элемента, например, к какой категории принадлежит элемент. Для этого можно использовать любой класс HTML или атрибут.
- Чтобы использовать фильтр управления добавьте атрибут uk-filter-control .
- Чтобы определить метаданные, которые должны быть отфильтрованы, используйте опцию filter: SELECTOR .
Селектор может быть любым селектором CSS, таким как класс HTML или атрибут, который вы установите для layout-элементов.
Если в значении атрибута uk-filter target это единственный параметр, вы можете использовать uk-filter=»SELECTOR» (без target ).
Если в значении атрибута uk-filter-control filter это единственный параметр , вы также можете использовать uk-filter-control=»SELECTOR» (без filter ).
Адаптивный фильтр товаров на jQuery и CSS 
Хорошо спроектированный фильтр — это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.
Для электронной коммерции это способ повысить коэффициент конверсии за счет сокращения времени, необходимого пользователю, чтобы найти то, что он ищет.
Создание таких функций никогда не бывает легким: фильтры сильно зависят от содержимого веб-сайта; Кроме того, панель фильтров не должна отвлекать, основное внимание должно быть уделено контенту / продуктам. Поэтому мы попытались немного упростить вашу жизнь, построив для вас легко настраиваемую и легко интегрируемую панель фильтров CSS.
Он использует преимущества CSS Transitions, CSS Transformations и jQuery для плавного перехода в случае необходимости.
Создание структуры
Структура HTML немного сложнее, чем обычно. Прежде всего, есть два основных блока контента: элементы header и main , второй используется для обертывания как галереи .cd-gallery , так и фильтра .cd-filter . В дополнение к этому у нас есть вкладная навигация (вложенная в 2 div элемента, из-за эффекта выпадающего эффекта, видимого на мобильных устройствах) и триггер фильтра .cd-filter-trigger .
Вы также можете заметить множество имен классов (например, в элементах списка галереи) и фильтры данных: они используются для фильтрации содержимого, а не для стилизации.
Примечание. Назначение элемента .cd-gallery> li.gap — работать в сочетании с текстом: justify; Свойство, примененное к .cd-gallery , чтобы создать сетку галереи. Вам нужно создать столько же элементов .gap , сколько и максимальное количество элементов в строке -1.
Добавление стиля
Большая часть CSS касается стилей элементов формы и других базовых украшений. Интересно, как мы определили и использовали некоторые классы — в сочетании с jQuery — для изменения поведения некоторых элементов на основе определенных событий.
Например: на всех устройствах панель фильтров фиксируется, когда она достигает вершины области просмотра. Для достижения этого эффекта мы использовали класс .is-fixed , примененный к элементу main ( .cd-main-content ), чтобы мы могли ориентировать некоторые его дочерние элементы. В частности: .cd-tab-filter-wrapper находится в статическом положении, в то время как .cd-filter и .cd-filter-trigger находятся в абсолютном положении (относительно .cd-main-content ). Когда мы применяем .is-fixed класс к .cd-main-content , мы переключаем положение всех этих элементов на Fixed.
Еще одна вещь, о которой стоит упомянуть — это .filter-is-visible класс. Он применяется к нескольким элементам, когда пользователь запускает панель фильтра. На всех устройствах оно используется для изменения значения translateX элемента .cd-filter (от -100% до 0). На больших устройствах (> 1170px) мы также нацеливаем на .cd-gallery и .cd-tab-filter и уменьшаем их ширину: таким образом панель не будет перекрывать контент, а пользователь использует дополнительные возможности Пространство для применения фильтров и просмотра изменений одновременно, без необходимости закрывать панель.
Обработка событий
Для реализации функциональности фильтра содержимого мы интегрировали плагин MixItUp jQuery. Чтобы инициализировать плагин в контейнере галереи, мы используем функцию mixItUp () и объявляем переменную buttonFilter , которая содержит все пользовательские функциональные возможности фильтра. Кроме того, мы используем jQuery для открытия / закрытия панели фильтров и исправления (вместе с навигацией с вкладками), чтобы он все еще отображался при прокрутке галереи.
Создаем адаптивную страницу портфолио с фильтрами
Доброго времени суток уважаемые хабражители. На сегодняшний день уже многие знакомы с понятием адаптивный дизайн и я хочу поделиться интересной реализацией страницы портфолио с фильтрами.
HTML разметка
Указываем заголовок страницы, необходимые meta-теги, подключаем .css и .js файлы:
Создаем тело страницы. В блоке каждому элементу
Создаем элементы портфолио
Стилизуем основные элементы-контейнеры:
Задаем стиль для навигационной панели:
Стилизуем элементы портфолио:
Описание к каждой работе в портфолио должно появляться при наведении на нее (тег
Стилизуем классы .selected и .not-selected , свойства которых описывают изменения в анимации элементов
Selection и Scrollbar
Прошли те дни, когда было актуально стилизовать scrollbar в IE 5.5 и IE6 с помощью не стандартизированных W3C свойств вида scrollbar-base-color . Хочется поделиться одной интересной особенностью webkit:
C помощью псевдо-селекторов ::-webkit-scrollbar; ::-webkit-scrollbar-track; ::-webkit-scrollbar-thumb; мы простилизовали scrollbar в webkit, что похоже на скроллинг в Gmail. Учитывая количество пользователей Google Chrome, Safari, Yandex Browser мы можем смело применять эти свойства, так как это не останется незамеченным практически для половины аудитории Вашего сайта. Если я не ошибаюсь, то об этой полезности на хабре не рассказывалось, хотя данные префиксы поддерживаются с 2009 года. Подробно об этом пишет Cris Coyier на CSS Tricks.
Media Queries
965px или меньше
840 = (170+40)*4. Ширина .conteiner равна сумме ширины и значений свойств margin-left и margin-right помноженных на 4 (элемента).
860px или меньше
При этом разрешении в одной строке выводится три элемента — 720 = (200+40)*3.
740px или меньше
600 = (160+40)*3. Добавим непрозрачность 0.5 что бы на устройствах с данным разрешением заметнее выглядели элементы с классом .not-selected:
610px или меньше
480px или меньше
JavaScript — jQuery
Все просто — манипулируем классами:
- Создаем обработчик события при клике на категории nav > li
- У всех элементов, где класс совпадает с идентификатором выбранной категории удаляем класс .not-selected и добавляем .selected.
- Удаляем класс .corrent-li и добавляем .current-li выбранной категории.
- Для всех работ не входящих в выбранную категорию удаляем класс .selected и присваиваем .not-selected
UPD: Не нашел, где указать первоисточник в редакторе, напишу здесь — webdesign.tutsplus.com
UPD: Коллеги, все кто пишет о том, что тормозит — это последствия хабраэффекта.