Корзина покупателя на jQuery.

Плагин jqCart.

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

  1. Хоть код и оформлен в виде плагина, но плагином его можно назвать с большой натяжкой. Да и вообще, в этом направлении, на мой взгляд, сделать плагин полностью универсальным - достаточно сложно;
  2. Писа́лся плагин на скорую руку, поэтому достаточно сыроват, хотя и вполне рабочий;
  3. На данный момент, код не документированный;
  4. Планирую ли я его дорабатывать? Да, но при достаточном количестве свободного времени;

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

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

<link href="css/jqcart.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jqcart.min.js"></script>

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

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

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

  1. data-id - ID товара
  2. data-title - Наименование товара
  3. data-price - Цена товара
  4. data-img - URL фото товара (опционально)

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

Пример:

<button class="add_item" data-id="7" data-title="Bugatti Veyron Super Sports" data-price="200" data-img="http://site.com/img/photo.png">Добавить в корзину</button>

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

<?php
// какой-то код обработки заказа...

// Ответ на запрос
// !для версии PHP < 5.4, используйте традиционный синтаксис инициализации массивов array() вместо короткого []
$response = [
    'errors' => !$send_ok,
    'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
exit( json_encode($response) );

Где переменная $send_ok - булевое значение (true/false), в зависимости от результата обработки заказа. Если это будет отправка на почту, то можно так:

<?php
$send_ok = mail($to, $subject, $body, implode("\r\n", $headers));

Ахтунг! В обработчике я не делал фильтрацию данных, поэтому внимательно и тщательно их обрабатывайте перед использованием, а особенно, если вы собираетесь записывать данные в БД!

Версия 1.1.0

  • Данные распределены по разным data-атрибутам кнопки
  • Добавлена возможность отображения фото товара в корзине
  • Добавлен параметр currency для вывода в корзине валюты рядом со стоимостью и ценой
  • Добавлена возможность передавать на сервер дополнительные данные, которые берутся из пользовательских data-атрибутов кнопки

Версия 1.1.1

  • Добавлена опция visibleLabel. Показывать ярлык при пустой корзине
  • Добавлена опция openByAdding. Автоматически открывать корзину при добавлении товара
  • Добавлена кнопка вывода заказа на печать

Версия 1.1.2

  • Исправлен расчет сумм с плавающей точкой

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

Incode Pro logo

807 комментариев

Страница 28 из 33  
Incode 18.05.2016 21:45
и мне помогите суммы доделать
Обновил, скачивайте архив
Гость 18.05.2016 22:29
Обновил, скачивайте архив

не везет мне на мелкие суммы - опять не работает((
Сделайте такую проверку:
1) добавить две позиции 0,6 + 1,2

- пощелкать по количеству первой до 12, потом поставить в 1
- также и со второй позицией, потом поставить в 1

вот где глючит -
4*0,6 + 1*1,2 ; 9*0,6 + 1*1,2 ; 1*0,6 + 4*1,2 ; 1*0,6 + 11*1,2
Incode 18.05.2016 22:43
не везет мне на мелкие суммы - опять не работает((
Перекачайте архив. Похоже, что в предыдущий раз я случайно не то залил.
DSergey 21.05.2016 10:26
Добрый день.
Скиньте пожалуйста не верифицированный файл jqcart.min.js
(кто-то уже просил,но не могу найти ссылку)
И еще одна просьба - можно ли сделать в корзине < Контактную информацию > в виде выпадающего списка?
Спасибо.
Incode 21.05.2016 10:46
Скиньте пожалуйста не верифицированный файл jqcart.min.js

@DSergey, Если вы хотели сказать "не минифицированных" (не сжатый), то он находится в архиве "js > developer".
можно ли сделать в корзине < Контактную информацию > в виде выпадающего списка?
Вот в несжатом файле, вы и сможете сделать все необходимые вам изменения.
DSergey 21.05.2016 11:19
Спасибо.
Гость 17.06.2016 17:36
не могу понять, а где хранятся все данные? куки не используются, а почему?
Incode 24.06.2016 00:34
а где хранятся все данные?
Данные хранятся в localStorage
lerico 09.07.2016 00:24
Отличная статья!

Автору огромное спасибо.

Можно поинтересоваться, как не в модальном окне корзину открывать, а например в файле проекта cart.html, специально сверстанном для корзины, добавляя в его body код, который генерируется в плагине.

Заранее Большое спасибо за совет!
Incode 09.07.2016 02:54
@lerico, вы уже второй человек, который задаёт вопрос в этом направлении, но т.к. сейчас я достаточно сильно загружен работой, то доработать плагин получить чуть позже.
lerico 09.07.2016 12:19
Все отл, немного поспешил с вопросом как обычно. Разобрался. Еще раз БОЛЬШОЕ СПАСИБО за проделанную Вами работу.
Гость 18.09.2016 02:24
Спасибо автору, всё работает великолепно. Есть два непринципиальных вопроса, может кто знает: 1) появление окна с товарами - не разобрался куда можно прикрутить FadeIn или slideDown для красивости повления 2) не пишет в лог-файл (права записи на нем установлены для всех), путь прописан верно
Incode 18.09.2016 03:00
не разобрался куда можно прикрутить FadeIn или slideDown
Откройте файл "jqcart.js" в папке "developer", на строке 167 замените:
// эту строку
$(modal).appendTo('body').find('.jqcart-checkout').html(cartHtml);
// на эту
$(modal).hide().appendTo('body').find('.jqcart-checkout').html(cartHtml).end().fadeIn();
Минифицируйте, если нужно, код и замените его в файле "jqcart.min.js".
не пишет в лог-файл
Где тестируете: на локальном сервере или на хостинге? Включите вывод ошибок. На экране вы их не увидите, т.к. выполняется ajax-запрос, поэтому смотреть их нужно в консоли.
Гость 18.09.2016 13:55
С окошком и логами разобрался, спасибо за ответ. Есть еще вопрос: при обновлении страницы количество товаров в корзине сбрасывается в "0", в вашем примере корзина "сохранятся" после обновления
Incode 18.09.2016 18:10
Есть еще вопрос
Позволю дать вам один совет. Когда вы задаёте вопрос по программированию, то давайте и дополнительную информацию. Этим вы помогаете не только себе, но и отвечающим.
1. В каком браузере тестировали: название, версия.
2. Есть ли ошибки в консоли. Если есть, то обязательно показать текст этой ошибки.
3. Делали ли какие-то изменения в оригинальном коде.
И другое, что относится или может относиться к проблеме. Я, как и многие другие, не ясновидящий, поэтому угадать причину на ровном месте не смогу.
Гость 20.09.2016 17:21
Спасибо за корзину!
Возник такой вопрос: можно ли форму оформления заказа вынести за скрипт?
Например, если я хочу прикрутить адресный справочник, или форму для ввода реквизитов - в скрипте это делать совсем неудобно...
Incode 20.09.2016 19:20
можно ли форму оформления заказа вынести за скрипт?
Можно, но тут нужно индивидуально подходить к задаче. В принципе, если вы знакомы с JS, то вместо генерирования html-кода корзины, вы можете подгружать тем же ajax-ом файл шаблона, вносить в него необходимые данные и выводить.
Гость 21.09.2016 16:05
в том то и дело, что в js практически нуб... :(
Гость 21.09.2016 18:09
Немножко дополнил код:
orderform = '<p class="jqcart-cart-title">Оформление заказа:</p><form class="jqcart-orderform"> <p><label>Доставка:</label><select name="user_delivery"><option value="самовывоз">самовывоз</option><option value="по Москве">доставка по Москве</option><option value="за МКАД">доставка за МКАД</option><option value="до транспортной компании">доставка до транспортной компании</option><option value="по России">доставка по России</option></select></p><p><label>Оплата:</label><select name="user_payment"><option id="1"  value="наличные">наличные</option><option id="2" value="безналичный">безналичный расчет</option></select></p>',
    orderform1 = '<p><label>ФИО:</label><input type="text" name="user_name"></p><p><label>Телефон:</label><input type="text" name="user_phone"></p><p><label>Email:</label><input type="text" name="user_mail"></p><p><label>Адрес:</label><input type="text" name="user_address"></p><p><label>Коментарий:</label><textarea name="user_comment"></textarea></p></form>',
    orderform2 = '<form class="jqcart-orderform-right"><p><label>Полное наименование:</label><input type="text" name="user_org"></p><p><label>Юридический адрес:</label><input type="text" name="user_uradres"></p><p><label>Фактический адрес:</label><input type="text" name="user_adres"></p><p><label>ИНН:</label><input type="text" name="user_inn"></p><p><label>КПП:</label><input type="text" name="user_kpp"></p><p><label>Наименование Банка:</label><input type="text" name="user_bank"></p><p><label>Корреспондентский счет:</label><input type="text" name="user_ks"></p><p><label>Расчетный счет:</label><input type="text" name="user_rs"></p><p><label>БИК:</label><input type="text" name="user_bik"></p></form>',
    orderform3 = '<form class="jqcart-orderform-center"><p><input type="submit" value="Отправить заказ"><input type="reset" value="Вернуться к покупкам"></p></form>';

cartHtml = subtotal ? (orderPreview + orderform + orderform1 + orderform2 + orderform3) : '<h2 class="jqcart-empty-cart">Корзина пуста</h2>';

Не подскажете, как на js сделать сделать такое условие:
Если в "orderform" в селекте с name="user_payment" option id = 1, то <form class="jqcart-orderform-right" style="display:block">
Incode 21.09.2016 20:22
как на js сделать сделать такое условие

$(document).on('change', 'select[name="user_payment"]', function(){
    $('.jqcart-orderform-right')[$(':selected',this).attr('id') == 1 ? 'hide' : 'show']();
});
Гость 22.09.2016 09:53
Спасибо огромное, все получилось :)
Гость 26.09.2016 16:19
Добрый день. У меня вопрос по скрипту: в форме есть такое значение "data-count", я так понял - это кол-во товара. Можно ли сделать так, чтобы это значение бралось из переменной smarty и было "шагом" кол-ва.
Например: есть товар, цена на который указана за 1м, а минимальный заказ 5м. Переменная smarty выдает значение 5. В итоге кол-во товара в корзине должно прибавляться по 5...
Гость 27.09.2016 13:57
Спасибо огромное тебе, автор!!! Самая лучшая корзина, которую мне удалось найти.

Только возник такой вопрос: как в самой корзине в графе "сумма" и в "итог" убрать знак €??? Он есть где-то в коде? Не удалось найти решение этой проблемы
Гость 27.09.2016 14:13
он в запускаторе скрипта, который на страницу товаров ставишь:
<script>
$(function(){
	'use strict';	
	// инициализация плагина
	$.jqCart({
			buttons: '.add_item',
			handler: './php/handler.php',
			cartLabel: '.label-place',
			visibleLabel: true,
			openByAdding: false,
			currency: '&euro;'
	});	
	// Пример с дополнительными методами
	$('#open').click(function(){
		$.jqCart('openCart'); // открыть корзину
	});
	$('#clear').click(function(){
		$.jqCart('clearCart'); // очистить корзину
	});	
});
</script>
Гость 27.09.2016 14:15
currency: '&euro;'
поменяй на
currency: '&#8381;'
чтобы рубли были
Страница 28 из 33  
Ваш комментарий:
X