Простой способ показать больше изображений и вариаций продуктов прямо в галерее продуктов.
Ранее мы уже подобное описывали в статье «Выбор продукта и быстрое добавление в корзину». Это еще один пример как сделать предварительный просмотр товара!
Просматривая страницы продуктов, вы часто основываете свое решение «узнать больше» о продукте только на фотографиях. Визуальное воздействие, особенно на мобильных устройствах, имеет важное значение для каждого процесса покупки.
Что делать, если товар доступен в разных цветах? Это часть информации, которая обычно недоступна пользователю, пока он / она не захочет перейти на страницу продукта. Другой подход UX, один из сегодняшних ресурсов, заключается в том, чтобы позволить пользователю взаимодействовать с предварительным просмотром продукта прямо на главной странице галереи. Простой слайдер для проверки вариантов продукта перед переходом на страницу продукта может быть способом повысить коэффициент конверсии.
Красивые картинки товаров от Ugmonk.
Создание структуры
Структура HTML представляет собой неупорядоченный список. Каждый элемент списка содержит вложенный неупорядоченный список (с изображениями продуктов) и информацию о продукте (название и цена).
<ul class="cd-gallery">
<li>
<a href="http://codyhouse.co/">
<ul class="cd-item-wrapper">
<li class="selected">
<img src="img/ugmonk-tshirt-1.jpg" alt="Preview image">
</li>
<li class="move-right" data-sale="true" data-price="$22">
<img src="img/ugmonk-tshirt-2.jpg" alt="Preview image">
</li>
<li>
<img src="img/ugmonk-tshirt-3.jpg" alt="Preview image">
</li>
</ul> <!-- cd-item-wrapper -->
</a>
<div class="cd-item-info">
<b><a href="#0">Mountains</a></b>
<em class="cd-price">$26</em>
</div> <!-- cd-item-info -->
</li>
<!-- other list items here -->
</ul> <!-- cd-gallery -->
Обратите внимание
Элементы .cd-dots (точки навигации для каждого слайдера продукта) и .cd-new-price (новая цена, если продукт продается) не вставляются напрямую в HTML, а создаются с помощью jQuery.
Добавление стиля
На маленьких экранах изображения для предварительного просмотра продуктов видны по умолчанию: мы предполагаем, что пользователь будет видеть по одному продукту за раз, поэтому он / она не будет отвлекаться. Затем пользователь может просматривать их оба, проводя пальцем или щелкая изображения предварительного просмотра.
По умолчанию элементы списка находятся в абсолютном положении и переводятся справа (за пределами родительской галереи .cd), поэтому они не видны. Затем мы объявили 4 класса, чтобы правильно их стилизовать:
.selected(добавлен к первому элементу списка - основное видимое изображение),.move-right(добавлен ко второму элементу списка - изображение предварительного просмотра справа),.move-left(предварительный просмотр изображение слева),.hide-left(скрытые элементы слева).
.cd-item-wrapper li {
position: absolute;
top: 0;
left: 25%;
width: 50%;
opacity: 0;
transform: translateX(200%) scale(0.7);
}
.cd-item-wrapper li.selected {
/* selected item */
position: relative;
opacity: 1;
transform: translateX(0) scale(1.3);
}
.cd-item-wrapper li.move-right {
/* item on right - preview visible */
transform: translateX(100%) scale(0.7);
opacity: 0.3;
}
.cd-item-wrapper li.move-left {
/* item on left - preview visible */
transform: translateX(-100%) scale(0.7);
opacity: 0.3;
}
.cd-item-wrapper li.hide-left {
/* items hidden on the left */
transform: translateX(-200%) scale(0.7);
}
На больших экранах пользователь видит больше продуктов за раз, поэтому мы решили скрыть изображения предварительного просмотра, чтобы сделать его более удобным.
Когда пользователь наводит курсор на один из продуктов, мы предполагаем, что его внимание сосредоточено на этом конкретном продукте, поэтому отображаются изображения для предварительного просмотра. Было объявлено 3 дополнительных класса: .hover (назначается элементу предварительного просмотра, когда пользователь наводит на него курсор), .focus-on-right, (назначается элементам .selected и .move-left, когда пользователь наводит курсор на .move-right element) и .focus-on-left (присваивается элементам .selected и .move-right, когда пользователь наводит курсор на элемент .move-left).
@media only screen and (min-width: 1048px) {
.cd-item-wrapper li.move-left,
.cd-item-wrapper li.move-right {
/* hide preview items */
opacity: 0;
}
.cd-item-wrapper li.focus-on-left {
/* class added to the .selected and .move-right items when user hovers over the .move-left item (item preview on the left) */
transform: translateX(3%) scale(1.25);
}
.cd-item-wrapper li.focus-on-left.move-right {
transform: translateX(103%) scale(0.7);
}
.cd-item-wrapper li.focus-on-right {
/* class added to the .selected and .move-left items when user hovers over the .move-right item (item preview on the right) */
transform: translateX(-3%) scale(1.25);
}
.cd-item-wrapper li.focus-on-right.move-left {
transform: translateX(-103%) scale(0.7);
}
.cd-item-wrapper li.hover {
/* class added to the preview items (.move-left or .move-right) when user hovers over them */
opacity: 1;
}
.cd-item-wrapper li.hover.move-left {
transform: translateX(-97%) scale(0.75);
}
.cd-item-wrapper li.hover.move-right {
transform: translateX(97%) scale(0.75);
}
}
Обработка событий
Мы использовали jQuery для реализации слайдера изображений продукта (с сенсорной навигацией, предыдущей / следующей и навигацией по точкам).
Кроме того, мы определили функцию updatePrice () для обновления цены товара (если он продается). Эта функция проверяет, продается ли выбранный товар (data-sale = "true"), и, если это так, добавляет класс on-sale к элементу .cd-price (пересекающая линия, видимая на старой цене) и вставляет новый элемент .cd-new-price (его текст совпадает с ценой данных выбранного товара).
Вы можете увидеть живой эффект в нашей демонстрации на футболке.
function updatePrice(container, n) {
//container -> each one of the $('.cd-gallery').children('li')
//n -> index of the selected item in the .cd-item-wrapper
var priceTag = container.find('.cd-price'),
selectedItem = container.find('.cd-item-wrapper li').eq(n);
if( selectedItem.data('sale') ) {
// if item is on sale - cross old price and add new one
priceTag.addClass('on-sale');
var newPriceTag = ( priceTag.next('.cd-new-price').length > 0 ) ? priceTag.next('.cd-new-price') : $('').insertAfter(priceTag);
newPriceTag.text(selectedItem.data('price'));
setTimeout(function(){ newPriceTag.addClass('is-visible'); }, 100);
} else {
// if item is not on sale - remove cross on old price and sale price
priceTag.removeClass('on-sale').next('.cd-new-price').removeClass('is-visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
priceTag.next('.cd-new-price').remove();
});
}
}
Надеюсь, вам понравилось!
