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

Страница 13 из 33  
Гость 11.04.2018 21:42
@Incode, Спасибо, так и сделаю.
HanSolo 13.04.2018 14:15
Искал 2 дня корзину подобную! Нигде почти нет инфы, а если есть, то какой то трэш не рабочий. И тут наткнулся чудом случайно на вашу корзину, и это чудо!)) Спасибо Вам!)

Один вопрос. Можно как то сделать поле для промокода? Что бы в скрипте например можно было менять 3 промокода и к каждому %.
В итоге для покупателя:
- если один промокод вводят в поле, это 5% скидка от суммы всего заказа
- если другой промокод, это 10%
- и третий промокод, это 15%
Incode 13.04.2018 21:07
Можно как то сделать поле для промокода?

@HanSolo, можно. Однако, это задача не делается парой строк кода и главная проблема в том, что у меня сейчас крайне мало свободного времени. Если послезавтра я смогу выделить часок для вашей задачи и найду быстрое её решение, то постараюсь помочь.
HanSolo 14.04.2018 12:22
Да, конечно!) Вы бы привязывали под темой оплату яндекс для благотворительности что ли) Хорошую работу делаете)
Гость 14.04.2018 15:59
Здравствуйте. Спасибо за корзину. Это лучшее, что я встречала. Создала с помощью вашей корзины целый интернет-магазин. Подключила ЯД и пайпал с автоматической оплатой. Просто супер!!!!!

Но я что-то намудрила и у меня после отправки заказа в обработку корзина не обнуляется. Так и весит предыдущий заказ, пока его ручками не удалишь. Подскажите что отвечает за обнуление корзины на автомате после отправки заказа.
Гость 14.04.2018 17:00
Здравствуйте. Спасибо за корзину. Это лучшее, что я встречала. Создала с помощью вашей корзины целый интернет-магазин. Подключила ЯД и пайпал с автоматической оплатой. Просто супер!!!!!

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


Спасибо. Разобралась)
HanSolo 15.04.2018 11:04
Спасибо. Разобралась)


вы бы писали решение, что бы другие не спрашивали тоже самое вдруг)
HanSolo 15.04.2018 11:47
@windcrack, забирайте. Делал, то что называется "на коленке", поэтому могут быть баги.

Заметил недоработку.
При нажатии "очистить корзину", чекбоксы остаются на товарах. И получается что после очистки если снять чекбокс с товара, то товар наоборот добавиться).
Что бы это исправить, нужно добавить в jqcart.min.js, к функции clearCart последней строчкой d(f.buttons).prop("checked", !1);
HanSolo 15.04.2018 12:13
Очень не хватает еще radio button. Что бы например выбрать цвет и нажать "добавить в корзину". А еще лучше, 2 уровня. Например выбрал цвет, выбрал размер и нажал "добавить в корзину"
С ними корзина была бы на мноооого функциональнее. Пока приходиться делать отдельные карточки товаров и запихивать в виджет табы или слайдер)

Но главное конечно, что бы не забрасывали скрипт, вы супер!)
Incode 15.04.2018 12:45
@HanSolo, кое-что сделал вам (скачать архив), на большее нет времени.
1. Добавил два параметра:
1.1 promoHandler - путь к файлу-обработчику, проверяющему промо-код. (простенький пример добавил).
1.2 discount - опционально, процент скидки (подчеркиваю, что процент, а не сумма) на тот случай, если вам нужно будет установить его еще при инициализации плагина без ввода промо-кода.
2. Введенный код проверяться будет автоматом, после изменения соответствующего поля, отправляя его на сервер по пути указанному в promoHandler. Ответом на запрос, должно быть числовое значение процента скидки или 0, если код ложный.
3. Если код валидный, то он будет сохранен в сессии до отправки формы и повторно вводить его будет не нужно. После отправки - и код, и процентная скидка обнуляются.
4. В обработчике данных формы, вам нужно будет переписать код таким образом, чтобы учитывалась повторная проверка промо-кода и расчет итоговой суммы для отправки на Email, сохранения в базу и т.д.
Incode 15.04.2018 12:48
Очень не хватает еще radio button
Тут много чего не хватает, но главное, как я уже много раз говорил, не хватает моего свободного времени. ;)
HanSolo 15.04.2018 14:08
1. Добавил два параметра:
1.1 promoHandler - путь к файлу-обработчику, проверяющему промо-код. (простенький пример добавил).
1.2 discount - опционально, процент скидки (подчеркиваю, что процент, а не сумма) на тот случай, если вам нужно будет установить его еще при инициализации плагина без ввода промо-кода.
2. Введенный код проверяться будет автоматом, после изменения соответствующего поля, отправляя его на сервер по пути указанному в promoHandler. Ответом на запрос, должно быть числовое значение процента скидки или 0, если код ложный.
3. Если код валидный, то он будет сохранен в сессии до отправки формы и повторно вводить его будет не нужно. После отправки - и код, и процентная скидка обнуляются.
4. В обработчике данных формы, вам нужно будет переписать код таким образом, чтобы учитывалась повторная проверка промо-кода и расчет итоговой суммы для отправки на Email, сохранения в базу и т.д.


