Автор

03 10.2017
Выбор продукта и быстрое добавление в Корзину

Выбор продукта и быстрое добавление в Корзину


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

 

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

 

Использование больших экранов не должно ограничиваться использованием больших изображений / элементов. Мы можем поместить эти дополнительные пикселы в работу, улучшив работу пользователя с помощью дополнительных функций.

Стандартный UX для галереи продуктов: пользователь нажимает на понравившийся ему продукт, затем переходит к отдельной странице продукта. Отсюда он должен выбрать некоторые варианты и, наконец, добавить продукт в корзину. Ничего не нарушается в этом процессе. Тем не менее, возвращающийся клиент, знакомый с линейкой продуктов, может счесть удобным выбрать и купить продукт непосредственно из галереи!

Показывая клиентам панель «Быстрая добавка в корзину», когда они взаимодействуют с предварительным просмотром продукта, мы можем уменьшить количество шагов, которые отделяют пользователя от покупки товара, и, возможно, увеличить коэффициент конверсии.

 

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

Основная структура HTML - неупорядоченный список. Каждый элемент списка содержит неупорядоченный список (слайдер изображения продукта), div.cd-customization (с кнопкой «Добавить в корзину» и параметры настройки продукта) и div.cd-item-info (с названием продукта и ценой).

<ul class="cd-gallery">
<li>
<div class="cd-single-item">
<a href="#0">
<ul class="cd-slider-wrapper">
<li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li>
<li><img src="img/thumb-2.jpg" alt="Preview image"></li>
<!-- other product images here -->
</ul>
</a>

<div class="cd-customization">
<div class="color" data-type="select">
<ul>
<li class="color-1 active">color-1</li>
<li class="color-2">color-2</li>
<!-- other product colors here -->
</ul>
</div>

<div class="size" data-type="select">
<ul>
<li class="small active">Small</li>
<li class="medium">Medium</li>
<!-- other product sizes here -->
</ul>
</div>

<button class="add-to-cart">
<em>Add to Cart</em>
<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>
</button>
</div> <!-- .cd-customization -->

<button class="cd-customization-trigger">Customize</button>
</div> <!-- .cd-single-item -->

<div class="cd-item-info">
<b><a href="#0">Product Name</a></b>
<em>$9.99</em>
</div> <!-- cd-item-info -->
</li>

<!-- other list items here -->
</ul> <!-- cd-gallery -->

 

Добавление стиля

Начнем с ползунка продукта. По умолчанию элементы списка находятся в абсолютной позиции и переведены вправо (за пределами родителя .cd-gallery), чтобы они не были видны. Затем мы использовали 2 класса для правильного их стилирования:. .selected (добавлен в первый элемент списка - изображение изображения) и .move-left (изображение продукта слева - не видно).

.cd-slider-wrapper {
  position: relative;
  overflow: hidden;
}
.cd-slider-wrapper li {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  /* by default, move the product image to the right*/
  transform: translateX(100%);
  transition: transform 0.3s 0s, visibility 0s 0.3s;
}
.cd-slider-wrapper li.selected {
  /* this is the visible product image */
  position: relative;
  visibility: visible;
  z-index: 1;
  transform: translateX(0);
  transition: transform 0.3s 0s, visibility 0s 0s;
}
.cd-slider-wrapper li.move-left {
  /* move the product image to the left */
  transform: translateX(-100%);
}

О параметрах настройки продукта: элемент .cd-customization отображается, когда пользователь наводится на продукт; он находится в абсолютном положении и помещен в нижней части своего элемента .cd-single-item parent.

Чтобы создать параметры настройки (цвет и размер), мы использовали два разных элемента <ul>, оба завернутые в div[data-type="select"] (div.size и div.color). Элемент <ul> находится в абсолютном положении и центрирован относительно его родителя, в то время как div[data-type="select"] имеет фиксированную высоту (34px) и переполнение: скрыто. Каждый элемент списка внутри неупорядоченного списка имеет высоту, равную div[data-type="select"], так что по умолчанию отображается только выбранная опция.

Когда пользователь нажимает одну из двух опций настройки, свойство переполнения div[data-type="select"] устанавливается на видимое, чтобы отображался весь элемент <ul>.

.cd-customization {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
}
 
.no-touch .cd-single-item:hover .cd-customization {
  /* product customization visible */
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
 
.cd-customization .color, .cd-customization .size {
  height: 34px;
  position: relative;
  overflow: hidden;
}
.cd-customization .color ul, .cd-customization .size ul {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
}
.cd-customization .color.is-open, .cd-customization .size.is-open {
  /* color/size list open - make ul element visible */
  overflow: visible;
}

Чтобы убедиться, что выбранный элемент <li> всегда отображается, нам пришлось переупорядочить элементы списка внутри своего родителя <ul> в соответствии с выбранным параметром. Для этого мы создали класс .selected-n (где n - выбранный элемент). Например, класс selected-3 добавляется в div[data-type="select"], когда выбран третий элемент списка:

.cd-customization .color.selected-3 ul li:first-of-type, 
.cd-customization .size.selected-3 ul li:first-of-type {
  /* third option selected in the ul.color/ul.size list */
  transform: translateY(0);
}
.cd-customization .color.selected-3 ul li:nth-of-type(2), 
.cd-customization .size.selected-3 ul li:nth-of-type(2) {
  transform: translateY(100%);
}
.cd-customization .color.selected-3 ul li:nth-of-type(3), 
.cd-customization .size.selected-3 ul li:nth-of-type(3) {
  transform: translateY(-100%);
}

О анимации «Добавить в корзину»: кнопка .add-to-cart состоит из текстового сообщения <em> (кнопки) и SVG (значок проверки). По умолчанию svg не отображается (он перемещается вправо, за пределами кнопки).
Когда продукт добавляется в корзину, класс .is-added в кнопку .add-to-cart: текст <em> (текст) скрыт (перемещен влево), а svg перемещается внутри кнопка и анимация чертежа:

.cd-customization .add-to-cart em {
  /* this is the button text message */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cd-customization .add-to-cart svg {
  /* this is the check icon */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  /* move the icon on the right - outside the button */
  transform: translateX(50%) translateY(-50%);
}
.cd-customization .add-to-cart.is-added em {
  /* product added to the cart - hide text message on the left with no transition*/
  color: transparent;
  transform: translateX(-100%);
}
.cd-customization .add-to-cart.is-added svg {
  /* product added to the cart - move the svg back inside the button */
  transform: translateX(-50%) translateY(-50%);
}

О анимации рисования svg мы использовали два атрибута svg: stroke-dasharray и stroke-dashoffset. В нашем случае мы устанавливаем stroke-dasharray = "19.79 19.79" и stroke-dashoffset = "19.79" (где 19.76 - длина пути):

<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
</svg>

а затем оживить значение dashoffset до 0 для создания анимации рисования.

Примечание

Чтобы оживить значение dashoffset, мы могли бы использовать css-переходы (а не использовать метод iQuery animate()), но, к сожалению, у IE11 есть ошибка с переходами на некоторые свойства svg.

Последнее примечание для сенсорных устройств: мы использовали Modernizer для таргетинга сенсорных устройств и добавления .cd-customization-trigger (значок настроек), чтобы вызвать видимость .cd-customization.

 

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

Когда пользователь взаимодействует с одним из параметров настройки продукта (например, с параметрами цветов), класс .hover добавляется в соответствующий элемент .cd-single-item. Этот класс устанавливает .cd-customization element на видимый, так что он не исчезает, если курсор покидает продукт (мы предположили, что пользователь заинтересован в продукте, так как он взаимодействует с ним, и не хочет терять варианты, если он случайно покидает продукт). По той же причине класс .hover удаляется из всех других продуктов (так что пользователь может сосредоточиться только на продукте, с которым он взаимодействует).

Для этого была создана функция resetCustomization():

function resetCustomization(selectOptions) {
	//add .hover class to the item user is interacting with
	//close ul.color/ul.size if they were left open and user is not interacting with them anymore
	//remove the .hover class from items if user is interacting with a different one
	selectOptions.siblings('[data-type="select"]').removeClass('is-open').end().parents('.cd-single-item').addClass('hover').parent('li').siblings('li').find('.cd-single-item').removeClass('hover').end().find('[data-type="select"]').removeClass('is-open');
}

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

 

Вот и всё!


vk.com/club.ssdru

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


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

29 09.2014
Выбор продукта и быстрое добавление в Корзину

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


08 12.2014
Выбор продукта и быстрое добавление в Корзину

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

31 03.2013
Выбор продукта и быстрое добавление в Корзину

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


17 04.2013
Выбор продукта и быстрое добавление в Корзину

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close