Автор

Конструктор продуктов & товаров на jQuery

Конструктор продуктов & товаров на jQuery


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

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

 

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

 

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

Структура HTML состоит из трех основных элементов: заголовок header.main для верхней навигации, div.cd-builder для шагов конструктора и 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 &amp; 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, используемый для этого ресурса, довольно прост, вы можете скачать демонстрационный файл, чтобы взглянуть на весь код.

Только одно примечание о стиле основных элементов: шаг div.cd-builder используются для обертывания разных шагов конструктра; Его элементы списка находятся в абсолютном положении, имеют высоту и ширину 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(){
		//create a productBuilder object for each .cd-product-builder
		new ProductBuilder($(this));
	});
}

Когда пользователь выбирает одну из моделей, вызов Ajax заботится о загрузке нового контента для выбранной модели; Атрибут модели данных добавляется к каждому элементу списка внутри списка ul.models и равен имени файла HTML, из которого новый контент должен быть извлечен (modelType в коде ниже).

$.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) {
       //...
    }
});

Каждый элемент списка имеет также цену данных, которая является ценой выбранной модели. Атрибуты цены данных также добавляются к другим параметрам внутри конструктора (цвета, принадлежности) и используются для обновления окончательной цены продукта.

Что касается возможных настроек продукта, мы использовали класс .options-list для таргетинга списков опций, среди которых пользователь может выбрать (в наших примерных моделях и аксессуарах). Когда пользователь выбирает опцию, функция updateListOptions () заботится об обновлении цены продукта (и содержимого, если модель выбрана).

//detect click on one element in an options list (e.g, models, accessories)
this.optionsLists.on('click', '.js-option', function(event){
	self.updateListOptions($(this));
});

Опция класса .js-option добавляется к каждому элементу списка внутри списка ul.options и используется для обнаружения события. Если параметры являются эксклюзивными (например, с моделями, поскольку вы можете выбрать только один вариант), добавляется второй класс .js-radio.

Вместо этого используется настраиваемый класс .cd-product-customizer, например, Colors, где пользователь может выбрать опцию и увидеть изменения в продукте. Когда выбран один из этих параметров, функция customizeModel () следит за обновлением предварительного просмотра продукта и цены на продукт (при необходимости).

//detect clicks on customizer controls (e.g., colors ...)
this.stepsWrapper.on('click', '.cd-product-customizer a', function(event){
	event.preventDefault();
	self.customizeModel($(this));
})

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

Конструктор продуктов & товаров на jQuery

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


Конструктор продуктов & товаров на jQuery

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


Конструктор продуктов & товаров на jQuery

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.


Конструктор продуктов & товаров на jQuery

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close