Стилизация модуля Joomshopping Extended Filter 1.4.4

Опубликовано: . Категория: Расширения

Во время проектирования интернет-магазина на базе Joomshopping был найден симпатичный бесплатный модуль фильтра Joomshopping Extended Filter Module 1.4.4.

Информация о расширении

Основные возможности модуля:

  • Отображение полей поиска: цена, названия, названия a-z, характеристики, атрибуты товара, категории, производители;
  • Возможность реализации полей цены и текстового типа характеристик в качестве диапазона ползунка;
  • Ограничение поиска определенной категорией (статический по ID и автоматический по просматриваемой категории);
  • Отображение полей поиска в нескольких столбцах (для горизонтального положения модуля в позиции шаблона);
  • Отображение плавающей кнопки результатов поиска и счетчик товаров;
  • Автоматическая выборка списка характеристик или атрибутов товаров на основе просматриваемой категории;
  • Ajax поиск (параметр включается/выключается в настройках модуля).

Стилизация модуля с помощью CSS3

Фильтр практически любого интернет-магазина, в основном, представляет собой множество чекбоксов и переключателей. Выполним их стилизацию с помощью CSS3 без использования кода Javascript до приблизительного уровня, например, Rozetka.com.ua. В сети множество готовых вариаций стилизации чекбоксов, различных переключателей и, по сути, можно воспользоваться любым из них, имея минимальную базу знаний в CSS.

Итак, первое, что необходимо сделать - перенести стандартное отображение элементов за область видимости и добавить отступы к соседствующим меткам:

input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {position: absolute; left: -9999px}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label,
input[type="radio"]:checked + label,
input[type="radio"]:not(:checked) + label {
	display: inline-block;
	position: relative;
	padding-left: 30px;
	line-height: 20px;
	cursor: pointer;
}

Перед метками необходимо добавить красивые стилизованные контейнеры для пользовательских элементов. Для чекбоксов - квадраты с закругленными краями, а для переключателей - небольшие окружности:

input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before,
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 1px solid #ccc;
	background-color: #fff;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:not(:checked) + label:before {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}

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

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
	content: "";
	position: absolute;
	-moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
	top: 4px;
	left: 3px;
	width: 10px;
	height: 5px;
	border-left: 4px solid #8ac187;
	border-bottom: 4px solid #8ac187;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
input[type="radio"]:checked + label:after,
input[type="radio"]:not(:checked) + label:after {
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	background-color: #8ac187;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}

Последний этапом необходимо скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в активном (выбранном) состоянии:

input[type="checkbox"]:not(:checked) + label:after,
input[type="radio"]:not(:checked) + label:after {opacity: 0}
input[type="checkbox"]:checked + label:after,
input[type="radio"]:checked + label:after {opacity: 1}

На этом стилизация чекбоксов и переключателей завершена.

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

Откройте файл modules/mod_jshopping_extended_filter/assets/css/filter.css и в конец файла добавьте следующий код:

/* Стилизация Checkbox и Radio */
.ExtendedFilterContainer input[type="checkbox"]:checked,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked),
.ExtendedFilterContainer input[type="radio"]:checked,
.ExtendedFilterContainer input[type="radio"]:not(:checked) {position: absolute; left: -9999px}
.ExtendedFilterContainer input[type="checkbox"]:checked + label,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label,
.ExtendedFilterContainer input[type="radio"]:checked + label,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label {
	display: inline-block;
	position: relative;
	padding-left: 30px;
	line-height: 20px;
	cursor: pointer;
}
.ExtendedFilterContainer input[type="checkbox"]:checked + label:before,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label:before,
.ExtendedFilterContainer input[type="radio"]:checked + label:before,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border: 1px solid #ccc;
	background-color: #fff;
}
.ExtendedFilterContainer input[type="checkbox"]:checked + label:before,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label:before {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
}
.ExtendedFilterContainer input[type="radio"]:checked + label:before,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label:before {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.ExtendedFilterContainer input[type="checkbox"]:checked + label:after,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label:after,
.ExtendedFilterContainer input[type="radio"]:checked + label:after,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label:after {
	content: "";
	position: absolute;
	-moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.ExtendedFilterContainer input[type="checkbox"]:checked + label:after,
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label:after {
	top: 4px;
	left: 3px;
	width: 10px;
	height: 5px;
	border-left: 4px solid #8ac187;
	border-bottom: 4px solid #8ac187;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.ExtendedFilterContainer input[type="radio"]:checked + label:after,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label:after {
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	background-color: #8ac187;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.ExtendedFilterContainer input[type="checkbox"]:not(:checked) + label:after,
.ExtendedFilterContainer input[type="radio"]:not(:checked) + label:after {opacity: 0}
.ExtendedFilterContainer input[type="checkbox"]:checked + label:after,
.ExtendedFilterContainer input[type="radio"]:checked + label:after {opacity: 1}

Описанное решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также в Internet Explorer версии 9 и выше. Результат выполненной работы можно посмотреть на скриншотах в формате ДО / ПОСЛЕ.

Для написания данного материала использовалась информация с ресурсов Habr.com и Joomcar.net.

Метки: модификация, joomshopping, магазин, css
Стах
Очень качественно объяснил. Спасибо тебе за твою работу.

500 символов осталось

TOP

Популярные материалы

NEW

Переводы расширений