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

Страница 29 из 33  
Гость 20.04.2016 11:42
Я до выходных основательно занят, поэтому придется отложить этот вопрос. Но в любом случае, я не могу понять, что конкретно вы хотите сделать. В моем понимании - это две кнопки у товара: добавить в корзину и добавить в избранное. С первым всё понятно, но с "избранным" не очень. Что должно происходить по нажатию на такую кнопку, какая последовательность действий? Опишите это подробней и когда вернемся к этому вопросу, будем меньше тратить время на всякого рода уточнения.


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

Тут может быть множество применений, например сайт недвижимости, удобно добавлять (отмечать) избранные объекты. Опять же интернет магазин, можно ваш код корзины запустить трижды:
1.Как корзина покупок (jqcart_basket своя кука/хранилище)
2.Как избранные товары (jqcart_mark своя кука/хранилище)
3.Как товары выбранные для сравнения по параметрам (jqcart_param своя кука/хранилище)

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

По сути если это допилить, то получается уникальный плагин, который может иметь множество применений.
Очень надеюсь на вашу помощь.
Incode 23.04.2016 17:28
Да ни чего не должно происходить
Простая кнопка, без установки на неё каких-либо плагинов или обработчиков событий, даст именно такой эффект :)
просто товар также помещается в корзину/избранное
Я вашу мысль понял, но сделать это, изменив всего пару строк, не получится. Для такой задачи, как у вас, придётся основательно менять логику плагина и прикручивать "костыли". В любом случае, на это нужно время. Т.к. вы не регистрировались, то сообщить о результате я не смогу, поэтому просто следите за темой, если вы не нашли еще какое-то другое решение.
regtorg 25.04.2016 15:51
Зарегистрировался, с нетерпением буду ждать переделанный плагин.
Гость 30.04.2016 11:43
Хочу поблагодарить вас за плагин - как раз то, что я искал. Но как всегда есть пожелания))

1)6*0.6 = 3.5999999999999996 $ - не порядок, надо округлить значения, пробовал всюду round (x,2) ставить, почему-то не работает

2)кнопку купить, вставляю в последний столбец таблицы и пишу в ней данные, которые есть в этой же строке. Можно ли (опционально) вытягивать наименование и цену из соседних столбцов текущей строки?
Incode 02.05.2016 15:28
6*0.6 = 3.5999999999999996 $ - не порядок
Согласен. Поправил.
Можно ли (опционально) вытягивать наименование и цену из соседних столбцов
Я специально сделал так, чтобы у кнопок не было привязки к разметке. Ведь у всех она разная и всего предусмотреть просто нереально. Конечно же, сделать это можно, но:
1. До конца месяца, у меня не будет времени - это точно.
2. Востребовано это будет существенно меньшим количеством пользователей. Я бы сказал больше... вы пока единственный, кто задал подобный вопрос из около 3000 скачавших.
3. А есть ли смысл изгаляться - большой вопрос в принципе.
Гость 02.05.2016 16:40
Согласен. Поправил.

Спасибо!
Конечно же, сделать это можно, но:

ок тогда не стоит. Но если у кого-то есть способ как-то автоматизировать экспорт, например из excel таблицы в html - выложите пожалуйста.
Арсен 03.05.2016 21:54
Работает ли отправка сообщений на хостингере? а то у меня раз в день сообщения отправляются
Incode 03.05.2016 23:11
@Арсен, по счастливой случайности, я понятия не имею, что и как работает на Хостингере. Меня даже платный и относительно неплохой shared-хостинг не устраивал, поэтому я уже давно взял себе VDS и не имею никаких проблем, в том числе и с отправкой почты. Я думаю, что ваш вопрос лучше задать техподдержке Хостингера и выяснить все нюансы у них.
Гость 04.05.2016 00:54
1)handler.php 63 строчку поправьте - "Информация о заказае:"

2)Пришло тестовое письмо с заказом:
"1 Бокс 2*18650 0.6 2
Итого: 0" <<< это как так получается??

