Плавающая корзина, которая скользит, когда пользователь решает купить товар.
Мы привыкли к различным шаблонам, когда речь идет о процессе «добавить в корзину». Основная идея этого шаблона состоит в том, чтобы уведомить пользователя о том, что элемент был добавлен в корзину, и предоставить ему / ей ссылку, чтобы перейти к оформлению заказа.
Мы экспериментировали с идеей скрытия корзины по умолчанию и показывали ее, когда пользователь нажимает кнопку «добавить в корзину». Таким образом, пользователь может проверить корзину и перейти к оформлению заказа или продолжить покупки. Корзина будет придерживаться нижней части страницы, доступной в любое время.
Создание структуры
Структура HTML корзины состоит из двух основных элементов: .cd-cart-trigger для триггера корзины и общей суммы тележки и .cd-cart для содержимого корзины.
<div class="cd-cart-container empty">
<a href="#0" class="cd-cart-trigger">
Cart
<ul class="count"> <!-- cart items count -->
<li>0</li>
<li>0</li>
</ul> <!-- .count -->
</a>
<div class="cd-cart">
<div class="wrapper">
<header>
<h2>Cart</h2>
<span class="undo">Item removed. <a href="#0">Undo</a></span>
</header>
<div class="body">
<ul>
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</div>
<footer>
<a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
</footer>
</div>
</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->Неупорядоченный список внутри элемента div.body по умолчанию пуст (пустая корзина); Когда продукт добавляется в корзину, элемент элемента списка вставляется с использованием JavaScript.
<div class="body">
<ul>
<li class="product">
<div class="product-image">
<a href="#0"><img src="img/thumb.jpg" alt="placeholder"></a>
</div>
<div class="product-details">
<h3><a href="#0">Product Name</a></h3>
<span class="price">$25.99</span>
<div class="actions">
<a href="#0" class="delete-item">Delete</a>
<div class="quantity">
<label for="cd-product-'+ productId +'">Qty</label>
<span class="select">
<select id="cd-product-'+ productId +'" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
</span>
</div>
</div>
</div>
</li>
<!-- other products added to the cart -->
</ul>
</div>
Добавление стиля
Элементы .cd-cart и .cd-cart-trigger находятся в фиксированном положении и перемещаются за пределы области просмотра (с использованием translateY). Когда элемент добавляется в корзину, класс .empty удаляется из .cd-cart-container и отображается корзина.
.cd-cart-trigger,
.cd-cart {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.empty .cd-cart-trigger,
.empty .cd-cart {
/* hide cart */
transform: translateY(150px);
}Что касается анимации корзины: мы назначаем фиксированную высоту и ширину элементу div.wrapper (то же самое, что и для a.cd-cart-trigger); Когда корзина открыта, мы используем класс .cart-open для анимации его высоты и ширины при показе содержимого корзины.
.cd-cart .wrapper {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
overflow: hidden;
height: 72px;
width: 72px;
border-radius: 6px;
transition: height .4s .1s, width .4s .1s, box-shadow .3s;
transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
background: #ffffff;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}
.cart-open .cd-cart .wrapper {
height: 100%;
width: 100%;
transition-delay: 0s;
}Класс .deleted используется для удаления элемента из корзины: удаленный элемент имеет абсолютную позицию, а анимация cd-item-slide-out используется для создания эффекта выталкивания.
.cd-cart .body li.deleted {
/* this class is added to an item when it is removed form the cart */
position: absolute;
left: 1.4em;
width: calc(100% - 2.8em);
opacity: 0;
animation: cd-item-slide-out .3s forwards;
}
@keyframes cd-item-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(80px);
opacity: 0;
}
}Если пользователь нажимает «Отменить», класс .deleted удаляется, и элемент снова вводится в список.
Обработка событий
Когда пользователь нажимает кнопку .cd-add-to-cart, функция addProduct() используется для вставки нового элемента списка внутри элемента .body > ul. Детали продукта используются заполнителями, которые должны быть заменены реальной информацией о продукте:
function addProduct() {
//this is just a product placeholder
var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
cartList.prepend(productAdded);
}Дополнительные функции, такие как updateCartCount() или updateCartTotal(), были определены для обновления счета корзины и общего количества при добавлении / удалении новых продуктов или при изменении количества продукта, добавленного в корзину.
