%d0%b0%d0%bd%d0%b8%d0%bc%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%bd%d0%be%d0%b5-%d0%b2%d0%b7%d0%b0%d0%b8%d0%bc%d0%be%d0%b4%d0%b5%d0%b9%d1%81%d1%82%d0%b2%d0%b8%d0%b5-%d1%81-%d0%ba%d0%be%d1%80%d0%b7В данном уроке мы рассмотрим как создать анимацию всплывающего окна для пользователя который решил купить товар на вашем сайте. Корзина на сайте с покупками является неотъемлемым дизайном интернет магазина. Иногда разработчики не много внимания уделяют данному разделу, по этому он остается блеклым звеном в дизайне. Мы решили исправить данную проблему и создать замечательный дизайн, при нажатии на иконку корзины произойдет разворот корзины, без перехода на другую страницу, с подробной информацией и возможностью продолжить покупки.

 

Данное решение является кроссбраузерным, по этому будет корректно отображаться в различных браузерах, что немало важно сейчас.  И так, давайте приступим.

Шаг 1. HTML

Структура  HTML разметки корзины состоит из двух основных элементов: .cd-cart-trigger для запуска корзины, а также .cd-cart для ее содержания.

Неупорядоченный список внутри элемента  div.body  по умолчанию пустой (когда корзина пустая); когда продукт будет добавлен в корзину, элементы списка вставляются с помощью JavaScript.

С разметкой мы разобрались, теперь будем переходить к следующему шагу, в котором мы расскажем о добавлении визуального оформления к нашим элементам.

%d0%b0%d0%bd%d0%b8%d0%bc%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%bd%d0%be%d0%b5-%d0%b2%d0%b7%d0%b0%d0%b8%d0%bc%d0%be%d0%b4%d0%b5%d0%b9%d1%81%d1%82%d0%b2%d0%b8%d0%b5-%d1%81-%d0%ba%d0%be%d1%80%d0%b7

Шаг 2. CSS

В стилях элементы .cd-cart и .cd-cart-trigger отвечают за фиксацию корзины на странице и перемещение материалов за пределы окна просмотра (с помощью translateY) когда элемент добавлен в корзину, при этом класс .empty удаляется из элемента .cd-cart-container  корзины.

Что касается анимации добавления продукции в корзину то мы устанавливаем фиксированную высоту и ширину к значению div.wrapper (то же самое мы делаем для значения a.cd-cart-trigger); когда корзина открыта, мы используем класс .cart-open, чтобы анимировать его высоту и ширину раскрывая содержание корзины.

Класс .deleted используется для удаления элемента из корзины: удаленный элемент имеет абсолютную позицию, а cd-item-slide-out - анимация используется для создания выдвижного эффекта.

Если пользователь нажимает на отмену, то класс .deleted удаляется.

Шаг 3. JavaScript

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

Дополнительные функции, такие как updateCartCount() или  updateCartTotal(), были определены для обновления счетчика в корзине, когда новые продукты добавляются или удаляются с корзины, а также когда количество продуктов добавленных в корзину было изменено.

Вот и все. Готово!

Читайте также: