Корзина для интернет-магазина на фронте или Пишем модульный javascript

Однажды пришла мне в голову безумная идея написать серию постов про различные подходы к организации javascript-кода. Такая мысль образовалась, когда по рабочей надобности изучал React.js и возрадовался от некоторых идей, заложенных его авторами. Захотелось потрогать его побольше, а потому как писать хеллоуворды из документации скучно, нужна была какая-то идея. Раз уж я начал вести блог на тему веб-разработки, то почему бы не создать простое, но более-менее внятное приложение с применением различных библиотек и фреймворков? И не только реакта, а любых других, до которых доберется дурной и воспаленный ум. В качестве подопытного приложения я возьму простенький интернет-магазин с каталогом и корзиной. Фишка будет в том, что код и каталога, и корзины будет написан на javascript. Корзина на фронте - не самое удачное решение для реальных проектов, но для небольших сайтов и в качестве изучения подойдет неплохо. Для изучения React понадобится сколько-то времени, поэтому для начала развлеку вас статьей, где опишу процесс создания нашего приложения без использования библиотек и фреймворков, но с использованием яваскрипт-модулей. Главная моя цель - это показать различные подходы к созданию приложений на javascript. С версткой заморачиваться сильно не буду, сверстаю на bootstrap, основной упор сделаю на javascript-код. Манипулировать DOM будем всем знакомым добрым jquery. Также подключим underscore для работы с данными и html-шаблонами. Данные для каталога загрузим из внешнего json-файла, а корзину будем хранить в localStorage. Итак, начнем...

Идея приложения и схема работы.

Итак, интернет-магазин на фронте. Что мы хотим от него? Хотим, чтобы была возможность как минимум вывести каталог товаров, реализовать добавление их в корзину, просматривать оную корзину, менять количество товаров в ней и удалять ошибочно добавленные с пересчетом стоимости заказа. Плюс добавим хранение данных в localStorage, дабы после перезагрузки страницы наша корзина не ушла в небытие.

Обращаю внимание, что это не одностраничное приложение. Мы создадим 2 html-страницы, каталог и корзина, но они будут служить только каркасом с основному коду. Основной код - это все-таки javascript.

Функционал подробнее.

Главное меню - 2 кнопки, каталог и корзина. В меню рядом с надписью "корзина" показывается выбранных количество товаров. Страница index - главная страница магазина, она же каталог. Подгружаем товары их из внешнего json-файла. Товары имеют поля: id, name, price, img. У каждого товара есть кнопка "Добавить в корзину". Список товаров храним в localStorage (id, name, count, price). Корзина - таблица с выбранными товарами. Выводим id и название товара, его количество и сумму. Под таблицей показываем общую сумму всех товаров. При изменении количества товаров и его удалении меняем все связанные данные. Каталог и корзину мы оформим в виде отдельных модулей.

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

Структура файлов

В корне проекта разместим 2 файла: index.html (каталог) и cart.html (корзина). И несколько папок: css, там лежит bootstrap.min.css и main.css - наши стили. Папка data содержит один файл goods.json - наши товары. fonts хранит шрифты от bootstrap-иконок. img - картинки товаров и гифку loading, которую мы будем показывать посетителям сайта, пока грузится каталог и корзина. Папка js разделена на 2 подпапки: vendor и modules. vendor содержит нужные нам библиотеки: jquery и underscore, а modules - модули нашего приложения. Их всего 3: main.js отвечает за инициализацию приложения, catalog - за вывод товаров, cart - за работу корзины.

Небольшое отступление: я намеренно не стал вводить лишнюю логику для нашего проекта. Хорошей практикой считается разработка с подходом MVC, разделение кода на модели, контроллеры и представления и разбиение этих частей на отдельные файлы для наглядности. Можно долго спорить на тему правильности применения такого подхода для абсолютно всех проектов, но в нашем конкретном примере мы отойдем от этого постулата и весь код для управления корзиной разместим в одном файле, а уже внутри него логически отделим работу с данными от разметки.

Приступаем к разработке.

