Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close