Конструктор товара
Настраиваемый и адаптивный конструктор товаров для интернет-магазина.
Конструктор товаров — модный тренд, когда пользователь может собрать свою персональную комплектацию товара.
Реализация такой фишки — задача не из простых. Мы решили создать простой шаблон товара, к которому можно будет “пришить” кое-какие плюшки!
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"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.