Корзина на JS без головной боли

Простая корзина покупок на javascript, которую можно настроить за считанные минуты. Она легкая, быстрая, простая в использовании и полностью настраиваемая.

Зависит от: jQuery

Код: https://github.com/getwebspace/simplecart
Демо:  https://getwebspace.github.io/simplecart/


Быстрый старт!

Для начала просто добавьте конфигурацию и файл javascript на свою страницу:

<body>
    <script>
        window.catalog = {
            cart: {
                columns: [
                    {label: 'Title', attr: 'title', view: null, class: null, style: 'text-align: center;'},
                    {label: 'Code', attr: 'vendorcode', view: null, class: null, style: 'text-align: center;'},
                    {label: '-', attr: 'decrement', view: null, class: null, style: 'width: 10%; text-align: center;'},
                    {label: 'Quantity', attr: 'quantity', view: null, class: null, style: 'width: 15%;'},
                    {label: '+', attr: 'increment', view: null, class: null, style: 'width: 10%; text-align: center;'},
                    {label: 'Cost', attr: 'price', view: null, class: null, style: 'text-align: center;'},
                    {label: 'Total', attr: 'total', view: null, class: null, style: 'text-align: center;'},
                    {label: 'Remove', attr: 'remove', view: null, class: null, style: 'text-align: center;'},
                ],
            }
        }
    </script>
    <script src="simplecart.js"></script>
</body>

Опции колонки: title, url, thumb, decrement, increment, quantity, price, total, remove


Другие опции

window.catalog = {
    cart: { 
        // показывает заголовок
        columns_header: true,
        
        // отображение заголовка группы товаров
        group_header: true,
        
        // table style ('table' or 'div')
        style: 'table',
        
        // класс таблицы
        class: {
            table: 'table',
            container: 'cart-container',
        },
        
        // URL обработчика корзины
        url: '',
    },
    
}


Если вы хотите изменить параметры, например точность или валюту, вы также можете это сделать:

window.catalog = {
    cart: { /* ... */ },
    
    precision: {
        count: 0, // в количествах
        price: 2, // в суммах
    },
    currency: {
        position: 'after', // или 'before'
        symbol: '$',
    },
}


Товар на витрине

Чтобы продавать товары, вы должны добавить их на свою «витрину», просто добавляя несколько атрибутов в свой html:

<!-- Shelf item -->
<div class="col-xl-3 col-sm-6 mb-5 mx-auto" data-catalog-item>
    <div class="card text-center" data-catalog-item-attr="uuid" data-catalog-item-attr-value="3">
        <div class="card-body">
            <h5>Item</h5>
            <h4 class="card-title"><strong><a href="" data-catalog-item-attr="title">Product 3</a></strong></h4>
        </div>
        <div class="card-footer text-muted">
            <span class="float-left p-1" data-catalog-item-attr="price">64$</span>
            <span class="float-right">
                <button class="btn btn-sm btn-link" type="button" data-catalog-item-add>In cart</button>
            </span>
        </div>
    </div>
</div>
<!-- End -->


Задайте свое имя для атрибутов

window.catalog = {
    cart: { /* ... */ },
    
    /* ... */

    selectors: {
        'item': 'data-catalog-item', // item (e.g. товар или услуга)
        'item-attr': 'data-catalog-item-attr', // аттрибут товара (price, color, etc)
        'item-attr-value': 'data-catalog-item-attr-value', // значение атрибута
        'item-add': 'data-catalog-item-add', // кнопка "добавить в корзину"
        'cart': 'data-catalog-cart', // место расположение корзины
        'cart-data': 'data-catalog-cart-data', // данные клиента в корзине (имя, телефон, email, адрес ..)
        'cart-checkout': 'data-catalog-cart-checkout', // кнопка "отправить заказ"
        'count-items': 'data-catalog-cart-count', // счетчик товаров в корзинре
        'count-total': 'data-catalog-cart-total', // счетчик суммы корзины
    },
}


Атрибуты элемента витрины

Вы можете использовать почти любой тип тега html и устанавливать любые значения для нужного элемента, добавляя атрибуты:

<div style="display: none;">
    <span data-catalog-item-attr="uuid"  data-catalog-item-attr-value="3">3</span>
    <span data-catalog-item-attr="title">Product 3</span>
    <span data-catalog-item-attr="vendorcode">303.449.11</span>
    <span data-catalog-item-attr="price">64.00</span>
</div>

Для атрибутов продукта, которые мы предоставили заранее (при необходимости, вы можете расширить их), используйте поле uuid в качестве идентификатора продукта:

{
    "uuid": "",
    "url": "", // ссылка товара
    "thumb": "", // ссылка картинки
    "title": "",
    "price": 0,
    "vendorcode": "",
    "group": "", // используйте для группировки
    "quantity": 1, // может быть задано в input
    "quantity_step": 1 // если продукт "жидкость" (или "вес") можно задать 0.1 как 100мл (или 100г)
}


Место корзины

Поместите атрибут на свое место:

<div data-catalog-cart></div>


Поле клиента

<div class="col-md-6 mb-4">
    <label for="firstName">First name (*)</label>
    <input type="text" id="firstName" name="firstName" class="form-control" data-catalog-cart-data required>
</div>
<div class="col-md-6 mb-2">
    <label for="lastName">Last name (*)</label>
    <input type="text" id="lastName" name="lastName" class="form-control" data-catalog-cart-data required>
</div>


Кнопка оплаты корзины

<button class="btn btn-primary" data-catalog-cart-checkout type="button">
    Place order
</button>


События JS

Вы можете определить функции событий:

window.catalog = {
    /* ... */

    events: {
        'on:ready': function (data, cart) { /* ... */ },
        'on:cart': null,
        'on:cart:add': null,
        'on:cart:update': null,
        'on:cart:remove': null,
        'on:cart:remove:all': null,
        'on:cart:checkout:before': null,
        'on:cart:checkout:after': null,
    }
}

или jQuery:

$(window).on('event:catalog:ready', (data, cart) => { /* ... */ });

Счетчики корзины

<div class="col-lg-8 mx-auto">
    В корзине <span data-catalog-cart-count>0</span> items
    на сумму <span data-catalog-cart-total>0</span>
</div>


API

// добавить товар через jQuery
window.catalog.cartAddItemFromJQuery($('[data-catalog-item]'));

// добавить товар через аттрибуты
window.catalog.cartAddItem({ /* ... */ });

// найти товар по значению поля
window.catalog.cartFindItemByField(value, field = 'uuid');
// найдет где title = 'Product 3'
// window.catalog.cartFindItemByField('Product 3', 'title');

// инкремент количества
window.catalog.cartItemIncrement(value, field = 'uuid');

// декремент количества
window.catalog.cartItemDecrement(value, field = 'uuid');

// задать количество
window.catalog.cartItemChangeCount(count, value, field = 'uuid');

// удалить товар из корзины
window.catalog.cartRemoveItemByField(value, field = 'uuid');

// очистить корзину
window.catalog.cartRemoveAll();

// получить количество товаров
window.catalog.cartCount();

// получить количество сумму
window.catalog.cartTotal();

// отправить корзину
window.catalog.cartCheckout($('[data-catalog-cart-data]'));