Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Функционал корзины для интернет-магазина 
:(
    Опции темы
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
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 30.5.2014, 17:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



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

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

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

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

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aliance
Дата 30.5.2014, 17:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



Цитата(ksnk @  30.5.2014,  18:51 Найти цитируемый пост)
. А при наличии серверной поддержки, иметь логику еще и в javascript - получается накладно.

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

Мне интересны мысли по поводу подхода реализации обзёрвера в данной задаче.
PM MAIL WWW ICQ Skype   Вверх
Google
  Дата 20.9.2017, 10:30 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.0859 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.