VPF::Функционал корзины для интернет-магазина

Aliance

Дата 30.5.2014, 16:24 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

Решил написать свою реализацию функционала корзины покупок для абстрактного интернет-магазина.
Реализовано с использование jQuery, завязана на верстке кнопки покупки товара - необходим атрибут data-id с идентификатором товара.
Жду ваших комментариев, надеюсь кому-то данная реализация пригодится.

На данный момент включает в себя:

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

В планах:

сделать удаление товаров из корзины с ее пересчетом
изменение кол-ва уже добавленных товаров из корзины с ее пересчетом
вынести верстку полностью из скрипта
добавить внутренние проверки

Исходный код:

Код


#cart {
    border: 1px solid #ccc;
    width: 200px;
    line-height: 30px;
    vertical-align: middle;
    padding-left: 10px;
}
#cart-info { margin: 20px 5px; }
.fl_l { float: left; }
.fl_r { float: right; }
.items {
    float: left;
    width: 70%;
}
.item {
    display: inline-block;
    margin: 5px 10px;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.item:hover {
    border-color: #000;
}

Код


<div class="fl_r">
    <div id="cart"></div>
    <div id="cart-info"></div>
</div>
<div class="fl_l items">
    <a class="item" data-id="1">Купить товар №1</a>
    <a class="item" data-id="2">Купить товар №2</a>
    <a class="item" data-id="3">Купить товар №3</a>
    <a class="item" data-id="4">Купить товар №4</a>
    <a class="item" data-id="5">Купить товар №5</a>
    <a class="item" data-id="6">Купить товар №6</a>
</div>

Код


function shoppingCart() {}

/**
 * Инициализация корзины:
 * сохранение ссылок на контейнеры,
 * сообщения,
 * коллекция товаров,
 * счетчик общего числа (для быстрого вывода)
 */
shoppingCart.prototype.init = function($cartContainer, $cartInfoContainer, emptyMessage, text) {
    this.cart = $cartContainer;
    this.cartInfo = $cartInfoContainer;
    this.cart.text(this.emptyMessage = emptyMessage);
    this.text = text;
    
    this.itemsCollection = [];
    this.totalItems = 0;
};

/**
 * Вывод данных о товарах в корзине и их общего числа
 *
 * @todo сделать подобие MVC и вынести отсюда верстку
 */
shoppingCart.prototype.render = function() {
    if (this.totalItems) {
        this.cart.html(declensionNumerals(this.totalItems, this.text).replace(/%d/, this.totalItems));
        var html = '<ul>';
        for (var i in this.itemsCollection) if (this.itemsCollection.hasOwnProperty(i)) {
             html += '<li>Товар №' + i + ' в кол-ве ' + this.itemsCollection[i] + ' шт.</li>';
        }
        html += '</ul>';
        this.cartInfo.show().html(html);
    } else {
        this.cart.html(this.emptyMessage);
        this.cartInfo.hide();
    }
};

/**
 * Метод покупки товара: добавляет в коллекцию товаров и инкрементит общее число
 */
shoppingCart.prototype.buy = function($this) {
    var itemId = $this.data('id');
    // TODO: сделать проверку на наличие itemId
    if (typeof this.itemsCollection[itemId] === 'undefined') {
        this.itemsCollection[itemId] = 0;
    }
    this.itemsCollection[itemId] += 1;
    this.totalItems += 1;
    observer('cart.view').publish();
};

// TODO: написать метод удаления товара из корзины

$(function(){
    var cart = new shoppingCart();

    cart.init(
        $('#cart'),
        $('#cart-info'),
        'Корзина пуста',
        ['В корзине %d товар','В корзине %d товара','В корзине %d товаров']
    );
    
    observer('cart.buy').subscribe(cart.buy.bind(cart));
    observer('cart.view').subscribe(cart.render.bind(cart));

    $('.items').on('click', '.item', function() {
        observer('cart.buy').publish( $(this) );
    });
});

/* Склонение числительных */
declensionNumerals = function(count, values) {
    if (typeof values == 'undefined') {
        return;
    }
    var _cases = [2, 0, 1, 1, 1, 2];
    return values[ (count % 100 > 4 && count % 100 < 20) ? 2 : _cases[(count % 10 < 5) ? count % 10 : 5] ];
};

/* Реализация шаблона проектирования "Наблюдатель" */
var topics = [];
var observer = function(id) {
    var topic = id && topics[id];

    if (! topic) {
        var callbacks = $.Callbacks('memory');
        topic = {
            publish     : callbacks.fire,
            subscribe   : callbacks.add,
            unsubscribe : callbacks.remove
        };
        if (id) {
            topics[id] = topic;
        }
    }

    return topic;
};

ДЕМО

Это сообщение отредактировал(а) Aliance - 30.5.2014, 16:25

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 30.5.2014, 17:51 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 2
Всего: 386

Aliance, imho, без серверной реализации практического смысла не очень много. А при наличии серверной поддержки, иметь логику еще и в javascript - получается накладно.

Добавить "полкило гвоздей" или, там, 500 банок варенья пока нельзя?

Неплохо бы еще сохранять комплект товаров из корзины между обновлениями страницы.

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

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

Для игрового интерфейса или еще куда вполне можно и пристроить.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 30.5.2014, 17:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137

Цитата(ksnk @ 30.5.2014, 18:51

)

. А при наличии серверной поддержки, иметь логику еще и в javascript - получается накладно.

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

Мне интересны мысли по поводу подхода реализации обзёрвера в данной задаче.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »