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

Страница 2 из 33  
Luzgindmitrij 27.05.2020 13:38
Подскажите как добавить в data-price цену товара, которая формируется в другом файле js.
Гость 29.05.2020 14:20
Теперь появилась новая проблема:

@Valery, посмотрите часть комментариев со станицы 23 (с коммента 10.12.2016 23:53) и далее на 22-й - там есть одно из решений, оно немного под другую задачу, но добавленные товаров в корзину на разных страницах сохраняет. Может Вам удастся адаптировать его под Ваш исходник.
Valery 31.05.2020 21:26
@Гость, Спасибо, я посмотрел, но это не то. У меня корзина прекрасно работает. Проблема в том, что если клиент возвращается на предыдущую страницу, то его ждёт старая информация и нужно вручную сделать обновление страницы в браузере. А мне нужно чтобы страница обновлялась автоматически при возврате.
Вот я смог найти одно простое обходное решение, изменил тег боди:

<body onbeforeunload="return window.location.reload(true)">

</body>

Мне это помогло и работает, может кому-нибудь тоже будет полезно.
Но я не знаю насколько это правильное решение, подскажите плиз :)
Гость 10.06.2020 13:55
Доброго дня, у меня вопрос, возможно ли прикрутить к даному плагину отправку на почту через smtp, типа как в phpmailer. Спасибо!
Incode 10.06.2020 15:12
отправку на почту через smtp, типа как в phpmailer
Да, конечно. Более того, я неоднократно рекомендовал использовать для отправки на почту PHPMailer. В обработчике на сервере это совсем не сложно сделать, почитав документацию PHPMailer.
NearYou 10.06.2020 15:48
@Incode, спасибо, помогите пожалуйста, мало знаю о php к моему больщому сожалению, только учусь
NearYou 10.06.2020 16:11
отправку на почту через smtp, типа как в phpmailer

Да, конечно. Более того, я неоднократно рекомендовал использовать для отправки на почту PHPMailer. В обработчике на сервере это совсем не сложно сделать, почитав документацию PHPMailer.

@Incode, спасибо, помогите пожалуйста, мало знаю о php к моему больщому сожалению, только учусь
NearYou 11.06.2020 00:10
Помогите пожалуйста подключить phpmailer под плагин
NearYou 20.06.2020 10:25
Всем привет, посмотрите пожалуйста код, хочу подключить PHPMailer, но что-то я не то наваял похоже
Показать код
NearYou 20.06.2020 11:34
@NearYou, аа все
Всем привет, посмотрите пожалуйста код, хочу подключить PHPMailer, но что-то я не то наваял похоже


аа все, сделал, всем спасибо!!
capos 20.06.2020 13:23
Здравствуйте, такая проблема возникла, нужно на втором клике на <button class="add_item"</button> перенаправлять на другую страницу, можете помочь
capos 20.06.2020 13:23
Здравствуйте, такая проблема возникла, нужно на втором клике на <button class="add_item"</button> перенаправлять на другую страницу, можете помочь
Гость 07.07.2020 20:44
@NearYou,
аа все, сделал, всем спасибо!!

Поделитесь знанием, думаю тут многим будет интересно
Гость 07.07.2020 20:55
Добрый день! Пару раз встречал здесь вопрос: "Как разместить форму на отдельной странице?", но никто не прокомментировал, как это реализовать. Суть такова, чтобы по нажатию "Корзина", вместо модального окна выполнялся переход на страницу "../cart/". Может кто-то делал, поделитесь реализацией. Спасибо!
qeenex 10.07.2020 16:22
Как добавить в пустую корзину кнопку для закрытия её?

Строка 167: добавляете кнопку <button id="cancel">OK</button>
Строка 50: добавляете строку .on('click', '#cancel', actions.hideCart)
Гость 29.07.2020 09:05
Здравствуйте, при добавлении ЧПУ страниц пропадает корзина.
Помогите решить проблему.
Спасибо.
Гость 29.07.2020 09:47
Здравствуйте, при добавлении ЧПУ страниц пропадает корзина.
Помогите решить проблему.
Спасибо.

Поменял пути к css и js, корзина появилась.
При этом товар добавляется, но открывается пустая корзина.
Может подскажите куда смотреть?
Спасибо.
Гость 01.08.2020 18:41
Здравствуйте. А возможно ли реализовать добавление одной кнопкой например набор из трех товаров? Спасибо классная корзина.
Гость 19.08.2020 15:23
Плагин https://github.com/rah-emil/angry-cart.js - как отличный вариант :)
Гость 23.08.2020 17:12
Доброго дня.

Давненько установил эту корзину на сайт. Весьма нравится.
И вот только сейчас дошли руки сделать её на отдельной странице с выбором способа доставки и оформления на организацию.

Есть хитрый вопрос=)
Нету случайно наработок выпадающей "мини корзины" с номенклатурой, количеством и суммой всего?

Например: в хедере значёк корзины. При нажатии в попап появляется мини корзина с кнопкой "оформить заказ".
Гость 25.08.2020 11:35

Гость 23.08.2020 17:12
Доброго дня.

Давненько установил эту корзину на сайт. Весьма нравится.
И вот только сейчас дошли руки сделать её на отдельной странице с выбором способа доставки и оформления на организацию.

Есть хитрый вопрос=)
Нету случайно наработок выпадающей "мини корзины" с номенклатурой, количеством и суммой всего?

Например: в хедере значёк корзины. При нажатии в попап появляется мини корзина с кнопкой "оформить заказ".


Сделал проще.
На сайте по сути 2 корзины теперь. Одна фулл версия на отдельной странице, а вторая в модальном окне.
Та, что в модальном окне оставил только табличку с товарами и суммой, вместо кнопок поставил ссылку на корзину фулл версию. (Естественно лишний код обработки из скрипта модальной корзины убрал).

Теперь дальше появился вопрос:
Как сделать, чтобы после добавления товара в корзину кнопка автоматически заменилась на кнопку "Уже в корзине" (и стала ссылкой на корзину)?
Гость 03.09.2020 10:59
Подскажите как удалить в этой корзине полноценной € этот знак в общей сумме ?я найти не могу в каком файле он расположен но явно не в html
Гость 03.09.2020 12:01
Подскажите как удалить в этой корзине полноценной € этот знак в общей сумме ?я найти не могу в каком файле он расположен но явно не в html


В куске кода ниже, параметр "currency":

// инициализация плагина
$nc.jqCart({
buttons: '.add_item',
handler: '/handler.php',
cartLabel: '.label-place',
visibleLabel: true,
openByAdding: false,
currency: 'руб.'
});

Рекомендую Вам внимательнее изучить код корзины.
Гость 03.09.2020 12:54
Спасибо я нашел ощибку и исправил а как мне сделать так чтобы я готовую корзину внешне занес на сайт и там отображались мои покупки ?я сделал корзину с помощью картинки и в css как мне вместо оформить заказ и номерацией поставить свою корзину готовую где будет работать счетчик ?
Гость 03.09.2020 20:40
я в плане расположений все понял но допустим я сделал корзину добавил в html код картинку корзины в css ее стилизовал с эффектами при наведении мышки как сделать так чтобы данной корзине подключить ее чтобы при нажатии заказать загоралась ну счетчик от 0 может доходить поразному зависит сколько покупок сделает человек вот такой вопрос могу ли я сделанную корзину на сss и html связать вместо cartLabel: '.label-place' дать другое название и она будет работать или нет?прошу подскажите кто нибудь буду очень благодарен.
Страница 2 из 33  
Ваш комментарий:
X