Как сделать корзину html css
Как сделать корзину на сайте интернет-магазина и увеличить средний чек
Дата публикации: 2017-02-28
От автора: если вам нужно увеличить средний чек в интернет-магазине, то одно из наиболее простых и логичных решений, которые приходят в голову, — это создание онлайн-корзины для покупателя. С ее помощью человек сможет приобрести не один товар, а сразу несколько за раз. Решение кажется банальным, однако, многие предприниматели до сих пор не пришли к нему. Прочитайте эту статью, если хотите узнать, как сделать корзину на сайте интернет-магазина быстро и правильно.
В любом более-менее крупном обычном магазине посетителю на входе предлагается специальная тара, куда он сможет складывать свои покупки. Еще в ХХ в. это решение было введено для клиентов не только для удобства переноса товаров, но и для стимулирования совершения как можно большего числа покупок. Согласитесь, как-то глупо зайти в магазин, взять корзину и переносить в ней одну маленькую пачку чипсов? Обязательно, так или иначе, добросишь чего-нибудь запить.
Примерно таким же образом действует и корзина в интернет-магазине. Она значительно упрощает процесс приобретения нескольких товарных позиций и увеличивает средний чек. Разумеется, фактор «давления» на покупателя существенно ниже по сравнению с офлайн-точками за счет отсутствия физической необходимости переносить товар и ходить с пустой тарой перед другими людьми, однако, он все же присутствует.
Находитесь на самом старте создания онлайн-проекта? Тогда лучше начните с базовых курсов по разработке интернет-магазина. Уже более-менее знаете толк в этой теме? Тогда переходим непосредственно к созданию веб-корзины для сайта.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Пошаговая инструкция по созданию корзины
Существуют разные версии корзин, однако, мы рассмотрим разработку классического модуля для интернет-магазинов, созданного на базе PHP. Как правило, его размещают на видном месте — в шапке сайта в правом верхнем углу. Маленькая корзина представляет собой своеобразный индикатор, показывающий, сколько товаров, и на какую сумму вы собираетесь приобрести.
Итак, пошаговая инструкция по тому, как создать корзину для интернет-магазина:
1. Откройте файл под названием header.php. Он находится в корневой папке вашего сайта. Далее вставьте в верстку базовые значения нашей будущей корзины:
2. Чтобы корзина обладала простым и гармоничным видом, добавьте в файл style.css следующие стили:
После этого уже можете взглянуть на визуальные изменения во внешнем виде интернет-магазина.
3. Теперь нам с вами нужно углубиться в системную структуру корзины. В связи с тем, что модуль корзины не является отдельной страницей, дополнительный контроллер под нее можно не создавать. Внешний вид уже отображен в шаблоне, поэтому разработку views не делаем. Ограничимся лишь проработкой параметра model.
Для этого зайдите в папку application, а затем в models. После этого создайте файл с названием cart.php. В него добавляете следующее содержание:
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Эта модель позволить обновлять данные, содержащиеся в содержимом модуля корзины. Пока что хватит лишь функции добавления товара, однако, на будущее необходимо разработать специальные интерфейсы, чтобы была возможность удалить определенный товар или же очистить корзину целиком.
Таким образом, мы получили готовую базу Application_Models_Cart. Теперь необходимо ее активировать.
4. Перед этим давайте еще внесем изменения в атрибут href для более правильной работы модуля:
Теперь ссылка будет иметь следующий вид: //примерсайта.ru/catalog?in-cart-product-id=1
При нажатии на эту ссылку система mvc перенаправит руководство в раздел application/controllers/catalog.php. В свою очередь, здесь мы тоже внесем небольшие поправки.
5. Вставьте следующий код для нужного нам сценария:
В принципе, на этом можно остановиться. Основа нашего модуля корзины для интернет-магазина готова. Единственное что — давайте еще отдельно заострим внимание на строке Lib_SmalCart::getInstance()->setCartData(), которая была указана в представленном выше коде. Слабо разбирающиеся в ООП люди явно не поймут, в чем заключается ее основная роль в общей структуре, поэтому давайте разберем каждый отдельный кусочек кода:
Lib_SmalCart — позволяет создать модуль класса SmalCart, который расположен в разделе lib.
getInstance() — с помощью этой команды происходит вызов каждой отдельной функции. Основная ее задача — отсеять повторные попытки образования экземпляра того же класса.
setCartData() — позволяет упорядочить информацию о продуктах из корзины и записать сессию в cookies. В свою очередь, это гарантирует пользователям сохранение данных о заказе даже при случайных переходах на другие сайты или вовсе при закрытии страницы браузера.
Чтобы иметь более четкое представление касательно работы корзины, снова откройте файл в разделе lib под названием smalcart.php. После проделанных ранее операций все основные точки соприкосновения станут уже более понятны и логичны. Стоит отметить, что, если cookies будут отключены, тогда механизм работать должным образом не сможет. Связано это с тем, что передача идентификатора сессии осуществляется как раз-таки благодаря этим cookies.
Кстати, если вы профессионально решили заниматься созданием интернет-магазинов или же сайтов разных направленностей, тогда рекомендуем ознакомиться с этим 30-дневным курсом. В нем содержатся фундаментальные знания по разработке адаптивных онлайн-проектов с целью их дальнейшей монетизации. Если хотите на один или даже несколько уровней повысить свою квалификацию, тогда обязательно изучите приведенный выше курс.
Ну как вам? Материал был полезен, и чтение прошло не зря? Тогда поделитесь статьей со своими друзьями и коллегами в социальных сетях. Быть может, кто-то из них как раз не может найти качественное решение этой проблемы.
Спасибо, что читаете наши статьи. С каждым разом мы стараемся преподнести контент в еще более интересном и полезном ключе. Всего доброго, до новых встреч!
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Корзина для интернет-магазина на фронте или Пишем модульный javascript
Идея приложения и схема работы.
Итак, интернет-магазин на фронте. Что мы хотим от него? Хотим, чтобы была возможность как минимум вывести каталог товаров, реализовать добавление их в корзину, просматривать оную корзину, менять количество товаров в ней и удалять ошибочно добавленные с пересчетом стоимости заказа. Плюс добавим хранение данных в localStorage, дабы после перезагрузки страницы наша корзина не ушла в небытие.
Функционал подробнее.
Можно посмотреть, что у нас в итоге получится, здесь. Попробуйте добавить товары в корзину, перейти в нее, менять количество и удалять товары, и увидите, как задумана работа магазина. Или можете сразу скачать исходники по этой ссылке.
Структура файлов
Небольшое отступление: я намеренно не стал вводить лишнюю логику для нашего проекта. Хорошей практикой считается разработка с подходом MVC, разделение кода на модели, контроллеры и представления и разбиение этих частей на отдельные файлы для наглядности. Можно долго спорить на тему правильности применения такого подхода для абсолютно всех проектов, но в нашем конкретном примере мы отойдем от этого постулата и весь код для управления корзиной разместим в одном файле, а уже внутри него логически отделим работу с данными от разметки.
Приступаем к разработке.
Я не буду расписывать подробно каждую строчку кода, это заняло бы слишком много места и времени. В статье рассмотрим основные моменты, а весь код можно посмотреть в исходниках по ссылке выше. Код с подробными комментариями.
Начинаем.
Создаем разметку.
На заметку: соглашения по html и css-коду.
Готовим данные и разметку для каталога
Для начала создадим файл для хранения наших товаров: data/goods.json Как видим, это обычный json-массив с четырьмя нужными нам полями. Теперь переходим к созданию каталога. Но прежде чем приступить к написанию js-кода, нам придется написать еще немного разметки для отображения отдельного товара. Мы будем использовать шаблоны html-кода библиотеки underscore для динамической генерации отдельных товаров. Если Вы не знакомы с шаблонами underscore, то у меня есть статья на эту тему. Я же не буду зацикливаться на этом, а просто приведу код шаблона, тем более, что он достаточно тривиален и не требует долгих разбирательств: Что происходит в этом коде? underscore-шаблон представляет собой обычную строку, в которую подставляются нужные данные. Это неплохой способ отделить логику и данные от представления. Вся идея шаблонов в том, что мы не знаем, каким образом получены данные, но мы знаем, как их нужно отобразить. В нашем примере мы даем на вход массив товаров goods (из файла goods.json), перебираем все товары в цикле с помощью функции each библиотеки underscore и для каждого товара выводим свою разметку, подставляя в нужные места id товара, название, картинку и цену. Обратите внимание на дата-атрибуты у кнопки «Добавить в корзину», они будут использованы в дальнейшем. Приведенный код мы поместим в тело body файла index.html. Дальше мы увидим, как связать данные и наш underscore-шаблон.
Пишем js-модуль каталога
Код файла catalog.js будет очень коротким Здесь с помощью замыкания мы объявляем переменную-модуль catalog, пишем функцию init, которая вызывает самую интересную нам функцию _render и экспортируем init наружу, разрешая при этом вызывать catalog.init() из других модулей приложения. На самом деле можно обойтись и без лишней init-функции, но лучше всегда объявлять публичную функцию инициализации во всех модулях для единообразия. При этом функция _render начинается со знака _, чем мы показываем, что эта функция частная и не должна выходить за пределы модуля. Применяя такой подход, мы уже в коде модуля видим, что используется в других модулях, а что предназначено только для внутреннего пользования. Этакая инкапсуляция кода, как в ООП.
Модуль корзины
Вероятно, Вы обратили внимание, что я экспортирую наружу не только init, но и все функции, касающиеся обработки данных. Сделано это для того, чтобы облегчить тестирование кода. Каким образом проходят тесты? Есть 2 способа: ручной и unit-тесты. При тестировании руками мы в консоли браузера вызываем функции модуля и сразу же видим результат. Например, вызвав cart.add(
UPDATED: Для интересующихся unit-тестированием опубликована статья unit-тесты на фронте или изучаем jasmine.js. В ней рассказывается, как тестировать код на примере нашей корзины с помощью популярной библиотеки jasmine.js.
Пишем функции обработки данных
Полный код работы с данными
Из интересного отмечу, что каждая функция возвращает какие-то данные: корзину целиком, добавленный товар или общую сумму. Не все возвращаемые данные используются в модуле, но все облегчают тестирование. Также видим, что в localStorage мы храним сериализованный массив товаров. В функции добавление предусмотрено условие: если мы добавляем товар, уже находящийся в корзине, то не создается дубликат товара, а увеличивается количество уже существующего. При уменьшении количества конкретного товара до нуля, оный удаляется из корзины.
Инициализация настроек. Настройки по умолчанию.
Прежде чем писать функции рендеринга и обработчиков событий, вернемся чуть назад и рассмотрим инициализацию настроек модуля. Функция _initOptions скопирует в переменную opts все настройки, переданные в модуль корзины при его создании. Сначала мы объявляем настройки по умолчанию, а затем «склеиваем» их с данными, пришедшими извне. Для небольшого приложения, как у нас, реализовывать возможность настройки модуля было не обязательно. Но это небольшое увеличение кода дает нам большую гибкость при переносе этого модуля в другой проект.
Рендер корзины и html-шаблон
Для начала создадим шаблон для отображения корзины и поместим его в секцию body файла cart.html. Здесь все знакомо по аналогичному фунционалу в каталоге. В дата-атрибуты помещаем id товаров, чтобы было понятно, с какими именно мы сейчас работаем. Атрибут data-delta показывает, увеличивать или уменьшать количество товара при клике на эту кнопку.
Функции рендеринга.
Обработчики событий.
Приближаемся к завершению.
Всего у нас будет 4 обработчика-клика: добавление в корзину, изменение количества, удаление и оформление заказа. Смотрим:
Собираем модуль корзины в одно целое
Основной код уже написан, нам осталось только написать функцию инициализации корзины и привязки обработчиков событий. Пойдем от обратного, обработчики: Думаю, здесь без особых пояснений, собираем в кучу написанные ранее функции. Иницилизация: Почему мы ввели отдельные настройки renderCartOnInit и opts.renderMenuCartOnInit? Просто потому, что на странице каталога нам нужно инициализировать корзину (мы выводим количество добавленных товаров в меню), но не нужно ее рендерить. Чтобы не усложнять логику лишними проверками, мы разделили эти опции.
Полный код корзины
Главный модуль приложения
Подводим итоги.
Итак, мы написали небольшое приложение простого интернет-магазина с каталогом и корзиной.
UPDATED: В связи с большой популярностью этой статьи и интересу к теме интернет-магазинов в целом запилена и опубликована статья-продолжение Реализация оформления заказа в интернет-магазине на клиенте и сервере. В ней рассмотрен полный цикл по сбору данных о клиенте, размещении формы заказа, отправки ajax-запроса на сервер, создание таблиц в базе данных и добавление этих самых данных, а также отправка писем с заказом. Как обычно, все с примерами. Исходники обновлены. Отправка заказа интегрирована с каталогом и корзиной, рассмотренными в этой статье. Это выглядит как цельное приложение, готовое к работе.
Еще одно обновление: готова статья про добавление способа доставки в интернет-магазин. Читайте здесь
UPDATED 2: Для тех, кому интересно, как сделать дерево с вложенными категориями для своего интернет-магазина, опубликована статья Строим дерево категорий на js, php и mysql. Там описывается интересная библиотека jstree и как достаточно просто сообразить каталог и на клиенте, и на сервере.
UPDATED 3: Для продолжающих интересоваться интернет-магазинами, начинается серия уроков на тему фильтров и сортировок в каталоге товаров. Точка входа здесь.
UPDATED 4: Еще новости по развитию магазина.
Новая статья Сравнение товаров в интернет-магазине.
Хотя главной целью была демонстрация модульного подхода при разработке на javascript и отделении логики от представления, все же модуль корзины получился вполне себе самодостаточным и независимым. При желании мы можем включать его в другие проекты. У нас есть только 2 зависимости модуля: jquery и underscore. Хотя полагаю, что люди, знакомые с обеими библиотеками, добавляют их практически в любой свой проект.
Многие моменты в нашем приложении достаточно спорны. Нет жесткого разделения логики и представления, эти функции объединены в один модуль. Также шаблоны underscore вшиты прямо в код страницы, что тоже не самая хорошая практика, нужно выносить их в отдельные файлы. Я намеренно не стал слишком усложнять структуру. В статье я рассмотрел пример создания кода с одной стороны достаточно модульного, чтобы его можно было удобно протестировать, поддерживать в дальнейшем или извлечь какие-то идеи для своих будущих приложений, но с другой стороны не настолько сложного, чтобы в нем нужно было слишком долго разбираться. В конце концов для серьезной javascript-разработки создаются библиотеки и фреймворки, и рано или поздно мы все приходим к пониманию, что их нужно знать и изучать. Backbone, Angular, Ember, React, существует их очень много и постоянно появляются новые. И чем больше мы будем изучать и узнавать различные подходы, тем шире будет наш кругозор и больше возможностей выбора.
Как сделать корзину html css
Wicart — готовый скрипт весьма привлекательной корзины для покупок для сайта интернет-магазина. Очень полезное решение. Нам не нужно самим придумывать код корзины для покупок для нашего сайта: нужно просто «подключить» к нему уже существующую — и все будет работать: на нашем сайте появится готовая корзина для покупок: покупатель сможет «перетаскивать» туда товары и там же совершать оплату.
Преимущества.
Нет PHP: только HTML и Javascript
Скрипт корзины для покупок написан только на языке Javascript (библиотека jOquery + технологии AJAX). Что это значит для рядового пользователя? А то, что корзина для покупок на сайте работает очень быстро, не требует перезагрузки сайта и не притормаживает по пустякам. Корзина для покупок на сайте интерактивна, и в то же время предельно быстра. Это несомненный плюс для покупателя.
Wicart очень легко подключается к сайту. Понятно, что скрипт корзины для покупок к сайту еще нужно подключить — нужно ручками вставить нужные кусочки кода в нужные места на сайте. Но с этим у вас не возникнет никаких проблем. Разработчики уже обо всем позаботились за вас. В инструкции к использованию указаны куски кода данной программы (скрипта), и указаны места на сайте, куда их нужно вставить. С этим справится любой, даже самый начинающий веб-мастер.
Вебмастеру не нужно самому ничего дописывать. Скрипт закончен и готов к использованию. Нужно просто вставить указанные кусочки кода в нужные места на сайте — и корзина заработает.
Подключение файлов
Открываем HTML страницу нашего сайта в текстовом редакторе, это может быть блокнот, который поставляется вместе с ОС Windows.
В начале файла должен находиться блок:
Именно сюда нужно вставить необходимые файлы из архива.
1) CSS файл
Данный файл отвечает за внешний вид нашей корзины. В нашем случае сам файл лежит в папке css, вы можете настроить любую другую папку.
2) JQuery
Для работы корзины нам понадобится библиотека JQuery. Вы можете загрузить ее с сайта, либо воспользоваться CDN
*Нужно обратить внимание, что скрипт работает в кодировке UTF-8, если ваш сайт имеет отличную кодировку для скриптов, нужно явно указать нужную нам кодировку
Минимальная конфигурация имеет следующий вид:
Переменная cart должна быть глобальной, к ней в последствии идет обращение.
basketwidjet это контейнер нашей корзины.
2) Виджет корзины (блок, куда попадает товар после покупки)
Данный скрипт корзины для покупок все еще находится в стадии разработки. И некоторые возможности все еще не реализованы (например, пока что нет возможности отправить на почту покупателю фотографию его покупки и некоторые другие нюансы).
В бесплатной и стандартной версии продукта вам недоступна помощь разработчиков в установке корзины на ваш сайт. Впрочем, установка вовсе не сложна. А персональная версия (где помощь разработчиков доступна) — недорога: всего 1200 рублей. При покупке персональной версии разработчики сами же установят корзину для покупок на ваш сайт.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом