Автор

09 06.2017
Анимированное взаимодействие с корзиной сайта на jQuery

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

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

12 09.2013
Анимированное взаимодействие с корзиной сайта на jQuery

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


23 01.2016
Анимированное взаимодействие с корзиной сайта на jQuery

Наверное каждый веб мастер сталкивался с проблемой как оформить на своем сайте или на сайте клиента кнопки «поделиться» от известных социальных сетей, при этом не используя сторонних сервисов. Хочу продемонстрировать очень, на мой взгляд интересное решение.


08 07.2013
Анимированное взаимодействие с корзиной сайта на jQuery

Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки.  Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.


28 11.2014
Анимированное взаимодействие с корзиной сайта на jQuery

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close