Корзина покупателя на 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 комментариев

Страница 18 из 33  
Incode 08.08.2017 11:43
@dohuze, да, есть такой баг. В архиве файлы поправил, а вы можете сами изменить часть кода:
// Эти строки
win.document.close();
win.focus();
win.print();
win.close();
// На эти
setTimeout(function(){
    win.document.close();
    win.focus();
    win.print();
    win.close();
}, 100);
Wh13rabbit 10.08.2017 13:27
Подскажите как сменить символ евро на другую валюту?
замена содержимого в "currency" не приносит результата, также я не могу понять откуда тянется этот символ вообще? http://prntscr.com/g6qokg
Wh13rabbit 10.08.2017 13:32
Стоило написать и осенило :))) все норм работает, там в теле страницы я не заметил подмену :D
Dima.S. 13.08.2017 15:59
добрый день,
помогите исправить проблему открыл форму в open server и при нажатии на кнопку оформить заказ выдает ошибку в консоль такого характера (Parse error: syntax error, unexpected '[' in C:\OpenServer\domains\test2.com\php\handler.php on line 70)

вот моя 70 строка
$headers = array(); // или $headers = array() для версии ниже 5.4


но найти проблему не могу (
Dima.S. 13.08.2017 16:35
спасибо большое, я нашел решение проблемы.
но появилась новая, может кто подскажет почему не приходит сообщение на саму почту ??
почта @gmail.com
открыт сайт в open server.
буду очень благодарен за любую помощь.
Incode 13.08.2017 17:03
сайт в open server
По умолчанию в OpenServer стоит заглушка на отправку почты. Сами письма складируются в директории "\OpenServer\userdata\temp\email".
Гость 22.08.2017 13:56
Привет. У меня все отлично работало, но видимо php обновился на хостинге и exit( json_encode($response) ) не работает. Т.е. письмо с заказом приходит, а корзина не обновляется, сообщение об отправке не выводится и товары не удаляются из нее.
Гость 01.09.2017 10:39
Привет, прикрутил корзину все отлично работает.
Вопрос - может у кого завалялся фильтр товара?
Спасибо.
infinitymd 06.09.2017 11:41
классический фильтр товаров напрямую связан со структурой бд, так что универсальный скрипт Вы вряд ли найдете. Другое дело - фильтр по тэгам, основанный на поиске, их в интернете навалом.
Гость 06.09.2017 13:46
Добрый день. Пытаюсь прикрутить плагин к WP, но никак не удается..Пишет что не найдена функция jqCart. Возможно так получается из-за разных версий jQuery...подскажите как быть?
Incode 06.09.2017 13:56
Пишет что не найдена функция jqCart
Или же путь к файлу плагина указан не верно, или же подключение файла у вас происходит уже после кода вызова. Чтобы определить, посмотрите исходный код страницы.
Гость 06.09.2017 14:08
@Incode,
<script src="./wp-includes/js/jquery-1.11.3.min.js"></script>
<script src="./wp-includes/js/jqcart.min.js"></script>
<script>
$(function(){
	$.jqcart({
			buttons: '.add_item',
			handler: 'handler.php',
			cartLabel: '.label-place',
			visibleLabel: true, 
			openByAdding: false,
			currency: '&euro;'
	});	

Последовательность подключения и вызова такая. Путь указан верно....
Incode 06.09.2017 14:31
Путь указан верно
Вот тут есть сомнения. Попробуйте прописать абсолютный путь до файла. То есть, от корня сайта. Не забудьте поставить слеш в самом начале пути.
Гость 07.09.2017 11:01
@Incode, браузер показывает, что загрузил этот файл (на вкладке Sources).
Гость 07.09.2017 12:18
Разобрался...регистр букв тоже имеет значение)
Гость 18.09.2017 20:49
А как сделать так, что бы при перезагрузке страницы товары оставались в корзине?
Incode 18.09.2017 21:03
что бы при перезагрузке страницы товары оставались в корзине
Они и будут оставаться в корзине до тех пор, пока человек не оформит заказ или не удалить их сам.
Гость 10.10.2017 10:27
Привет всем. Как изменить ключевое поле в корзине для группировки товара, т.к. при добавлении разных товаров, но с одинаковой ценой в корзине второй товар не добавляется, а первый умножается на 2, как будто я первый товар 2 раза выбрал.
Гость 14.10.2017 16:08
Привет всем. Как изменить ключевое поле в корзине для группировки товара, т.к. при добавлении разных товаров, но с одинаковой ценой в корзине второй товар не добавляется, а первый умножается на 2, как будто я первый товар 2 раза выбрал.

Возможно ошибка в id-ках товаров - у второго id от первого товара.
Гость 15.10.2017 17:04
Привет всем.
Как можно сделать, чтоб при клике на корзину она открывалась не во всплывающем окне, а как обычная страница?
Гость 17.10.2017 11:55
запускаем index.html и кладем в корзину товар
3. запускаем index1.html и смотрим как работает корзина
4. правим всякие там local.где_корзина и location.reload(); под себя


Не работает, открывается пустая страница. Ссылки со скриптом поправил.
В коде страницы есть код
infinitymd 24.10.2017 14:16
выше уже выкладывали код для статичной корзины
Гость 25.10.2017 11:53
Как добавить к карточке товара еще пару checkbox с дополнительными полями с ценами и чтобы все сплюсовалось?
Гость 05.11.2017 02:24
// какой-то код обработки заказа...
// Ответ на запрос
@Incode, Как сделать сохранение общей суммы товара в ярлык? Так же как внутри корзины, где итог.
Гость 14.11.2017 10:28
Господа, купон со скидкой ни кто не делал?
Может кто прикрутит к корзине эту опцию?
Спасибо.
Страница 18 из 33  
Ваш комментарий:
X