Wicart — это простой и доступный скрипт корзины покупок для создания простого интернет-магазина. Скрипт использует только возможности вашего браузера и не использует серверную часть кроме необходимого минимума.

Все данные хранятся в localStorage браузера. Cookie слишком малы для больших объемов данных. localStorage поддерживает хранение до нескольких Мб данных ( в зависимости от браузера ).

Используя возможности JQuery библиотеки, подключение корзины упрощает установку скрипта.

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

vitrine

basket

contact

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

Минимум кода для старта вашего интернет-магазина: только HTML и JavaScript (JQuery)
Функционал достаточно широк:

  • Опциональная покупка (выбор свойств и параметров товара)
  • Валидация формы
  • Расширенная форма обратной связи.

Проект активно развивается, дорабатывается.

Возможна доработка и интеграция скрипта силами специалистов.

 

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

В заголовок страницы нужно установить ссылки на файлы, всего их - 3:

<head>
...
</head>

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

1) CSS файл

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

<link href="css/wicart.css" type="text/css" rel="stylesheet">

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>

 

 

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

Прайс-лист:

<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="#" onclick="cart.clearBasket()" style="float: right;">Очистить</a>
<a href="#" id="basketwidjet" onclick="cart.showWinow('bcontainer', 1)"></a>
</div>

3) Форма заказа

<div id="order" class="popup">
<a href="#" onclick="cart.closeWindow('order', 0)" style="float:right"><img src="img/close.png" /></a>
<h4>Введите ваши контактные данные</h4>
<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="" />
</form>
<button onclick="cart.sendOrder('formToSend,overflw,bsum');" href="#">Отправить заказ</button>
</div>

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

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

 

Недостатки.
Скрипт не рассчитан на серьезный интернет магазин, т.к не использует баз данных со всеми вытекающими минусами: нет истории заказов, мониторинга и статистики покупателей.

Тем не менее, если озадачится, то можно подключить корзину к сайту с поддержкой БД, сделав полноценный интернет-магазин.

Сайт разработчика: www.wicart.ru

(Visited 2 501 times, 1 visits today)