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

Страница 31 из 33  
vaco 02.03.2016 17:39
@Incode, нашёл! PHP, $headers[] = 'From:
Непонятна взаимосвязь, однако если тут вписать, к примеру
$headers[] = 'From: ООО "Альфа"<info@alfa.ru>'; , то случается вышеупомянутый случай.
Причина в напрашивающемся пробеле после ООО.
Incode 02.03.2016 20:33
Причина в напрашивающемся пробеле после ООО.
Возможно, но я больше склоняюсь к тому, что проблему могут создавать кавычки, а не пробел. И не обязательно в заголовках, а может быть где-то в названии товаров. Хотя, ваш случай сложно проанализировать не видя всей картины, т.к. прописав один в один такую же строку, форматирование в письме приходит без каких-либо искажений, как с кавычками или пробелами, так и без них.
DSergey 05.03.2016 16:11
Добрый вечер, можно сделать отрображение ID в корзине заказа?
В письме ID показан, возможно где-то по быстрому))) можно код вставить?
Спасибо.
Incode 06.03.2016 14:47
@DSergey, сделал отображение ID в корзине, НО кроме этого, сделал еще несколько важных изменений и дополнений. В связи с эти, отредактировал статью и в конце добавил историю изменений. Поэтому, не забудьте обратить на это внимание.
DSergey 06.03.2016 15:37
Круто! пойду разбираться с кодом.
Еще раз спасибо за вашу работу.
Гость 13.03.2016 01:43
Здравствуйте, а скажите пожалуйста, как сделать так что бы прокручивалась только область с товарами непосредственно. Если допустим товаров 10 добавить то прокрутка зоны где товары происходит. Заранее спасибо!
Incode 13.03.2016 02:48
как сделать так что бы прокручивалась только область с товарами
Для класса "jqcart-checkout", добавляем в css:
.jqcart-checkout {
    /* остальные свойства */
    height: 500px; /* или другая фиксированная высота по вашему усмотрению */
    overflow-y: auto;
}
Гость 13.03.2016 06:16
спасибо, но я имел в виду что бы не всё тело корзины прокручивалось, а только таблица с товарами, где фотки колл-во, и значок удалить.
Гость 13.03.2016 08:19
Доброго времени суток.
Можно ли сделать процентную скидку, например от какой-то суммы заказа?
Например с 10000 - 5%, с 20000 - 10% и т.д
Спасибо за супер корзину - Вы не представляете как сильно мне помогли.
DSergey 13.03.2016 08:34
Добрый день,подскажите как выровнять товар в столбе <Наименование> по левому краю.
Поправил в handler.php строчку $tbl .= '<tr align = "left">'; , но все столбы сдвинулись.
А как сдвинуть один столбик <th width=50% >Наименование товара</th> ?
Спасибо.
Incode 13.03.2016 13:18
Можно ли сделать процентную скидку
Если вы хотите сделать это на клиенте, т.е. в самом плагине, то подумаю над этим, когда будет свободное время.
Incode 13.03.2016 13:26
А как сдвинуть один столбик
@DSergey, Именно для столбика (<td>), а не для строки (<tr>), задать align = "left" или с помощью атрибута style и свойства text-align.
P.S. К сожалению не все почтовые сервисы нормально воспринимают подключение стилей или js в письмах, поэтому, для большей уверенности в желаемом результате, нужно прописывать свойства внутри тегов.
Incode 13.03.2016 13:52
что бы не всё тело корзины прокручивалось, а только таблица с товарами
Это нужно немного поменять структуру HTML окна с корзиной. Скачайте этот архив, замените у себя js и css файлы, на строке 78 в jqcart.css, пропишите необходимую высоту для класса ".jqcart-table-wrapper" .
Гость 13.03.2016 14:28
Спасибо огромное))! Не сочтите за наглость, а у Вас файлика js не минифицированного не осталось? А то я дизайн корзины сделал, а как в мимнифицированный скрипт перенести настройки не знаю((
Incode 13.03.2016 15:01
файлика js не минифицированного не осталось?
Есть, конечно же, забирайте. В принципе, достаточно в уже вашем измененном коде обвернуть псевдотаблицу в еще один элемент, которому ограничить высоту и указать overflow-y: auto;
Гость 13.03.2016 16:22

Incode 13.03.2016 13:18

Можно ли сделать процентную скидку

Если вы хотите сделать это на клиенте, т.е. в самом плагине, то подумаю над этим, когда будет свободное время.

Спасибо.
Гость 13.03.2016 18:03
Спасибо большое, я тоже думал что надо оборачивать в див, но чайник я, многого не знаю ещё, большое спасибо за то что возитесь с нами)))
vaco 14.03.2016 11:52
@Incode, добрый день!
Возникла необходимость, чтобы handler.php отправлял письмо с заранее подготовленным аттачем. Файл лежит в папке php/receipt.html
Объясните, пожалуйста, что изменить в коде отправки?
Спасибо!
Incode 15.03.2016 12:25
@vaco, работа с почтой - это тема, которая требует отдельного рассмотрения. Я неоднократно советовал раньше, что лучше не изобретать колесо, а использовать класс PHPMailer, в котором всё давно и качественно реализовано.
vaco 15.03.2016 13:35
@Incode, благодарю!
Гость 18.03.2016 08:43
Здравствуйте.
А можно вывести заказ из корзины на печать и сформировать товарный чек?
Спасибо.
Incode 21.03.2016 12:02
вывести заказ из корзины на печать
На данный момент эта функция не предусмотрена, но буду рассматривать при обновлениях плагина.
Гость 21.03.2016 13:38

Incode 21.03.2016 12:02

вывести заказ из корзины на печать

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

Спасибо,будем ждать сколько надо))).
Гость 26.03.2016 17:13
Возможно сделать минимальную сумму заказа?
Daniyargilimov 02.04.2016 09:51
Админ, красавчик
Страница 31 из 33  
Ваш комментарий:
X