Автор

12 05.2017
Адаптивный фильтр товаров

Адаптивный фильтр товаров


Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.

 

ДЕМО
ИСХОДНИКИ

 

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

Создание таких функций никогда не бывает легким: фильтры сильно зависят от содержимого веб-сайта; Кроме того, панель фильтров не должна отвлекать, основное внимание должно быть уделено контенту / продуктам. Поэтому мы попытались немного упростить вашу жизнь, построив для вас легко настраиваемую и легко интегрируемую панель фильтров 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.

<header class="cd-header">
<h1>Content Filter</h1>
</header>

<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li>
<li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->

<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li><!-- ... --></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->

<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4>Block title</h4>

<div class="cd-filter-content">
<!-- filter content -->
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
</form>

<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-filter -->

<a href="#0" class="cd-filter-trigger">Filters</a>
</main> <!-- cd-main-content -->

 

Добавление стиля

Большая часть 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.

.cd-tab-filter-wrapper {
  background-color: #ffffff;
  z-index: 1;
}
 
.cd-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #ffffff;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.3s, box-shadow 0.3s;
}
 
.cd-filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 60px;
  z-index: 3;
}
 
.cd-main-content.is-fixed .cd-tab-filter-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
 
.cd-main-content.is-fixed .cd-filter {
  position: fixed;
  height: 100vh;
  overflow: hidden;
}
 
.cd-main-content.is-fixed .cd-filter-trigger {
  position: fixed;
}

Еще одна вещь, о которой стоит упомянуть - это .filter-is-visible класс. Он применяется к нескольким элементам, когда пользователь запускает панель фильтра. На всех устройствах оно используется для изменения значения translateX элемента .cd-filter (от -100% до 0). На больших устройствах (> 1170px) мы также нацеливаем на .cd-gallery и .cd-tab-filter и уменьшаем их ширину: таким образом панель не будет перекрывать контент, а пользователь использует дополнительные возможности Пространство для применения фильтров и просмотра изменений одновременно, без необходимости закрывать панель.

 

Обработка событий

Для реализации функциональности фильтра содержимого мы интегрировали плагин MixItUp jQuery. Чтобы инициализировать плагин в контейнере галереи, мы используем функцию mixItUp () и объявляем переменную buttonFilter, которая содержит все пользовательские функциональные возможности фильтра. Кроме того, мы используем jQuery для открытия / закрытия панели фильтров и исправления (вместе с навигацией с вкладками), чтобы он все еще отображался при прокрутке галереи.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

10 05.2017
Адаптивный фильтр товаров

Конструктор продуктов - полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.


24 06.2017
Адаптивный фильтр товаров

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


30 10.2017
Адаптивный фильтр товаров

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.


24 06.2017
Адаптивный фильтр товаров

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close