Корзина на сайте — часть 1

Идем сюда и жмем по кнопке «Download». В результате мы скачаем плагин корзины в архиве, заходим, распаковываем и подключаем simpleCart.js к себе на сайт. Здесь вся документация по плагину, но тем кому лень читать многа букоф, продемонстрирую быстрый старт на примере, который реализует клиентскую корзинку, смотрим и вкушаем на здоровье:

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

  • Собственно сам каталог, физически это блок с определенным классом simpleCart_shelfItem
  • Название товара — элемент с классом item_name
  • Цена — item_price
  • «Добавить в корзину» — item_add

Далее настраиваем наш плагин, для этого определяем колонки, которые будет содержать таблица заказов, вид отображения — табличный и настраиваем валюту в рубли, так как по умолчанию подсчет идет в $:

simpleCart({
    cartColumns: [
        {attr: "name", label: "Наименование"},
        {view: "decrement", label: "↓", text: "-"},
        {view: "input", attr: "quantity", label: "Количество"},
        {view: "increment", label: "↑", text: "+"},
        {view: "currency", attr: "price", label: "Стоимость"},
        {view: "remove", text: "X", label: "Удалить позицию"}
    ],
    cartStyle: "table"
});
simpleCart.currency({
    code: "RU",
    symbol: " руб.",
    name: "Рубли",
    delimiter: " ",
    after: true,
    accuracy: 0
});

Строим следующую минимально необходимую конструкцию для работы — данная HTML конструкция описывает одну карточку товара, их может быть сколь угодно много:

<div class="simpleCart_shelfItem">
<h3 class="item_name">Samsung GT-I8160</h3>
  <img src="item.jpg" alt="Item Alt">
  <span class="item_price">7 990 руб.</span>
<a href="javascript:;" class="item_add">В корзину</a>
</div>

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

Вывести информацию по количеству. В элемент «span» c данным классом будет попадать то количество товара, которое у нас будет указано в текстовом поле, например, или +1 по умолчанию, когда мы будем нажимать кнопку «В корзину»:

<span class="simpleCart_quantity"></span>

По сумме:

<span class="simpleCart_total"></span>

Вывести таблицу заказов, поля в которой определены в массиве объектов свойства cartColumns переданного как объект в simpleCart() (см. «Листинг 1.2»). Данный div с данным классом просто напросто отрисовывает таблицу, если мы задали табличное представление заказов или же блочное по умолчанию, в данном случае табличное:

<div class="simpleCart_items"></div>

Чтобы очистить все товары в корзине, можно применить метод empty(), для этого создаем ссылку — «Очистить корзину» например, добавляем ей класс, например «clearbasket_link» и вешаем обработчик события по клику на эту ссылку в теле которого вызываем метод очистки корзины, в результате у нас очищаются все записи в таблице заказов и кол-во заказанных товаров, и общая сумма заказа становятся равными нулю:

$(".clearbasket_link").click(function(){
  simpleCart.empty();
});


Похожие заметки:

Верстка

Услуги » верстка страниц сайта

Открыть здесь

Скрипт динамической ширины

Скрипт для равномерного распределения блоков по ширине родительского контейнера. В качестве контейнера может выступать любой блок как определенной ширины, так и неопределенной, вплоть до body. Что умеет?

  • Нарезать блоки на одинаковую ширину в зависимости от заданного количества колонок
  • Генерировать нужное количество колонок
  • Проставлять clearfix после оканчивающей ряд колонки, чтобы вовремя отменить обтекание
  • Удалять лишние clearfix

Открыть здесь

Удобная разработка с livereload, установка browser-sync

Livereload — «живая» перезагрузка страниц в браузере, при изменении в файлах проекта. Обычно очень удобно при разработке нового проекта, когда постоянно вносятся и тестируются изменения, особенно если дебажим во многих вкладках и браузерах сразу

Открыть здесь


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии