Таблица сравнения товаров

Адаптивная таблица сравнения товаров с возможностью фильтрации.

demosourse

Если вы занимаетесь разработкой онлайн магазина с огромным количеством товаров, то возможность сравнения продуктов несомненно пригодится. Самый простой вариант реализации — простая HTML таблица. Если же вы хотите предоставить пользователям возможность сравнивать 6 и более товаров, то данная задача усложняется. К тому же нужно предусмотреть адаптивность под различные устройства.

В этой статье вы найдёте готовое решение — таблицу сравнения товаров онлайн магазина. Наша реализация родилась после ознакомления с сайтом Sony UK.

HTML структура

HTML структура будет состоять из элемента section.cd-products-comparison-table, вписанного в <header> и div.cd-products-table. Так же в <header> будут находиться кнопки фильтрации и сброса, а в div.cd-products-table поместим элемент div.features с списком товаров для сравнения и div.cd-products-wrapper. Каждый отдельный продукт будет элементом ненумерованного списка ul.cd-products-columns.

<section class="cd-products-comparison-table">
	<header>
		<h2>Compare Models</h2>

		<div class="actions">
			<a href="#0" class="reset">Reset</a>
			<a href="#0" class="filter">Filter</a>
		</div>
	</header>

	<div class="cd-products-table">
		<div class="features">
			<div class="top-info">Models</div>
			<ul class="cd-features-list">
				<li>Price</li>
				<li>Customer Rating</li>
				<li>Resolution</li>
				<!-- other features here -->
			</ul>
		</div> <!-- .features -->

		<div class="cd-products-wrapper">
			<ul class="cd-products-columns">
				<li class="product">
					<div class="top-info">
						<div class="check"></div>
						<img src="../img/product.png" alt="product image">
						<h3>Sumsung Series 6 J6300</h3>
					</div> <!-- .top-info -->

					<ul class="cd-features-list">
						<li>$600</li>
						<li class="rate"><span>5/5</span></li>
						<li>1080p</li>
						<!-- other values here -->
					</ul>
				</li> <!-- .product -->

				<li class="product">
					<!-- product content here -->
				</li> <!-- .product -->

				<!-- other products here -->
			</ul> <!-- .cd-products-columns -->
		</div> <!-- .cd-products-wrapper -->

		<ul class="cd-table-navigation">
			<li><a href="#0" class="prev inactive">Prev</a></li>
			<li><a href="#0" class="next">Next</a></li>
		</ul>
	</div> <!-- .cd-products-table -->
</section> <!-- .cd-products-comparison-table -->

Стили

Выставляем элементу .cd-products-wrapper width равную 100% и overflow-x равную auto; ширина элемента .cd-products-columns будет равна сумме всех колонок + придаём ему возможность прокрутки. Позиционирование блока div.features будет абсолютным, помещаем его в левой стороне области обзора.

.cd-products-wrapper {
  overflow-x: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}

.cd-products-table .features {
  /* fixed left column - product properties list */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 120px;
}

.cd-products-columns {
  /* products list wrapper */
  width: 1200px; /* single column width * products number */
  margin-left: 120px; /* .features width */
}

На крупных мониторах (более 1170px), класс .top-fixed будет прикрепляться к .cd-products-table при прокрутке страницы, чтобы главная информация о товаре была всегда вверху (название товара и изображение):

@media only screen and (min-width: 1170px) {
  .cd-products-table.top-fixed .cd-products-columns > li {
    padding-top: 160px;
  }

  .cd-products-table.top-fixed .top-info {
    height: 160px;
    position: fixed;
    top: 0;
  }

  .cd-products-table.top-fixed .top-info h3 {
    transform: translateY(-116px);
  }

  .cd-products-table.top-fixed .top-info img {
    transform: translateY(-62px) scale(0.4);
  }
}

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

Для реализации таблицы продуктов создадим объект productsTable, а так же воспользуемся функцией bindEvents для прослушки некоторых событий:

function productsTable( element ) {
  this.element = element;
  this.table = this.element.children('.cd-products-table');
  this.productsWrapper = this.table.children('.cd-products-wrapper');
  this.tableColumns = this.productsWrapper.children('.cd-products-columns');
  this.products = this.tableColumns.children('.product');
  //дополнительные свойства
  // прослушка событий таблицы
  this.bindEvents();
}

productsTable.prototype.bindEvents = function() {
  var self = this;

  self.productsWrapper.on('scroll', function(){
    // определение прокрутки влево
  });

  self.products.on('click', '.top-info', function(){
    //добавление/удаление класса .selected товару
  });

  self.filterBtn.on('click', function(event){
    //фильтрация товаров
  });
  //reset product selection
  self.resetBtn.on('click', function(event){
    //сброс
  });

  this.navigation.on('click', 'a', function(event){
    //прокрутка по таблице влево-вправо с помощью кнопок
  });
}

var comparisonTables = [];
$('.cd-products-comparison-table').each(function(){
  //создаём объект productsTable для каждого .cd-products-comparison-table
  comparisonTables.push(new productsTable($(this)));
});

Как вы уже поняли, мы прикрепили прослушку прокрутки по .cd-products-wrapper; при добавлении класса .top-fixed к элементу .cd-products-table, позиции элементов .top-info будут зафиксированы, поэтому вместе с .cd-products-columns прокрутка происходить не будет. Функция updateLeftScrolling() используется для актуализации данных в таблице при прокрутке по элементу .cd-products-wrapper.

productsTable.prototype.updateLeftScrolling = function() {
  var scrollLeft = this.productsWrapper.scrollLeft();

  if( this.table.hasClass('top-fixed') && checkMQ() == 'desktop') setTranformX(this.productsTopInfo, '-'+scrollLeft);
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/products-comparison-table/
Перевел: Станислав Протасевич
Урок создан: 29 Июля 2016
Просмотров: 17290
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^