Анимированное взаимодействие с корзиной сайта
- Stats: 1694 1
- Author: RUDEBOX
- Category: Технології
- Comments: Комментариев нет

В данном уроке мы рассмотрим как создать анимацию всплывающего окна для пользователя который решил купить товар на вашем сайте. Корзина на сайте с покупками является неотъемлемым дизайном интернет магазина. Иногда разработчики не много внимания уделяют данному разделу, по этому он остается блеклым звеном в дизайне. Мы решили исправить данную проблему и создать замечательный дизайн, при нажатии на иконку корзины произойдет разворот корзины, без перехода на другую страницу, с подробной информацией и возможностью продолжить покупки.
Данное решение является кроссбраузерным, по этому будет корректно отображаться в различных браузерах, что немало важно сейчас. И так, давайте приступим.
Шаг 1. HTML
Структура HTML разметки корзины состоит из двух основных элементов: .cd-cart-trigger для запуска корзины, а также .cd-cart для ее содержания.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="cd-cart-container empty"> <a href="#0" class="cd-cart-trigger"> Корзина <ul class="count"> <li>0</li> <li>0</li> </ul> <!-- .count --> </a> <div class="cd-cart"> <div class="wrapper"> <header> <h2>Корзина</h2> <span class="undo">Продукт удален. <a href="#0">Отменить?</a></span> </header> <div class="body"> <ul> <!-- Продукция будет добавлена с помощью JavaScript --> </ul> </div> <footer> <a href="#0" class="checkout btn"><em>Оплатить товар</em></a> </footer> </div> </div> <!-- .cd-cart --> </div> <!-- cd-cart-container --> |
Неупорядоченный список внутри элемента div.body по умолчанию пустой (когда корзина пустая); когда продукт будет добавлен в корзину, элементы списка вставляются с помощью JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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">Название продукта</a></h3> <span class="price">25.99 грн</span> <div class="actions"> <a href="#0" class="delete-item">Удалить</a> <div class="quantity"> <label for="cd-product-'+ productId +'">Количество</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> <!--остальной товар добавленный в корзину --> </ul> </div> |
С разметкой мы разобрались, теперь будем переходить к следующему шагу, в котором мы расскажем о добавлении визуального оформления к нашим элементам.
Шаг 2. CSS
В стилях элементы .cd-cart и .cd-cart-trigger отвечают за фиксацию корзины на странице и перемещение материалов за пределы окна просмотра (с помощью translateY) когда элемент добавлен в корзину, при этом класс .empty удаляется из элемента .cd-cart-container корзины.
1 2 3 4 5 6 7 8 9 10 11 12 |
.cd-cart-trigger, .cd-cart { position: fixed; bottom: 20px; right: 5%; transition: transform .2s; } .empty .cd-cart-trigger, .empty .cd-cart { /* скрыть корзину */ transform: translateY(150px); } |
Что касается анимации добавления продукции в корзину то мы устанавливаем фиксированную высоту и ширину к значению div.wrapper (то же самое мы делаем для значения a.cd-cart-trigger); когда корзина открыта, мы используем класс .cart-open, чтобы анимировать его высоту и ширину раскрывая содержание корзины.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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 - анимация используется для создания выдвижного эффекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.cd-cart .body li.deleted { 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 удаляется.
Шаг 3. JavaScript
Когда пользователь нажимает на .cd-add-to-cart кнопку, то функция addProduct () используется для вставки нового элемента списка внутри .body > ul элемента. В описании товара мы используем свой текст, который вы замените на свой:
1 2 3 4 5 |
function addProduct() { //информация о продукте 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">Название продукта</a></h3><span class="price">Цена</span><div class="actions"><a href="#0" class="delete-item">Удалить</a><div class="quantity"><label for="cd-product-'+ productId +'">Количество</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 (), были определены для обновления счетчика в корзине, когда новые продукты добавляются или удаляются с корзины, а также когда количество продуктов добавленных в корзину было изменено.
Отправить ответ