3) Возможно в тему письма по умолчанию надо добавить Заказчик/телефон, а то как-то обезличенно получается, если десяток заказов наделать - сложно понять, кто из них кто)
Incode 04.05.2016 01:32
@Гость, на пункты 1 и 2, можно ответить обобщенно. И в самом посте (описании плагина) и в комментариях, я говорил, что обработчик был сделан только в качестве примера. Писал я его для того, чтобы человек мог быстро протестировать и понять принцип работы с получаемыми на сервере данными, а дальше писать самому, исходя из своих нужд и по всем правилам.
Что же касается пункта 2, то он так же, пусть и косвенно, относится к вышесказанному. Если вы внимательно посмотреть на код в обработчике, то можно заметить строку:
$total_sum += (int)$item_data['count'] * (int)$item_data['price'];
(int) - преобразование к типу Integer (целое число). В вашем случае, нужно использовать (float) или floatval (число с плавающей точкой)
Гость 12.05.2016 00:02
не подскажите, как в окошко заказа добавить прокрутку окна?
если добавлено больше десятка позиций, форма заказа и кнопка оформить, становиться не видна((
Incode 12.05.2016 01:17
как в окошко заказа добавить прокрутку окна?
Если я правильно понял, то добавьте в css:
.jqcart-table-wrapper {
    max-height: 500px; /* Макс. высота, после которой будет появляться скролл */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}
Гость 12.05.2016 12:10
+можно еще вот это пофиксить, но уже в итогах?
Итого: 7.199999999999999 $
Гость 12.05.2016 15:08
Если я правильно понял, то добавьте в css:

спасибо, помогло!
только я сюда вставлял >> .jqcart-checkout

еще один вопрос по этой теме остался. На ПК все хорошо выглядит, на мобильном телефоне 5,5" не могу форму заказа ниже поля e-mail/комментарий отмотать, это можно как-то решить?
(броузер ff последний)
Incode 12.05.2016 15:19
можно еще вот это пофиксить, но уже в итогах?
Поправил. Можно не скачивать архив заново, а в распакованном файле заменить на строке ~140 часть кода:
// эту строку
sum = parseFloat(cartData[key].price) * cartData[key].count;
// на эту
sum = Math.ceil((cartData[key].count * cartData[key].price) * 100) / 100;
Только не забудьте потом подключить измененный файл и если надо, то минифицировать его.
Incode 12.05.2016 15:32
на мобильном телефоне
До адаптации под мобильные устройства, у меня руки еще не доходили. Хотя, в любом случае, ваша проблема относится больше к CSS. И тут нельзя дать однозначный ответ, т.к. на вашем сайте могут быть стили, которые к корзине и не относятся, но влиять на неё могут.
Гость 12.05.2016 15:46
Поправил

не помогло.
проверьте на суммах 1*0,6 + 1*1,2
у меня выходит: Итого: 1.7999999999999998

До адаптации под мобильные устройства, у меня руки еще не доходили.

Ок, это не критично в принципе, итоги подправить - моя довольная будет)))
Incode 12.05.2016 16:08
проверьте на суммах 1*0,6 + 1*1,2
Да, забыл еще в одном месте подкорректировать. Строка 141:
// Вместо 
subtotal += sum;
// Пишем
subtotal = Math.ceil((subtotal + sum) * 100) / 100;
Гость 12.05.2016 17:02
Да, забыл еще в одном месте подкорректировать. Строка 141:

извиняюсь, за назойливость: если количество сделать 2, а потом обратно 1 - снова не округляется.
Гость 15.05.2016 17:11
Добрый вечер,подскажите как прикрутить базу данных к вашей корзине.
Сама база есть на localhost_е и выводится с ценником товара на странице сайта, а как этот ценник добавить в корзину пока не нашел. Если будет время, то помогите пожалуйста.
Спасибо.
Гость 18.05.2016 08:54
<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>


Разобрался - надо просто подставить свои значения из базы в код кнопки.
Примерно так.
<button class="add_item" data-id="<?php echo $row['art']?>" data-title="<?php echo $row['title']?>" data-price="<?php echo $row['price']?>" data-img="<?php echo $row['images']?>">Добавить в корзину</button>

Спасибо за корзину!!!
obevankanobr 18.05.2016 13:47
Добрый день! В вашей демке выводится сообщение, что корзина пуста, никак не могу сообразить, как вывести сообщение. И при отправке заказа ярлык корзины пропадает с сайта, как его можно оставить, опять же, с выводом сообщения, что корзина пуста. Буду очень благодарен за подсказку.
obevankanobr 18.05.2016 19:49
И еще проблемка. Почему-то, если в корзине меньше 4 товаров, не приходят письма на почту.
В чем может быть причина?
Гость 18.05.2016 20:42
и мне помогите суммы доделать, хочу уже корзину в дело пустить)
не работает на некоторых количествах товаров, больше одной позиции, например:
1*0,6
5*1,2 = Итого: 7.199999999999999 $
или
2*0,6
1*1,2 = Итого: 3.5999999999999996 $
Incode 18.05.2016 21:45
при отправке заказа ярлык корзины пропадает с сайта
@obevankanobr, Если нужно, чтоб ярлык был всегда виден, установите параметр visibleLabel: true
если в корзине меньше 4 товаров, не приходят письма на почту
Проверьте количество на сервере, выведите в файл всё, что приходит. Убедитесь, что ID товаров уникальны.
Страница 29 из 33  
Ваш комментарий:
X