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

Если вы разрабатываете интернет-магазин с большим количеством товаров, скорее всего вас просили добавить такую функцию: сравнительную таблицу. Стандартный подход, который работает в большинстве случаев - использование простого HTML элемента table. Но когда вам необходимо сравнить от 6 товаров и больше, это становится проблематично, особенно если вы хотите сделать таблицу адаптивной.

Сложность

В этом уроке мы сэкономим вам время и создадим сравнительную таблицу, специально предназначенную для больших интернет-магазинов. Мы вдохновлялись от интересного инструмента сравнения на сайте Sony в Великобритании. С точки зрения UX, вместо того, чтобы позволить пользователям удалять товары из списка, мы реализуем специальный фильтр, благодаря которому пользователи будут добавлять необходимые товары для сравнения.

Создание структуры

HTML структура состоит из оболочки section.cd-products-comparison-table с элементом header и div.cd-products-table. header содержит кнопки действия (фильтр и сброс), после чего идет таблица с товарами div.cd-products-table, в котором находится контейнер с классом .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>Samsung 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 имеет 100% ширину, а также свойство overflow-x: auto; .cd-products-columns имеет ширину, равную сумме ширины всех столбцов и прокрутку. div.features имеет абсолютную позицию и фиксируется слевой стороны окна.

.cd-products-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
 
.cd-products-table .features {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 120px;
}
 
.cd-products-columns {
  width: 1200px;
  margin-left: 120px;
}

На больших устройствах (viewport которых больше 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(){
});

Обратите внимание, что мы добавили обработчик к событию прокрутки в .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);
}
ДЕМО СКАЧАТЬ

 

Перевод статьи Products Comparison Table

Тэги: responsiveecommerce

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.