Автор

Анимированное взаимодействие с корзиной сайта на 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

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


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

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


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

Версия скрипта от TRANE73. Скрипт показывает время существования сайта, с указанной вами даты. Сам по себе скрипт простой, но он удобный и небольшой. В зависимости от даты меняются слова например сайт существует 2 дня 7 дней 101 день. Если вам надоело каждый день менять цифры, то просто установите этот скрипт:


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

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close