Автор

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

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


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

 

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

 

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

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


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

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


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

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


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close