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

Страница 12 из 33  
HanSolo 19.04.2018 22:46
@HanSolo, можно. Т.к. эта кнопка будет динамически добавленным элементом, то нужно установить делегированную обработку события.


спасибо, сделал!
HanSolo 20.04.2018 00:45
в самом конце функции openCart добавил .fadeIn('fast') перед $(modal), что бы так же плавно открывалась, как и закрывалась корзина. Все работало, но после замены jquery-1.11.3.min.js на jquery-3.3.1.min.js перестало плавно открываться) Не подскажите как исправить?)
Гость 22.04.2018 07:52
Здравствуйте. Спасибо за корзину. У меня вопрос или даже просьба: можно как-то прикрутить модальное окно пример: 1) http://cartonbox.constlab.ru или пример: 2) http://dontforget.pro/javascript/prostoe-modalnoe-okno-na-jquery-i-css-bez-plaginov/ если да то как? Я хотел бы реализовать с помощью скрипта из примера 1) корзину в первое окно а оформление заказа во второе. Если это сложно или "времени нет" то подскажите пожалуйста хотя бы как можно к Вашему модальному окну добавить подложку и убрать скролл у основной страницы? Заранее спасибо за ответ!
Decebal 22.04.2018 08:01
Здравствуйте. Спасибо за корзину. У меня вопрос или даже просьба: можно как-то прикрутить модальное окно пример: 1) http://cartonbox.constlab.ru или пример: 2) http://dontforget.pro/javascript/prostoe-modalnoe-okno-na-jquery-i-css-bez-plaginov/ если да то как? Я хотел бы реализовать с помощью скрипта из примера 1) корзину в первое окно а оформление заказа во второе. Если это сложно или "времени нет" то подскажите пожалуйста хотя бы как можно к Вашему модальному окну добавить подложку и убрать скролл у основной страницы? Заранее спасибо за ответ!
Гость 24.04.2018 18:56
Добрый день. Да, корзина шик!
Такой вопрос.
Возможно ли разделить корзины? Т.е. сделать 2, 3 и т.д.
Для разных продажников
Гость 24.04.2018 21:50
Здравствуйте. Подскажите, пожалуйста!!!! Как вывести в Форму заказа (которая появляется при нажатии на "Добавить в корзину") не количество товаров. а общую сумму?
windcrack 28.04.2018 18:54
Здравствуйте, тестил корзину пока багов не нашёл. Возник вопрос а вот как сделать чтобы после того как письмо с заказом отправлено заказчика перенаправляло на оплату? это надо просто добавить ссылку на платёжную систему?
Гость 29.04.2018 11:19
Здравствуйте

Скачал архив, распаковал, нажимаю на кнопку "Отправить заказ" - ничего не происходит. Не появляется надпись "ЗАказ принят в обработку" - и на email ничего не приходит.

Может надо какие-то .htaccess править или разрешения на исполнения файлов поставить? Помогите пожалуйста.
Incode 29.04.2018 11:59
нажимаю на кнопку "Отправить заказ" - ничего не происходит.
Судя по ошибке в консоли, у вас старая версия PHP, поэтому измените объявление массива на обычный:
// найти строку
$headers   = [];
// изменить на
$headers   = array();
Favi 29.04.2018 14:46
Спасибо, заработало

Теперь другая проблема - если добавляешь в корзину больше 10 товаров, то окно заказа не помещается на экран, и скроллить его невозможно, и соотственно кнопку "Отправить заказ" невозможно нажать, т.к. она оказывается за пределами экрана.

Можно ли как-то добавить параметр, чтобы всплывающее окно можно было прокручивать?
Incode 29.04.2018 15:02
чтобы всплывающее окно можно было прокручивать?
Для класса "jqcart-checkout", добавляем в css:
.jqcart-checkout {
    /* ... */
    height: 500px; /* или max-height. Значение ваше */
    overflow-y: auto;
}
Favi 29.04.2018 15:20
А как изменять размеры поля [Комментарий], и текст в кнопке "Оформить заказ" ?
windcrack 29.04.2018 16:10
Всё по гуглил понял. как сделать. А как поменять цвет шрифта - Заказ принят в обработку?
Гость 30.04.2018 11:59
Ищешь класс данного текста и меняешь color: red; за место red любой цвет типа #000;
windcrack 01.05.2018 00:19
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!' тут конкатенация? или всё таки как то отдельно писать надо?
Incode 01.05.2018 01:05
тут конкатенация?
@windcrack, нет, это тернарный оператор
windcrack 01.05.2018 01:56
@Incode, всё поменял. Усталость сказалась.
mira3a 02.05.2018 12:15
Все-таки, как вывести сумму заказа в корзинку, которая вверху?
Incode 02.05.2018 12:55
@mira3a, вы же ждёте от меня не теоретические варианты, а уже готовое решение. А на это я сейчас не могу выделить время.
mira3a 02.05.2018 19:54
ну скорее всего это же просто. просто вставить какой-то код... ((((
HanSolo 02.05.2018 21:27
@Incode, подскажите, у вас на хостинге для папки картинок стоят какие то права? Потому что у меня на почте в письме нет картинок товара. Я и переименовывал по-разному, и формат с jpg на png менял, и размеры разные делал.... и не в какую не появляются в письме картинки! Как только ставлю вашу ссылку картинки на кнопку (https://incode.pro/demo/icp_example20/img/lg.png), все приходит нормально.
Incode 03.05.2018 00:04
@HanSolo, права стандартные - 755. Попробуйте вашу ссылку на изображение открыть просто в браузере. Сработает или нет?
Кстати, на некоторых почтовых сервисах, изображения, js и т.д., отключены по умолчанию. Особенно, если ссылки не по протоколу https. Вот, например, инструкция в gmail
HanSolo 04.05.2018 19:56
@Incode, спасибо, из за отсутствия ssl не показывало картиники
HanSolo 04.05.2018 19:59
@Incode, а на счет этого не подскажите?) Мне нужно просто именно jquery-3.3.1, для работоспособности некоторых скриптов. А если 2 подключаю, то естественно конфликт...

в самом конце функции openCart добавил .fadeIn('fast') перед $(modal), что бы так же плавно открывалась, как и закрывалась корзина. Все работало, но после замены jquery-1.11.3.min.js на jquery-3.3.1.min.js перестало плавно открываться) Не подскажите как исправить?)
Incode 04.05.2018 21:01
@HanSolo, две библиотеки - это перебор. Должно работать (проверил) с версией 3.3.1, т.к. методы fadeIn/fadeOut никто не убирал и синтаксис не изменился. Смотрите в консоли. Возможно, что есть какие-то ошибки.
Страница 12 из 33  
Ваш комментарий:
X