Все довольно продумано, класс! Только один баг что ли... если цена товара к корзине через точку, то итоговая сумма страшная получается) Наверно нужно как то указать, что бы не привышала итоговая сумма сотых
HanSolo 15.04.2018 14:12
https://ibb.co/dyMtj7

Имею ввиду если скидка есть, то товар с ценой, которая имеет десятичное число, то такой ужас получается)
Incode 15.04.2018 14:21
Только один баг
Да, тут нужно фиксить. Откройте несжатый файл, в методе calcDiscount измените:

// строку
return sum * percent / 100;
// на эту
return (sum * percent / 100).toFixed(2); // 2 - два знака после запятой
Сохраните, минимизируйте код (если хотите), и перезапишите файл jqcart.min.js
HanSolo 15.04.2018 15:08
Сохраните, минимизируйте код (если хотите), и перезапишите файл jqcart.min.js

Заменил в несжатом, стало нормально. А зачем и что перезаписывать в jqcart.min.js?
И такой вопрос, глупый) Я тут иногда что то меняю в скрипте и в стилях.. Объясните в кратце, в чем отличия jqcart.min.js от jqcart.js?))
HanSolo 15.04.2018 15:28
вру, не исправилось. Но я заменил строчку в jqcart.js, в jqcart.min.js нет подобной строчки
Incode 15.04.2018 15:39
@HanSolo, Файл "jqcart.min.js" - сжатый (минифицированный, обфусцированный) предназначен для продакшн. Меньше весит, быстрее загружается. Именно он подключается в HTML-документ. Вносить в него какие-то корректировки, достаточно проблематично, т.к. после сжатия и тем более обфускации, код выглядит, мягко говоря, нечетабельным. А файл "jqcart.js" (он не подключен в HTML) - исходный и как раз предназначен для изменения плагина под свои нужды.
HanSolo 15.04.2018 15:50
Файл "jqcart.min.js" - сжатый (минифицированный, обфусцированный) предназначен для продакшн. Меньше весит, быстрее загружается. Именно он подключается в HTML-документ. Вносить в него какие-то корректировки, достаточно проблематично, т.к. после сжатия и тем более обфускации, код выглядит, мягко говоря, нечетабельным. А файл "jqcart.js" (он не подключен в HTML) - исходный и как раз предназначен для изменения плагина под свои нужды.


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

https://ibb.co/kzi6Mn
https://ibb.co/fgp2u7
Incode 15.04.2018 16:04
и почему то проблема осталась
Такую же правку внесите и при выводе общей суммы:
// найти строку
$('.jqcart-subtotal strong').text(subtotal - discountSum);
// Заменить
$('.jqcart-subtotal strong').text((subtotal - discountSum).toFixed(2));
HanSolo 15.04.2018 16:35
Да, теперь точно все отлично! Благодарю!)

На счет скрипта, который выше выкладывали, чекбоксы вместо кнопок. Я так понял его нельзя совместить с кнопками?) Что бы и type button "Добавить в корзину" работало и type checkbox, при добавлении в html. А то как то переподключать скрипты не очень... Тем более если один скрипт уже немного под себя изменил.
Incode 15.04.2018 16:57
Что бы и type button "Добавить в корзину" работало и type checkbox, при добавлении в html.
Что вам мешает использовать только checkbox-ы, но стилизовать их под кнопку? Но в общем, всё можно сделать, если технологии позволяют.
HanSolo 15.04.2018 18:56
Заметил, что метод вызова clearCart через кнопку c корзины, не выполняется почему то
Гость 15.04.2018 21:04

Гость 14.04.2018 15:59
Здравствуйте. Спасибо за корзину. Это лучшее, что я встречала. Создала с помощью вашей корзины целый интернет-магазин. Подключила ЯД и пайпал с автоматической оплатой. Просто супер!!!!!

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


success: function(resp) {
$('.jqcart-checkout').html('<p>' + resp.message + '</p>');
if(!resp.errors) {
setTimeout(methods.clearCart, 0);
location.href = "/pay.php";
}
}

Так как у меня после отправки заказа инфа из файла jqcart.js уходит на другой файл /pay.php, то корзина просто не успевала обнуляться. Я проставила
setTimeout(methods.clearCart, 0);
и корзина обнуляется мгновенно.

Может это не правильно? Но сработало))))
HanSolo 18.04.2018 16:08
нельзя никак сделать кнопку очистить корзину из самой корзины?)
Incode 18.04.2018 17:11
@HanSolo, можно. Т.к. эта кнопка будет динамически добавленным элементом, то нужно установить делегированную обработку события.
Страница 13 из 33  
Ваш комментарий:
X