Выбор продукта и быстрое добавление в Корзину с помощью jQuery

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

 

ДЕМО

ИСХОДНИКИ

 

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

Стандартный 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 для создания анимации рисования.

Последнее примечание для сенсорных устройств: мы использовали 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() (чтобы обновить количество продуктов, добавленных в корзину).

 

Вот и всё!

---