Я не буду расписывать подробно каждую строчку кода, это заняло бы слишком много места и времени. В статье рассмотрим основные моменты, а весь код можно посмотреть в исходниках по ссылке выше. Код с подробными комментариями.
Начинаем.

Создаем разметку.

Создадим в корне нашего проекта файлы index.html и cart.html. Каждый файл - стандартная html5-заготовка. В блоке head подключим шрифт Ubuntu с Google Fonts и 2 css-файла: bootstrap.min.css и наши собственные стили main.css.

        
            

                
Webdevkin. Интернет-магазин. Модульный Javascript
                

                

                    
Каталог
                    
Корзина
                
                

                

                    
                
            
        
    

Из интересного: мы указываем в data-page тега body название страницы и элемент с id="total-cart-count", который будет содержать количество добавленных в корзину товаров. Список товаров каталога будет выводиться в списке id="goods". При загрузке страницы в список поместим нашу гифку loading, чтобы пользователи не скучали, ожидая загрузки каталога.

Разметка для cart.html

        
            

                
Webdevkin. Интернет-магазин. Модульный Javascript
                

                

                    
Каталог
                    
Корзина
                
                

                

                    

                        

                            

                                
Артикул
                                
Название
                                
Цена
                                
Количество
                                
Сумма
                                

                            
                        
                        

                            

                        
                    
                
                
Итого: 0 руб.
                

                Оформить заказ
            
        
    

На заметку: соглашения по html и css-коду.

В верстке я всегда стараюсь не забывать несколько моментов и рекомендую их Вам.
Первое: верстаем всегда на классах и только на классах. Никаких айдишников в css. id нужны для яваскрипт-кода - для быстрого получения доступа к элементу DOM.
И второе: если в js-коде нам нужно обращаться к множеству элементов (много кнопок добавления в корзину), то навешиваем элементам классы с префиксом "js-". И не используем эти "js-ы" в css-коде. Сначала эти соглашения кажутся излишними, но понимание плюсов быстро проходит с ростом проекта. Лучше сразу привыкать к подобному стилю, тем более, что его используют достаточно много разработчиков.

Готовим данные и разметку для каталога

Для начала создадим файл для хранения наших товаров: data/goods.json

        [
            {
                "id": "1",
                "name": "Ноутбук Lenovo",
                "price": "18000",
                "img": "img/cars/notebook_lenovo.jpg"
            },
            {
                "id": "2",
                "name": "Фотокамера Nikon",
                "price": "25000",
                "img": "img/cars/camera_nikon.jpg"
            },
            {
                "id": "3",
                "name": "Apple ipad",
                "price": "35000",
                "img": "img/cars/ipad.jpg"
            },
            {
                "id": "4",
                "name": "Samsung Galaxy",
                "price": "20000",
                "img": "img/cars/phone_galaxy.jpg"
            },
            {
                "id": "5",
                "name": "Телевизор SUPRA",
                "price": "19000",
                "img": "img/cars/tv_supra.jpg"
            }
        ]    
    

UPDATE: написал статью на тему undescrore/lodash шаблонов

Пишем js-модуль каталога

Код файла catalog.js будет очень коротким

        'use strict';
        
        // Модуль каталога
        var catalog = (function($) {
        
            // Инициализация модуля
            function init() {
                _render();
            }
        
            // Рендерим каталог
            function _render() {
                var template = _.template($('#catalog-template').html()),
                    $goods = $('#goods');
        
                $.getJSON('data/goods.json', function(data) {
                    $goods.html(template({goods: data}));
                });
            }
        
            // Экспортируем наружу
            return {
                init: init
            }
            
        })(jQuery);
    

Разберем функцию _render. Сначала мы объявляем переменную template = _.template($('#catalog-template').html()).
_.template - это функция underscore, которая рендерит html-разметку, используя шаблон html и данные для него.
$('#catalog-template').html() - содержимое шаблона, т.е. просто строка. $.getJSON получает данные из внешнего файла и передает наш массив товаров в колбэк. Выражение template({goods: data}) означает, что мы передаем функции template объект с данными и генерируем на их основе html-строку. Эта строка вставляется на страницу при помощи $goods.html(htmlString). Теперь вызов функции catalog.init() - это все, что нужно, чтобы загрузить каталог на страницу index.html

