375(33)640-98-68
375(29)935-83-38

Фиксированная анимация корзины [JQUERY]

26.03.2019
Фиксированная анимация корзины [JQUERY]

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

Мы экспериментировали с идеей скрытия корзины по умолчанию и показывали ее, когда пользователь нажимает кнопку «добавить в корзину». Таким образом, пользователь может проверить корзину и перейти к оформлению заказа или продолжить покупки. Корзина будет придерживаться нижней части страницы, доступной в любое время.

Создание структуры

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

Если Вам понравилось и не знаете как сделать, можете воспользоваться нашими специалистами для реализации этого дополнения.

Рейтинг: 5/5 - 2 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


Мы не пытаемся кричать что мы лучшие, просто делаем работу которая нравится.

X

КОНТАКТЫ:

+375(33)640-98-68

+375(29)935-83-38