Html страница с поиском и корзиной. Создаем корзину покупателя на чистом JavaScript и Local Storage. Предварительный просмотр скринкастов

Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на него установить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт сразу на движке, в состав которого входят модули электронной коммерции. Однако, это не всегда оптимальных подход - рассмотрим несколько вариантов:

Нам нужен лендинг. По-сути это одностраничный сайт, состоящий исключительно из сверстанного в формате HTML макета. Нужен ли такому сайту движок, который обеспечивал бы формирование контента и управление им - больше чем в половине случаев нет, не нужен. Это неэффективное вложение средств и времени. Гораздо проще использовать как раз методы реализации корзины через готовые виджеты.

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

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

Wicart - готовый скрипт весьма привлекательной корзины для покупок для сайта интернет-магазина. Очень полезное решение. Нам не нужно самим придумывать код корзины для покупок для нашего сайта: нужно просто «подключить» к нему уже существующую - и все будет работать: на нашем сайте появится готовая корзина для покупок: покупатель сможет «перетаскивать» туда товары и там же совершать оплату.

Как она выглядит:

Преимущества.

Нет PHP: только HTML и Javascript
Скрипт корзины для покупок написан только на языке Javascript (библиотека jOquery + технологии AJAX). Что это значит для рядового пользователя? А то, что корзина для покупок на сайте работает очень быстро, не требует перезагрузки сайта и не притормаживает по пустякам. Корзина для покупок на сайте интерактивна, и в то же время предельно быстра. Это несомненный плюс для покупателя.

Wicart очень легко подключается к сайту. Понятно, что скрипт корзины для покупок к сайту еще нужно подключить - нужно ручками вставить нужные кусочки кода в нужные места на сайте. Но с этим у вас не возникнет никаких проблем. Разработчики уже обо всем позаботились за вас. В инструкции к использованию указаны куски кода данной программы (скрипта), и указаны места на сайте, куда их нужно вставить. С этим справится любой, даже самый начинающий веб-мастер.

Вебмастеру не нужно самому ничего дописывать. Скрипт закончен и готов к использованию. Нужно просто вставить указанные кусочки кода в нужные места на сайте - и корзина заработает.

Подключение файлов

Открываем HTML страницу нашего сайта в текстовом редакторе, это может быть блокнот, который поставляется вместе с ОС Windows.
В начале файла должен находиться блок:

< head>

Именно сюда нужно вставить необходимые файлы из архива.

1) CSS файл
Данный файл отвечает за внешний вид нашей корзины. В нашем случае сам файл лежит в папке css, вы можете настроить любую другую папку.

2) JQuery
Для работы корзины нам понадобится библиотека JQuery . Вы можете загрузить ее с сайта, либо воспользоваться CDN

< script src= "http://code.jquery.com/jquery-1.11.0.min.js" type= "text/javascript" >

3) Скрипт корзины

< script src= "js/wicart.js" type= "text/javascript" >

*Нужно обратить внимание, что скрипт работает в кодировке UTF-8, если ваш сайт имеет отличную кодировку для скриптов, нужно явно указать нужную нам кодировку

Минимальная конфигурация имеет следующий вид:

Прайс-лист:

< script>
var priceList = {
"001" : { "id" : "001" , "subid" : { } , "name" : "IPhone 5" , "price" : "20500" } ,
"002" : { "id" : "002" , "subid" : { } , "name" : "IPad MINI" , "price" : "10500" }
} ;

< 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 ) ;

Переменная cart должна быть глобальной, к ней в последствии идет обращение.
basketwidjet это контейнер нашей корзины.

2) Виджет корзины (блок, куда попадает товар после покупки)

< div>
< span> Корзина:
< a href= "#" onclick= "cart.clearBasket()" style= "float: right;" > Очистить
< a href= "#" id= "basketwidjet" onclick= "cart.showWinow("bcontainer", 1)" > < span style= "font: normal 11px Arial" >

3 ) Форма заказа
< div id= "order" class = "popup" >
< a href= "#" onclick= "cart.closeWindow("order", 0)" style= "float:right" >< img src= "img/close.png" />
< h4> Введите ваши контактные данные
< p>< form id= "formToSend" >
< input id= "fio" type= "text" placeholder= "Ваши фамилия и имя" class = "" />
< input id= "city" type= "text" placeholder= "Город" class = "" />
< input id= "phone" type= "text" placeholder= "Контактный телефон" class = "" />
< input id= "email" type= "text" placeholder= "Электронная почта" class = "" />

< button onclick= "cart.sendOrder("formToSend,overflw,bsum");" href= "#" > Отправить заказ

4) Кнопка покупки

< button id= "wicartbutton_001" onclick= "cart.addToCart(this, "001", priceList["001"])" > Купить

Недостатки.

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

В бесплатной и стандартной версии продукта вам недоступна помощь разработчиков в установке корзины на ваш сайт. Впрочем, установка вовсе не сложна. А персональная версия (где помощь разработчиков доступна) - недорога: всего 1200 рублей. При покупке персональной версии разработчики сами же установят корзину для покупок на ваш сайт.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

Которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик "jqCart ", но хочу сразу подчеркнуть несколько моментов:

Итак, для работы плагина требуется библиотека jQuery >= 1.8, которая должна быть подключена до подключения самого плагина. Работать должно во всех современных браузера и, по идее, даже в IE8. Проблема для старых "осликов", может заключаться только в применяемых CSS-свойствах и версии jQuery (напомню, что jQuery 2.x - не поддерживает Internet Explorer 6, 7, и 8 ). Данные передаются на сервер с помощью Ajax и поэтому, я крайне рекомендую использовать кодировку для файлов UTF-8 без BOM !

Подключение:

Использование:

$(function() { "use strict"; // инициализация плагина $.jqCart({ buttons: ".add_item", // селектор кнопок, аля "Добавить в корзину" handler: "/php/handler.php", // путь к обработчику visibleLabel: false, // показывать/скрывать ярлык при пустой корзине (по умолчанию: false) openByAdding: false, // автоматически открывать корзину при добавлении товара (по умолчанию: false) currency: "€", // валюта: строковое значение, мнемоники (по умолчанию "$") cartLabel: ".label-place" /* селектор элемента, где будет размещен ярлык, он же - "кнопка" для открытия корзины */ }); // дополнительные методы $.jqCart("openCart"); // открыть корзину $.jqCart("clearCart"); // очистить корзину });

В кнопках ("Добавить в корзину" ), должены быть прописаны следующие data-атрибуты:

Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после "data-", т.е. значение атрибута "data-somevalue", будет в массиве под ключем "somevalue" Тег для кнопки и её расположение на странице - значения не имеет.

Добавить в корзину

В архиве найдете пример обработчика (handler.php ) с подготовкой и отправкой письма на почту. В конце обработчика, обязательно должен быть ответ клиенту в формате JSON.