Модуль корзины

Наконец мы приступаем к самой интересной части нашего проекта - к корзине. Наш модуль будет разбит на 3 логические части:

• 1 - логика работы с данными
• 2 - работа с событиями DOM
• 3 - общие функции инициализации и настройки

        'use strict';

        // Модуль корзины
        var cart = (function($) {
        
            var cartData,  // данные корзины - массив объектов
                opts = {}; // настройки модуля
        
            // Инициализация модуля
            function init(options) {
                _initOptions(options);
                // Получение данных
                // Рендер корзины
                _bindHandlers();
            }
        
            // Инициализируем настройки
            function _initOptions(options) {
                // код
            }
        
            // Навешивам события
            function _bindHandlers() {
                // код
            }
        
            // Функции работы с данными
        
            // Функции рендеринга
            
            // Функции-обработчики событий
        
            // Экспортируем наружу
            return {
                init: init,
                // функции работы с данными
            }
        
        })(jQuery);
    

Вероятно, Вы обратили внимание, что я экспортирую наружу не только init, но и все функции, касающиеся обработки данных. Сделано это для того, чтобы облегчить тестирование кода. Каким образом проходят тесты? Есть 2 способа: ручной и unit-тесты. При тестировании руками мы в консоли браузера вызываем функции модуля и сразу же видим результат. Например, вызвав cart.add({id: 1, name: 'notebook', price: 30000, count: 2}), мы в консоли же можем сразу увидеть изменения и убедиться, что данные действительно добавлены (или что-то пошло не так). Мы отделили логику работы с данными от остальных функций и увидели, что так тестировать гораздо веселее, чем тыкать по кнопочкам и проверять содержимое localStorage после каждого клика. Второй способ будет напрашиваться сам собой, когда нам надоест набивать команды в консоли и мы наконец разберемся с unit-тестированием кода. Об этом я напишу в одной из ближайших статей.

UPDATED: Для интересующихся unit-тестированием опубликована статья unit-тесты на фронте или изучаем jasmine.js. В ней рассказывается, как тестировать код на примере нашей корзины с помощью популярной библиотеки jasmine.js.

Пишем функции обработки данных

Всего мы напишем 11 функций:

• 1. updateData - обновляем данные из localStorage, записываем содержимое в переменную cartData
• 2. getData - возвращаем данные
• 3. saveData - сохраняем корзину в localStorage
• 4. clearData - очищаем корзину
• 5. getById - ищем элемент корзины по id товара
• 6. add - добавляем товар в корзину
• 7. remove - удаляем товар из корзины
• 8. changeCount - меняем количество
• 9. getCount - возвращаем число уникальных товаров корзины
• 10. getCountAll - возвращаем число всех товаров корзины
• 11. getSumma - возвращаем общую сумму заказа

Полный код работы с данными

        // Получаем данные
        function updateData() {
            cartData = JSON.parse(localStorage.getItem('cart')) || [];
            return cartData;
        }
    
        // Возвращаем данные
        function getData() {
            return cartData;
        }
    
        // Сохраняем данные в localStorage
        function saveData() {
            localStorage.setItem('cart', JSON.stringify(cartData));
            return cartData;
        }
    
        // Очищаем данные
        function clearData() {
            cartData = [];
            saveData();
            return cartData;
        }
    
        // Поиск объекта в коллекции cartData по id
        function getById(id) {
            return _.findWhere(cartData, {id: id});
        }
    
        // Добавление товара в коллекцию
        function add(item) {
            var oldItem;
            updateData();
            oldItem = getById(item.id);
            if(!oldItem) {
                cartData.push(item);
            } else {
                oldItem.count = oldItem.count + item.count;
            }
            saveData();
            return item;
        }
    
        // Удаление товара из коллекции
        function remove(id) {
            updateData();
            cartData = _.reject(cartData, function(item) {
                return item.id === id;
            });
            saveData();
            return cartData;
        }
    
        // Изменение количества товара в коллекции
        function changeCount(id, delta) {
            var item;
            updateData();
            item = getById(id);
            if(item) {
                item.count = item.count + delta;
                if (item.count < 1) {
                    remove(id);
                }
                saveData();
            }
            return getById(id) || {};
        }
    
        // Возвращаем количество товаров (количество видов товаров в корзине)
        function getCount() {
            return _.size(cartData);
        }
    
        // Возвращаем общее количество товаров 
        function getCountAll() {
            return _.reduce(cartData, function(sum, item) {return sum + item.count}, 0);
        }
    
        // Возвращаем общую сумму
        function getSumma() {
            return _.reduce(cartData, function(sum, item) {return sum + item.count * item.price}, 0);
        }    
    

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

