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

Страница 10 из 33  
HanSolo 29.05.2018 16:06
@Incode, более менее адаптировал, хотя конечно на 380 смотрится не очень... Но только заметил, что на планшетах и телефонах не закрывается по тапу за областью дива с контентом. Можно конечно на кнопку нажимать "продолжить покупку", НО если нечаянно открыл пустую корзину, то все....
windcrack 30.05.2018 21:56
Понял не правильно задал вопрос. Можно ли задать в data-price своё значение из другой переменной?
windcrack 03.06.2018 20:59
У меня есть калькулятор(да я его сделал сам). Но как мне значение из подсчитанного калькулятора занести в
data-price
. Есть ли какой обработчик? или только прописанные значения? Просто корзина хорошая не хочу менять. А мне осталось только калькулятор прикрепить вернее значение из него.
stas_rsv 10.06.2018 16:53
Отличная корзина. Но все же маленький вопросик. :-)
Судя по всему по умолчанию, в корзине товары сортируются по ID. Как сделать сортировку по Наименованию?
Гость 12.06.2018 17:06
Привет Всем! Товарищи Подскажите пожалуйста есть еще где подобные корзинки. Весь инет перерыл только эту нашел)
Гость 12.06.2018 17:08
Или есть кто тут кто мне сможет помочь ее маленько доделать. За деньги естественно
Гость 18.06.2018 05:18
Здравствуйте! Подскажите пожалуйста как добавить каптчу в корзине?
windcrack 30.06.2018 18:45
@Гость, Полистайте есть ответ на ваш вопрос
Гость 06.07.2018 15:07
Как сделать не евро, а рубли? подскажите пожалуйста?
Incode 06.07.2018 16:43
Как сделать не евро, а рубли?
Параметр currency, вместо '&euro;' указать свою валюту. В описании всё есть, читайте внимательно
Гость 06.07.2018 17:14
Параметр currency, вместо '&euro;' указать свою валюту. В описании всё есть, читайте внимательно

Долго думал, но разобрался, спасибо...
Гость 13.07.2018 19:08
Добрый день !подскажите люди добрые как вывести вместо количества товара , сразу сумму в карточке ?
Гость 14.07.2018 20:43
Добавил в карточку еще три дополнительных поля , как сделать так чтоб в письме приходили данные которые введут люди ?? Именно с карточки нужно а не из самой корзины
Гость 25.07.2018 13:23
Подскажите, пожалуйста, как можно адаптировать корзину для работы с WordPress. Насколько я понял, там все AJAX запросы работают только через файл admin-ajax.php с помощью хуков, а все запросы AJAX не через него - блокируются. Понял, что нужно вынести саму функцию SendOrder в файл functions.php и передавать все данные через обработчик с помощью хуков, но написать сам код - не смогу. Прошу помощи, если кто-то уже сталкивался с этим.
Гость 25.07.2018 17:29
Подскажите, пожалуйста, как можно адаптировать корзину для работы с WordPress. Насколько я понял, там все AJAX запросы работают только через файл admin-ajax.php с помощью хуков, а все запросы AJAX не через него - блокируются. Понял, что нужно вынести саму функцию SendOrder в файл functions.php и передавать все данные через обработчик с помощью хуков, но написать сам код - не смогу. Прошу помощи, если кто-то уже сталкивался с этим.


Я к WordPress подключил все работает , без никаких хуков , подключил всё , включая старую библиотеку jquery-1.11.3.min.js , поставил плагин jquery update (по другому был конфликт ), единственное что не смог вывести сумму покупки сразу , а не в корзине .
Гость 26.07.2018 18:14
@Incode, Добрый день!

Спасибо огромное за корзину!

Подскажите как можно обновлять данные в корзине не закрывая каждый раз ее.

Поясню ситуацию...

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

сайт где висит корзина для наглядности - //ruwolkinzcom.1spa.by/

P.S. кнопка заказать в самом низу сайта, и затем зайдите в корзину и добавьте там (в самой корзине) еще какой нибудь товар

Очень надеюсь что Вы мне поможете !
Гость 08.08.2018 07:35
Как добавить в пустую корзину кнопку для закрытия её?
Гость 12.08.2018 15:45
Подскажите как можно обновлять данные в корзине не закрывая каждый раз ее.

Вам нужно привязать обработчик на запись, например на кнопку или +/- количества т.е.
// Получаем данные из LocalStorage
function getCartData(){return JSON.parse(localStorage.getItem('cart'));}
// Записываем данные в LocalStorage
function setCartData(o){localStorage.setItem('cart', JSON.stringify(o));
return false;};

Например на кнопку "Оформить заказ" вы привязываете функцию setCartData().
Что то типа этого
$(document).on('click', '.plustab', function () {
setCartData(o);
}
Гость 12.08.2018 15:52
При нажатии на кнопку "Заказать" в корзину не переходит.
Гость 12.08.2018 15:56
Как добавить в пустую корзину кнопку для закрытия её?

Примерно в строке 50 добавьте id кнопки через запятую, должно сработать
.on('reset', '.jqcart-orderform', actions.hideCart)
Гость 12.08.2018 15:57
Как добавить в пустую корзину кнопку для закрытия её?

Посмотрел корзину, куда вы кнопку хотите добавить? Если корзина пустая то выводиться сообщение и всё.
Гость 14.08.2018 17:42
Добрый день!
Отличная корзина. Применил её. Скажите, при нажатии на кнопку "Печать" открывает 4 страницы и все они пустые. Нет ни каких данных для печати. Как исправить?
Гость 15.08.2018 09:05
Еще что заметил. 1. Не шлет письма админу (тому кто делает заказ письма приходят). 2. Не пишется лог. Если можете, помогите решить данные проблемы.
windcrack 15.08.2018 14:46
Нашёл баг у корзина на чек боксах. Когда нажимаем кнопку отправить заказ чек боксы не сбрасываются.
Гость 15.08.2018 18:53
Подскажите, как добавить общую сумму к количеству товара
Страница 10 из 33  
Ваш комментарий:
X