Как сделать корзину на HTML сайте
Создание HTML сайта с корзиной
Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на него установить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт на движке, в состав которого входят модули электронной коммерции. Однако, это не всегда оптимальных подход — рассмотрим несколько вариантов:
Нам нужен лендинг. По-сути это одностраничный сайт, состоящий исключительно из сверстанного в формате HTML макета. Нужен ли такому сайту движок, который обеспечивал бы формирование контента и управление им — больше чем в половине случаев нет, не нужен. Это неэффективное вложение средств и времени. Гораздо проще использовать как раз методы реализации корзины через готовые виджеты.
Другой вариант HTML-сайта — это сайты, созданные в визуальных редакторах и загруженные на сервер в виде готовых страниц, например Adobe Muse или Mobirise. Если вы изначально задумались о создании сайта таким образом, а корзина товаров вам нужна исключительно для возможности заказа одного единственного вида продукции — совершенно ни к чему внедрять на сайт систему управления (разве что на будущее). И тут вполне можно решить вопрос с корзиной товаров в виде готового виджета.
В итоге: установить корзину на HTML-сайт возможно. Да, она будет сделана не так, как это обычно делается, но от этого её функции не потеряются. В некоторых случаях изначальный выбор в пользу HTML-сайта + готовая корзина товаров имеет более оптимальный вариант. Такое решение не является худшим — это просто альтернатива, сейчас многие сервисы работают по аналогичному принципу с самого начала и это является нормой, например, консультанты на сайтах, сервисы по предложению обратного звонка, сборщики почты для рассылок и т.д. Все они не реализуются средствами движка и не выполняются на серверах, а точно также встраиваются на сайты как виджеты, в том числе и на чистом HTML.
Wicart — скрипт корзины для покупок
Wicart — готовый скрипт весьма привлекательной корзины для покупок для сайта интернет-магазина. Очень полезное решение. Нам не нужно самим придумывать код корзины для покупок для нашего сайта: нужно просто «подключить» к нему уже существующую — и все будет работать: на нашем сайте появится готовая корзина для покупок: покупатель сможет «перетаскивать» туда товары и там же совершать оплату.
Как она выглядит:
Преимущества.
Нет PHP: только HTML и Javascript
Скрипт корзины для покупок написан только на языке Javascript (библиотека jOquery + технологии AJAX). Что это значит для рядового пользователя? А то, что корзина для покупок на сайте работает очень быстро, не требует перезагрузки сайта и не притормаживает по пустякам. Корзина для покупок на сайте интерактивна, и в то же время предельно быстра. Это несомненный плюс для покупателя.
Wicart очень легко подключается к сайту. Понятно, что скрипт корзины для покупок к сайту еще нужно подключить — нужно ручками вставить нужные кусочки кода в нужные места на сайте. Но с этим у вас не возникнет никаких проблем. Разработчики уже обо всем позаботились за вас. В инструкции к использованию указаны куски кода данной программы (скрипта), и указаны места на сайте, куда их нужно вставить. С этим справится любой, даже самый начинающий веб-мастер.
Вебмастеру не нужно самому ничего дописывать. Скрипт закончен и готов к использованию. Нужно просто вставить указанные кусочки кода в нужные места на сайте — и корзина заработает.
Подключение файлов
Открываем HTML страницу нашего сайта в текстовом редакторе, это может быть блокнот, который поставляется вместе с ОС Windows.
В начале файла должен находиться блок:
Именно сюда нужно вставить необходимые файлы из архива.
1) CSS файл
Данный файл отвечает за внешний вид нашей корзины. В нашем случае сам файл лежит в папке css, вы можете настроить любую другую папку.
2) JQuery
Для работы корзины нам понадобится библиотека JQuery. Вы можете загрузить ее с сайта, либо воспользоваться CDN
<script src=»http://code.jquery.com/jquery-1.11.0.min.js» type=»text/javascript» ></script>
3) Скрипт корзины
<script src=»js/wicart.js» type=»text/javascript» ></script>
*Нужно обратить внимание, что скрипт работает в кодировке UTF-8, если ваш сайт имеет отличную кодировку для скриптов, нужно явно указать нужную нам кодировку
<script src=»/…js» charset=»UTF-8″></script>
Минимальная конфигурация имеет следующий вид:
Прайс-лист:
var priceList = {
«001» : {«id» : «001», «subid» : {}, «name» : «IPhone 5», «price» : «20500»},
«002» : {«id» : «002», «subid» : {}, «name» : «IPad MINI», «price» : «10500»}
</script>
<script>
var cart;
var config;
var wiNumInputPrefID;
$(document).ready(function(){
cart = new WICard(«cart»);
cart.init(«basketwidjet», config);
});
document.addEventListener(‘visibilitychange’, function(e) {
cart.init(«basketwidjet», config);
}, false);
</script>
Переменная cart должна быть глобальной, к ней в последствии идет обращение.
basketwidjet это контейнер нашей корзины.
2) Виджет корзины (блок, куда попадает товар после покупки)
<div>
<span>Корзина: </span>
<a href=»#»>Очистить</a>
<a href=»#»></a> <span></span>
</div>
3) Форма заказа
<div>
<a href=»#»><img src=»img/close.png» /></a>
<h5>Введите ваши контактные данные</h5></p>
<p><form>
<input type=»text» placeholder=»Ваши фамилия и имя» />
<input type=»text» placeholder=»Контактный телефон&q
Виджет корзины на сайт
Виджет для сайта — это готовый для использования функционал, который можно добавить на свой сайт для решения различных задач. По своим функциям виджеты для сайта могут быть совершенно различными и не обязательно ограничиваться визуальным отображением информации. Вы будете удивлены, но даже не зная ничего о виждетах скорее всего вы их активно используете — самым распространенным виджетом является код счетчика от Яндекс.Метрики или Гугла. Возможно, вы когда-то слышали или пользовались сервисами с онлайн-консультантами или заказом обратного звонка — это тоже виджеты.
Добавьте код корзины в HTML-код тестовой страницы вашего сайта:<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script defer src="//lk.easynetshop.ru/frontend/v5/test.js"></script> <link href="//lk.easynetshop.ru/frontend/v5/default.css" rel="stylesheet">
<a data-rel="4a9f99dc105">Купить</a>Внимание. Это тестовый пример. Персональный код с возможностью управления товарами, настройками и интеграцией вы сможете получить в личном кабинете
Виджет корзина для сайта
Мы разработали для вас функционал, позволяющий добавить на ваш сайт корзину, в которую покупатели смогут добавлять товары и отправляет сообщение на ваш почтовый адрес. Это простой и очень полезный виджет, который устанавливается подключением всего 3 строк предоставленного кода и если у вас есть опыт установки на сайт, например, кода счетчика — вы без труда сможете установить и виджет корзины.
Что умеет делать виджет корзины:
- Хранить товары и цены для формирования списка заказа в системе управления виджетом
- Добавлять товары в корзину при нажатии на установленную кнопку добавления товара
- Изменять количество каждого добавленного в корзину товара или удалять его из корзины
- Рассчитывать окончательную сумму заказа
- Производить онлайн-оплату практически в любой платежной системе
- Отправлять информацию о заказе на почту менеджеру сайта и клиенту
- Отправлять SMS-сообщения о поступлении заказа с сайта
- Рассчитывать стоимость доставки товаров по вашим правилам
- Рассчитывать скидки на заказ по вашим правилам
- Добавлять в сообщение о заказе произвольное количество дополнительной информации от покупателя (полей для заполнения) с возможностью установки обязательного или необязательного статуса каждого из них
- Нумеровать заказы, чтобы проще было находить нужный и проводить оплату по нему.
- Управлять статусами заказов, информировать покупателя об их изменении и вести учет во встроенной CRM-системе (видеть статистику продаж, делать выборку заказов, вносить отметки в заказы, производить поиск по ключевым словам)
Виджет корзины на сайт с минимальным, но эффективным набором функции предоставляется бесплатно. Использование бесплатного виджета не ограничено по времени и при завершении срока действия бесплатного периода автоматически продлевается на следующий.
Как установить виджет корзины на сайте
При регистрации в системе управления (личном кабинете) вы получаете инструкцию по установке виджета на сайте. В этой инструкции 2 основные части:
- добавление самой корзины — при добавлении виджета на сайт появляется кнопка, открывающая список товаров, которые были добавлены в корзину. Здесь происходит расчет стоимости и оформление заказа.
- размещение активных кнопок — при нажатии на эти кнопки происходит добавление товара в корзину.
При установке виджета на сайте вы можете менять внешнее оформление и создавать собственный стиль как для диалоговых окон, так и для кнопок добавления товаров и вызова корзины. Вы можете размещать кнопку купить в любом месте страницы и придавать ей любой внешний вид — это может быть и текст и целый блок, и кнопка, и даже картинка. Главное чтобы в ней был указан идентификатор товара, который будет добавляться в корзину при нажатии на неё.
Как работает виджет корзины
- Шаг 1: Добавление товара в корзину.
При нажатии на кнопки добавления товаров происходит передача кода товара и в корзине появляется товар с таким кодом. Информация обо всех добавленных в корзину товарах сохраняется в сессии и если посетитель закроет браузер и вернется на сайт через некоторое время — товары по-прежнему будут в корзине. - Шаг 2: Переход к оформлению заказа. Кроме списка товаров с их количеством в форме заказа будут видны поля, которые вы установите в настройках виджета. В эти дополнительные поля можно просить покупателя вводить сведения, необходимые для оформления (телефон, имя, адрес и т.п.). У полей можно устанавливать признак (обязательное или необязательное).
- Шаг 3. Отправка заказа. Если покупатель заполнил все обязательные поля и отправил заказ — он попадает на финальное окно, в котором ему отображается статус успешного оформления заказа (номер заказа, форма для онлайн-оплаты и дополнительная информация о дальнейших действиях. При этом корзина очищается.
- Шаг 4. Получение заказа. Отправленный заказ приходит на почту, указанную в настройках виджета и покупателю (для подтверждения).
Благодаря тому, что виджеты работают вне зависимости от системы управления сайтом — его можно добавить на любой сайт прямо в html код. Особенно актуально использовать функционал корзины как виджет для сайтов на html, поскольку это не потребует реализацию заказов с сайта иными способами, которых на html-сайте нет.
Также можно использовать этот виджет для adobe muse — конструктора сайта в виде программы на локальном компьютере.
Виджет корзины прост в настройке и весьма эффективен с точки зрения увеличения продаж. Используя такой виждет ваши покупатели смогут перейти к процессу покупки в любой момент времени, будучи на любой странице сайта, на которой отображается этот виджет. Он упрощает ввод данных и отлично работает на мобильных устройствах. Постоянно напоминает посетителю о том, что товар выбран и ждет оформления. А возможность настроить онлайн-оплату эффективно сокращает число заказов, оставленных без оплаты после оформления. Увеличение продаж также происходит за счет эффективной работы виджета с поисковыми системами, которым он передает информацию о том, что на сайте где установлен ведется активная коммерческая деятельность (сведения по электронной коммерции)
Easy Basket. Корзина покупок для вашего сайта
Отличная корзина для сайта, на каком бы движке ваш сайт не работал… совсем недавно мне довелось услышать печальную историю одного питерского предпринимателя, которому некое питерское же (не буду называть) интернет-агентство всучило (не подберу иного слова) сайт на Битриксе, забыв снабдить этот самый Битрикс корзиной. Ну и вот; Битрикс я вам в любом случае не посоветую, это что-то из разряда «да здравствуют наши советские микросхемы, самые большие в мире»… а Easy Basket — да, вполне могу рекомендовать.
Тем более — Easybasket бесплатен. Разработчик просит лишь разместить в футере линк на свой сайт — но никто вас не заставляет этого делать. Впрочем, почему бы и не сделать? — вам ведь не нужно, чтобы все думали, что именно вы автор данного скрипта, нет?
Easy Basket — Free AJAX Shopping Cart
Кстати, пройдя по ссылке, вы увидите еще одну довольно эффектную демку; разработчик предоставляет несколько скинов для новой корзины вашего интернет-магазина, и вы можете редактировать их как вам угодно. Кроме того, на сайте проекта вы увидите подробно документированное API, которое поможет вам в работе.
Собственно, все очень несложно. Приведенный на форуме HTML-код, реализующий работу данной демки — совсем, как видите, прост: скрипты вполне можно (и нужно) засунуть в head, далее вы видите два дива — это, соответственно, товары в лице кота и собачки, еще далее — еще два дива — две корзины. Одна совсем простенькая, вторая отображает сумму покупок более развернуто (и это далеко не все возможные варианты оформления). Оплатить покупки возможно посредством Google Checkout или Paypal.
Не так уж плохо, правда? Когда надоест вездесущий VirtueMart — попробуйте. Кстати, никакой базы данных Easy Basket не требует.
——
Кстати, для тех, кто пожелает заказать интернет-магазин на нашем портале — действуют поистине уникальные дисконтные предложения.
Форма заказа для сайта (html, готовая)
Преимущество формы заказа EasyNetShop
Наша форма заказа выполнена по технологии корзины товаров для сайта, прежде чем оформить заказ необходимо его собрать. Такая технология имеет ряд преимуществ над традиционной формой, которая выпадает при нажатии на кнопку рядом с товаром и не формирует заказ:
Доступна с любого места сайта.Представьте, пришел к вам на сайт покупатель и попал на страницу с товаром. Достаточно ли ему там информации для заполнения формы заказа и отправки? Нет! Ему бы еще почитать про доставку и оплату, про компанию и про аналоги, про скидки и акции. Он уйдет со страницы, на которой есть форма заказа для конкретного товара и ему придется вспоминать, как назывался тот товар, который ему понравился. Для этого наша форма хранит список добавленных в неё товаров и дает покупателю возможность вернуться к оформлению заказа на любой странице сайта, как только он будет готов.
- Покупка нескольких товаров.
Традиционная форма заказа предназначена для сообщения о единственном товаре к которому привязана или не сообщает о выбранном товаре совсем и покупателю нужно будет вписывать наименование руками. В отличии от неё в нашей форме происходит автоматическое добавление товаров в единую форму заказа. Это не только удобнее покупателю, но и стимулирует его к дополнительным покупкам — увеличивая сумму чека.
- Автоматический расчет.
Обычно форма заказа ничего не считает. Она может только передавать статические данные, заполненные покупателем. А реализованная в виде корзины товара форма заказа может автоматически рассчитывать суммарную стоимость и удалять из заказа ненужные пункты. Это весьма удобно для окончательного формирования заказа на сайте
Доступна с любого места сайта.Ещё несколько позитивных моментов в форме заказа EasyNetShop:
- Постоянно напоминает о незавершенном действии по оформлению заказа.
- Удобно при формировании заказа с мобильных устройств тем, что половина данных (о товаре и количестве) уже автоматически заполнены.
- Позволяет производить расчет не только суммы заказа, но и стоимости доставки, а также скидку.
- Сохраняет данные при повторном возвращении на сайт, если заказ не был завершен.
- Позволяет организовать процесс онлайн-оплаты для сформированного заказа.
Заполненная и отправленная форма заказа остается формальностью и даже если получен обратный ответ о том, что заявка получена. Это не дает 100%ой уверенности покупателю в том, что именно совершена покупка. Не получив ответа и не понимая стоит ли ему его ждать (какое время) — покупатель продолжит поиск товара на других сайтах. Совсем другое дело, если покупатель оформил заказ через корзину товаров и ему пришел тот же самый автоматический ответ о том, что заказ №… оформлен. Это уже не формальность.
Есть определенная ожидаемая модель поведения покупателя на сайте, выработанная типовыми интернет-магазинами и практически любой покупатель будет искать привычную для него кнопку “добавить в корзину”, а затем и саму корзину для завершения заказа. Наличие формы заказа для покупки товара — это уход от типичного поведения покупателя и может вызвать неопределенную реакцию (от сложностей, до ухода с сайта)