Инициализация настроек. Настройки по умолчанию.

Прежде чем писать функции рендеринга и обработчиков событий, вернемся чуть назад и рассмотрим инициализацию настроек модуля. Функция _initOptions скопирует в переменную opts все настройки, переданные в модуль корзины при его создании.

        // Инициализируем настройки
        function _initOptions(options) {
            var defaultOptions = {
                renderCartOnInit: true,                     // рендерить ли корзину при инициализации
                renderMenuCartOnInit: true,                 // рендерить ли количество товаров в меню при инициализации
                elAddToCart: '.js-add-to-cart',             // селектор для кнопки добавления в корзину
                attrId: 'data-id',                          // дата-атрибут для id товара
                attrName: 'data-name',                      // дата-атрибут для названия товара
                attrPrice: 'data-price',                    // дата-атрибут для цены товара
                attrDelta: 'data-delta',                    // дата-атрибут, показывающий, на сколько нужно изменить количество товара в корзине (-1 и 1)
                elCart: '#cart',                            // селектор для содержимого корзины
                elTotalCartCount: '#total-cart-count',      // селектор для количества товаров в корзине
                elTotalCartSumma: '#total-cart-summa',      // селектор для общей суммы заказа
                elCartItem: '.js-cart-item',                // селектор для отдельного пункта корзины
                elCartCount: '.js-count',                   // селектор для количества отдельного товара
                elCartSumma: '.js-summa',                   // селектор для суммы отдельного товара
                elChangeCount: '.js-change-count',          // селектор для кнопок изменения количества
                elRemoveFromCart: '.js-remove-from-cart',   // селектор для кнопки удаления из корзины
                elOrder: '#order'                           // селектор для кнопки оформления заказа            
            }
            _.defaults(options || {}, defaultOptions);
            opts = _.clone(options);
        }
    

Рендер корзины и html-шаблон

Для начала создадим шаблон для отображения корзины и поместим его в секцию body файла cart.html.

Функции рендеринга.

        // Рендерим корзину
        function renderCart() {
            var template = _.template($('#cart-template').html()),
                data = {
                    goods: cartData
                };
            $(opts.elCart).html(template(data));
            renderTotalCartSumma();
        }
    
        // Рендерим количество товаров в меню
        function renderMenuCart() {
            var countAll = getCountAll();
            $(opts.elTotalCartCount).html(countAll !== 0 ? countAll : '');
        }
    
        // Рендерим общую сумму товаров
        function renderTotalCartSumma() {
            $(opts.elTotalCartSumma).html(getSumma());            
        }
    

Обработчики событий.

Приближаемся к завершению...

Напишем вспомогательную функцию получения элемента корзины по его id. Она пригодится нам при изменении количества и удалении товаров

        // Поиск продукта в корзине по id
        function findCartElemById(id) {
            return $(opts.elCartItem + '[' + opts.attrId + '="'+id+'"]');
        }
    

Всего у нас будет 4 обработчика-клика: добавление в корзину, изменение количества, удаление и оформление заказа. Смотрим:

        // Добавление в корзину
        function _onClickAddBtn() {
            $('body').on('click', opts.elAddToCart, function(e) {
                var $this = $(this);
                add({
                    id: +$this.attr(opts.attrId),
                    name: $this.attr(opts.attrName),
                    price: +$this.attr(opts.attrPrice),
                    count: 1
                });    
                renderMenuCart();
                alert('Товар добавлен в корзину');
            });
        }
    
        // Меняем количество товаров в корзине
        function _onClickChangeCountInCart() {
            $('body').on('click', opts.elChangeCount, function(e) {
                var $this = $(this),
                    id = +$this.attr(opts.attrId),
                    delta = +$this.attr(opts.attrDelta),
                    $cartElem = findCartElemById(id),
                    cartItem = changeCount(id, delta);
                if (cartItem.count) {
                    $cartElem.find(opts.elCartCount).html(cartItem.count);
                    $cartElem.find(opts.elCartSumma).html(cartItem.count * cartItem.price);
                } else {
                    $cartElem.remove();
                }
                renderMenuCart();
                renderTotalCartSumma();
            });
        }
    
        // Удаляем товар из корзины
        function _onClickRemoveFromCart() {
            $('body').on('click', opts.elRemoveFromCart, function(e) {
                if(!confirm('Удалить товар из корзины?')) return false;
                var $this = $(this),
                    id = +$this.attr(opts.attrId),
                    $cartElem = findCartElemById(id);
                remove(id);
                $cartElem.remove();
                renderMenuCart();
                renderTotalCartSumma();
            });
        }
    
        // Оформляем заказ 
        function _onClickOrder() {
            $('body').on('click', opts.elOrder, function(e) {
                // Предоставлю написать код для оформления заказа и отправки данных на сервер самим
                alert('Оформляем заказ :-)');
            });
        }
    

На заметку. Код, касающийся рендеринга и навешивания событий, можно было изрядно уменьшить, применив такой нехитрый трюк. Объединяем код отрисовки корзины, количества и суммы в одну функцию render и вызываем ее после любых манипуляций с корзиной. То есть для любого события схема такая: вызвали нужный метод обработки данных - отрендерили ВСЕ. Тогда мы избавляемся от проверок вроде "а не удалился ли товар из корзины после уменьшения его количества" и вызова нескольких функций рендера вместо одной. Для небольших проектов это оправдано, но когда Ваше приложение будет содержать кучу виджетов, сложную верстку и данные будут поступать не только по клику пользователей, а еще и в режиме онлайн от разных источников, перерисовка всего содержимого страницы негативно скажется на производительности браузера. Поэтому даже в нашем простом случае я выбрал чуть усложненную, но более правильную схему.

Собираем модуль корзины в одно целое

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

        // Навешивам события
        function _bindHandlers() {
            _onClickAddBtn();
            _onClickChangeCountInCart();
            _onClickRemoveFromCart();
            _onClickOrder();
        }
    

        // Инициализация модуля
        function init(options) {
            _initOptions(options);
            updateData();
            if (opts.renderCartOnInit) {
                renderCart();
            }
            if (opts.renderMenuCartOnInit) {
                renderMenuCart();
            }
            _bindHandlers();
        }
    

Полный код корзины

Код всей корзины мы уже рассмотрели в статье, но чтобы уложить это еще раз в голове, вот ссылка на файл cart.js - модуль целиком.

Главный модуль приложения

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

        'use strict';
        
        // Модуль приложения
        var app = (function($) {
        
            var $body = $('body'),
                page = $body.data('page'),
                options = {
                    elAddToCart: '.js-add-to-cart',
                    attrId: 'data-id',
                    attrName: 'data-name',
                    attrPrice: 'data-price',
                    attrDelta: 'data-delta',
                    elCart: '#cart',
                    elTotalCartCount: '#total-cart-count',
                    elTotalCartSumma: '#total-cart-summa',
                    elCartItem: '.js-cart-item',
                    elCartCount: '.js-count',
                    elCartSumma: '.js-summa',
                    elChangeCount: '.js-change-count',
                    elRemoveFromCart: '.js-remove-from-cart',
                    elOrder: '#order'
                },
                optionsCatalog = _.extend({
                    renderCartOnInit: false,
                    renderMenuCartOnInit: true
                }, options),
                optionsCart = _.extend({
                    renderCartOnInit: true,
                    renderMenuCartOnInit: true
                }, options);
        
            function init() {
                if (page === 'catalog') {
                    catalog.init();
                    cart.init(optionsCatalog);
                }
                if (page === 'cart') {
                    cart.init(optionsCart);
                }
            }
            
            return {
                init: init
            }    
        
        })(jQuery);
        
        jQuery(document).ready(app.init);
    

