Автор

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.


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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close