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

687 комментариев

Страница 26 из 28  
Гость 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
Админ, красавчик
Daniyargilimov 02.04.2016 12:00
Кстати, как убрать колону ID в корзине? так и не пойму
Incode 03.04.2016 01:58
как убрать колону ID в корзине?

@Daniyargilimov, это можно сделать в CSS. Добавьте следующий код:
.jqcart-manage-order > div > div:first-child {
  display: none;
}
Гость 05.04.2016 16:41
Уважаемый автор этого прекрасного плагина, скажите пожалуйста, можно ли сделать онлайн оплату к этой корзине? Я думаю 90 из 100 поддержат меня в этой просьбе, так как корзина получилась очень гибкая, и классная, а если ещё и онлайн оплата будет, это будет просто шик!
Incode 05.04.2016 17:51
можно ли сделать онлайн оплату к этой корзине?
Теоретически это можно было бы реализовать, однако, есть одно "НО" - через какой сервис это реализовывать? На сегодняшний день, практически каждый банк имеет своё API и одних, выбранный мной банк, устроит, а других, которых будет большинство - нет. Кроме банков, есть специальные сервисы (Интеркасса, Robokassa и т.д.), которые предоставляют мультивыбор способов оплаты для пользователя, но и тут не угадаешь, т.к. их множество и вам понравится один, а кто-то хочет работать с другим сервисом. И даже то, на чем написан ваш сайт - CMS или самописный - влияет на выбор. Но даже, если бы всех устроил определенный способ, то подавляющее большинство API работают на стороне сервера и к плагину, работающему на клиенте, это относится косвенно.
Я подумаю над вашим предложением, но очень маловероятно, что найду какой-то универсальный способ.
Гость 06.04.2016 04:57
Вы знаете, я думаю Яндекс деньги, Вебмани, Киви и уже этого было бы достаточно, кому надо супер кол-во методов оплаты, те могут и на cms типа опенкарт создать свой магазин, а у меня. как и у многих использующих Ваш плагин небольшой интернет ларёк и 3 методов мне более чем хватает)) В любом случае Вам спасибо огромное, что не забываете про нас!
Страница 26 из 28  
Ваш комментарий:
X