Подводим итоги.

Итак, мы написали небольшое приложение простого интернет-магазина с каталогом и корзиной.

UPDATED: В связи с большой популярностью этой статьи и интересу к теме интернет-магазинов в целом запилена и опубликована статья-продолжение Реализация оформления заказа в интернет-магазине на клиенте и сервере. В ней рассмотрен полный цикл по сбору данных о клиенте, размещении формы заказа, отправки ajax-запроса на сервер, создание таблиц в базе данных и добавление этих самых данных, а также отправка писем с заказом. Как обычно, все с примерами. Исходники обновлены. Отправка заказа интегрирована с каталогом и корзиной, рассмотренными в этой статье. Это выглядит как цельное приложение, готовое к работе.
Еще одно обновление: готова статья про добавление способа доставки в интернет-магазин. Читайте здесь

UPDATED 2: Для тех, кому интересно, как сделать дерево с вложенными категориями для своего интернет-магазина, опубликована статья Строим дерево категорий на js, php и mysql. Там описывается интересная библиотека jstree и как достаточно просто сообразить каталог и на клиенте, и на сервере.

UPDATED 3: Для продолжающих интересоваться интернет-магазинами, начинается серия уроков на тему фильтров и сортировок в каталоге товаров. Точка входа здесь.

UPDATED 4: Еще новости по развитию магазина.
Новая статья Сравнение товаров в интернет-магазине.

Еще раз нужные ссылки:

• Демо приложения
• Скачать исходники
• Документация underscore на русском

Хотя главной целью была демонстрация модульного подхода при разработке на javascript и отделении логики от представления, все же модуль корзины получился вполне себе самодостаточным и независимым. При желании мы можем включать его в другие проекты. У нас есть только 2 зависимости модуля: jquery и underscore. Хотя полагаю, что люди, знакомые с обеими библиотеками, добавляют их практически в любой свой проект.

Многие моменты в нашем приложении достаточно спорны. Нет жесткого разделения логики и представления, эти функции объединены в один модуль. Также шаблоны underscore вшиты прямо в код страницы, что тоже не самая хорошая практика, нужно выносить их в отдельные файлы. Я намеренно не стал слишком усложнять структуру. В статье я рассмотрел пример создания кода с одной стороны достаточно модульного, чтобы его можно было удобно протестировать, поддерживать в дальнейшем или извлечь какие-то идеи для своих будущих приложений, но с другой стороны не настолько сложного, чтобы в нем нужно было слишком долго разбираться. В конце концов для серьезной javascript-разработки создаются библиотеки и фреймворки, и рано или поздно мы все приходим к пониманию, что их нужно знать и изучать. Backbone, Angular, Ember, React, существует их очень много и постоянно появляются новые. И чем больше мы будем изучать и узнавать различные подходы, тем шире будет наш кругозор и больше возможностей выбора.

Все об интернет-магазинах

• Демо интернет-магазина
• Корзина интернет-магазина. С чего все началось
• Оформляем заказ на клиенте и сервере
• Добавляем доставку
• Фильтры и сортировки на клиенте и сервере
• Урок 0. Вводный
• Урок 1. Структура базы данных
• Урок 2. Структура проекта и верстка
• Урок 3. Сбор данных на клиенте и отправка на сервер
• Урок 4. Пишем базовый php-код и sql-запросы
• Урок 5. Прием данных с сервера и рендеринг на клиенте
• Урок 6. Заключительный, дорабатываем некоторые штрихи
• Сравнение товаров
• Постраничная навигация по товарам
• Преобразуем каталог, переключаем внешний вид товаров одной кнопкой
• Отправка sms при оформлении заказа
• Админка интернет-магазина на vue.js - серия уроков
• Авторизация на сессиях. Делаем логин в админке
• Docker для начинающих. Докеризуем интернет-магазин