Удобный фрагмент, позволяющий пользователям настраивать продукт непосредственно из галереи продуктов и добавлять его в корзину.
Использование больших экранов не должно ограничиваться использованием больших изображений / элементов. Мы можем поместить эти дополнительные пикселы в работу, улучшив работу пользователя с помощью дополнительных функций.
Стандартный 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()
(чтобы обновить количество продуктов, добавленных в корзину).