Конструктор товара

demosourse

Настраиваемый и адаптивный конструктор товаров для интернет-магазина.

Конструктор товаров — модный тренд, когда пользователь может собрать свою персональную комплектацию товара.

Реализация такой фишки — задача не из простых. Мы решили создать простой шаблон товара, к которому можно будет “пришить” кое-какие плюшки!

HTML структура

HTML структура будет состоять из 3х основных элементов: header.main-header (верхняя навигации) div.cd-builder-steps (шаги конструктора) footer.cd-builder-footer (нижняя навигация).

<div class="cd-product-builder">
	<header class="main-header">
		<h1>Product Builder</h1>

		<nav class="cd-builder-main-nav disabled">
			<ul>
				<li class="active"><a href="#models">Models</a></li>
				<li><a href="#colors">Colors</a></li>
				<li><a href="#accessories">Accessories</a></li>
				<li><a href="#summary">Summary</a></li>
			</ul>
		</nav>
	</header>

	<div class="cd-builder-steps">
		<ul>
			<li data-selection="models" class="active builder-step">
				<section class="cd-step-content">
					<header>
						<h1>Select Model</h1>
						<span class="steps-indicator">Step <b>1</b> of 4</span>
					</header>

					<a href="#0" class="cd-nugget-info">Article & Downaload</a>

					<ul class="models-list options-list cd-col-2">
						<!-- models here -->
					</ul>
				</section>
			</li>
			<!-- additional content will be inserted using ajax -->
		</ul>
	</div>

	<footer class="cd-builder-footer disabled step-1">
		<div class="selected-product">
			<img src="img/product01_col01.jpg" alt="Product preview">

			<div class="tot-price">
				<span>Total</span>
				<span class="total">$<b>0</b></span>
			</div>
		</div>

		<nav class="cd-builder-secondary-nav">
			<ul>
				<li class="next nav-item">
					<ul>
						<li class="visible"><a href="#0">Colors</a></li>
						<li><a href="#0">Accessories</a></li>
						<li><a href="#0">Summary</a></li>
						<li class="buy"><a href="#0">Buy Now</a></li>
					</ul>
				</li>
				<li class="prev nav-item">
					<ul>
						<li class="visible"><a href="#0">Models</a></li>
						<li><a href="#0">Models</a></li>
						<li><a href="#0">Colors</a></li>
						<li><a href="#0">Accessories</a></li>
					</ul>
				</li>
			</ul>
		</nav>

		<span class="alert">Please, select a model first!</span>
	</footer>
</div>

В файле index.html будет представлен только один шаг. Все последующие зависят от обстоятельств и могут быть загружены посредством выполнения Ajax запросов.

CSS стили

На этот раз CSS и вовсе не велик. Тут стоит отметить лишь то, что элемент div.cd-builder-steps является своего рода контейнером для всех шагов; позиция элементов равна absolute, настройка height и width равна 100%. Первый шаг виден изначально, остальные скрыты. Отображение осуществляется за счёт наличия класса .active.

.cd-builder-steps > ul {
  height: 100%;
  overflow: hidden;
}
.cd-builder-steps .builder-step {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  visibility: hidden;
  transition: visibility .5s;
}
.cd-builder-steps .builder-step.active {
  position: relative;
  z-index: 2;
  visibility: visible;
}

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

Реализуем объект ProductBuilder в котором воспользуемся функцией bindEvents для обработки событий.

function ProductBuilder( element ) {
	this.element = element;
	this.stepsWrapper = this.element.children('.cd-builder-steps');
	this.bindEvents();
}


if( $('.cd-product-builder').length > 0 ) {
	$('.cd-product-builder').each(function(){
		new ProductBuilder($(this));
	});
}

При выборе новой модели будет запущен Ajax запрос, который загрузит новый контент; атрибут data-model будет добавлен к каждому элементу внутри списка ul.models-list, и будет равен названию HTML файла с контентом.

$.ajax({
    type   	: "GET",
    dataType   : "html",
    url        : modelType+".html",
    beforeSend : function(){
    	self.loaded = false;
    },
    success    : function(data){
    	self.models.after(data);
    	self.loaded = true;
    	//...
    },
    error 	: function(jqXHR, textStatus, errorThrown) {
   	//...
    }
});

Также в коде присутствует атрибут data-price с ценой, которая должна прибавиться к общей сумме при выборе модели в зависимости от шага.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/product-builder/
Перевел: Станислав Протасевич
Урок создан: 8 Октября 2016
Просмотров: 10363
Правила перепечатки

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

^ Наверх ^