Интерактивное взаимодействие с корзиной на CSS и jQuery

Мы привыкли к стандартному поведению кнопки "добавить в корзину". Стандартное уведомление пользователя о том, что элемент был добавлен в корзину, и предоставление ссылки, перехода к оплате.

Сложность

анимация корзины

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

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

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 {
  /* скрытие корзины */
  transform: translateY(150px);
}

Что касается анимации корзины: мы устанавливаем фиксированную высоту и ширину для элемента div.wrapper; когда корзина открыта, используем класс .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 {
  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 и элемент снова появляется в списке.

Обработчики событий JavaScript

Когда пользователь нажимает на кнопку .cd-add-to-cart, используется функция addProduct() для добавления нового элемента в корзину, и располагается внутри списка .body > ul. Для описания товара мы используем placeholder:

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

ДЕМО СКАЧАТЬ Перевод статьи Add To Cart Interaction

Тэги: animateecommercecart

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.