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

Страница 4 из 28  
Гость 17.08.2018 12:22
В корзину. Нумерация товаров в корзине.
1. товар + -
2. товар + -
и т.д.

Кол-во товаров +/- есть, стоимость за шт есть, стоимость за кол-во есть, итого есть, что нужно то))
windcrack 19.08.2018 13:55
Есть большая проблема Не могу подключить API paypala в данную корзину!!! @Incode, ответь те пожалуйста срочно!!!
Гость 22.08.2018 21:29
не убирается слово "Оформить заказ" , как его убрать оставить только цифры
Гость 29.08.2018 19:08
@Гость, в файле jqcart.min.js в девятой строке надо убрать \u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437
Гость 29.08.2018 20:05
Фразу "Оформить заказ" можно убрать в файле jqcart.min.js, который находится в папке js. Ищете там такую строчку "('<div class="jqcart-cart-label"><div ><span class="jqcart-title">\u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437</span></div><div ><span class="sss"><img src="images/shopping-cart.jpg"></img></span></div><div ><span class="jqcart-total-cnt">0</span></div></div>')", где \u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437 и есть фраза "Оформить заказ". Просто удалите ее. Если захотите написать что то другое, воспользуйтесь онлайн кодировщиком URL, где вашу новую надпись необходимо будет перевести в такой же формат.
Гость 01.09.2018 17:03
При нажатии на ОТПРАВИТЬ ЗАКАЗ на майл не отправляется. Где ошибка?
Гость 01.09.2018 17:41
Как можно отправленные заказы хранить на своем сайте?
Incode 01.09.2018 18:48
на майл не отправляется
... или попадает в спам. А если действительно не отправляется, то причин может быть куча. Начиная с того, что не верно указан Email получателя или тестируете на локальном сервере. Не зная всех обстоятельств, тут можно прямо к гадалке направляться.
Как можно отправленные заказы хранить на своем сайте?
Изучить работу с базами данных и сохранять там. Или же более просто путь - сохранять данные в обычных текстовых файлах. В том же PHP, есть много полезный функций по этому вопросу: file_put_contents/file_get_contents, fopen + fread/fwrite и т.д. - найдёте в официальной документации
Гость 02.09.2018 08:28
Спасибо! Майлы уже отправляются. С базами данных буду разбираться
Гость 02.09.2018 08:57
Большой список наименований. Как можно везде убрать фото к продуктам,чтобы форма заказов получилась более компактна?
Гость 05.09.2018 19:29
Спасибо за корзину. Помогите пожалуйста.
сейчас при нажатии на отправить заказ, без введеного телефона, блок ошибки появляется сверху под фразой Контактная информация. Подскажите , как перенести этот блок вниз. под блок комментарий или под кнопкой.
У меня корзина на отдельной странице и по верстке ошибка сверху не очень смотрится. Спасибо
Гость 06.09.2018 13:17
Добрый день!
Подскажите как организовать нумерацию в корзине?
Гость 10.09.2018 17:17
Добрый день! что нужно изменить чтобы показывала общую сумму корзина а не количество добавленых позиций?
windcrack 10.09.2018 21:35
Кто подключал хоть 1 API к ней отпишите плиз нужна срочно инфа!
Гость 14.09.2018 05:47
Подскажите как организовать нумерацию в корзине?

Чтобы организовать нумерацию нужно что бы она где то хранилась, вы где собираетесь её хранить?
Гость 14.09.2018 05:59
сейчас при нажатии на отправить заказ, без введеного телефона, блок ошибки появляется сверху под фразой Контактная информация. Подскажите , как перенести этот блок вниз. под блок комментарий или под кнопкой.

Замените эту часть кода
sendOrder: function(e) {
      e.preventDefault();
     /* var $that = $(this);*/
      if ($.trim($('[name=user_name]', $that).val()) === '' || $.trim($('[name=user_phone]', $that).val()) === '') {
        $('<p class="jqcart-error">Пожалуйста, укажите свое имя и контактный телефон!</p>').html('.zamena').delay(3000).fadeOut();
        return false;
      }

И эту
orderform = '<p class="jqcart-cart-title">Контактная информация:</p><form class="jqcart-orderform"><p><label>Ф.И.О.:</label><input type="text" name="user_name"></p><p><label><font id="wb_uid7"><strong>Телефон:</strong></font></label><input type="text" name="user_phone"></p><p><label>Email;</label><input type="text" name="user_mail"></p><p><label>Адрес</label><input type="text" name="user_address"></p><p><label>Комментарий</label><textarea name="user_comment"></textarea></p><p class='zamena'></p><input type="hidden" name="text"><input type="hidden" name="sum"><input type="hidden" name="summ"><p><input type="submit" value="Отправить заказ"><input type="reset" value="Вернуться к покупкам"></p></form>';
Гость 14.09.2018 06:05
Как можно везде убрать фото к продуктам

Убери столбец с ID из этой строки кода, у меня немного изменена разметка, так что найди orderPreview и удали тэг с ID
orderPreview = '<p class="jqcart-cart-title"><font id="wb_uid1">Корзина</font><span class="jqcart-print-order"></span></p><div class="jqcart-table-wrapper"><div class="jqcart-manage-order"><div class="jqcart-thead">/*<div><font id="wb_uid2">ID</font></div>*/<div><font id="wb_uid3"><i>Фото</i></font></div><div><font id="wb_uid4">Наименование</font></div><div><font id="wb_uid5">Цена</font></div><div><font id="wb_uid6"><strong><i>Количество</i></strong></font></div><div>Сумма</div><div>Удалить</div></div>';

Потом удали эту часть, которая выводит фото
orderPreview += '<div class="jqcart-small-td jqcart-item-img"><img src="' + cartData[key].img + '" alt=""></div>';
Гость 14.09.2018 06:07
Как можно отправленные заказы хранить на своем сайте?

Только через базу данных.
Гость 17.09.2018 11:31
Чтобы организовать нумерацию нужно что бы она где то хранилась, вы где собираетесь её хранить?

Разве нельзя пронумеровать строки без баз данных (хранилищ)?
Гость 17.09.2018 18:18
Метод для закрытия окна есть?
Гость 20.09.2018 14:24
Друзья всем привет. Не подскажите почему когда корзина сделана на отдельной странице, код был уже выше. При оформлении заказа, не удаляются товары с корзины.
Тут девушка предлагала решение, но оно упорно не хочет работать.
Кто знает подскажите!
Гость 20.09.2018 19:26
Здравствуйте. Не корректно работает скрипт. При нажатии на кнопку "Отправить заказ" если кликать много раз может отправиться много запросов на PHP обработчик. Подскажите пожайлуста в чем проблема??
Гость 21.09.2018 07:03
Здравствуй! Подскажите пожалуйста как и где сделать, что бы корзина отправлялась если общее кол-во товара больше 10. Спасибо
Гость 24.09.2018 20:05
Здравствуй! Подскажите пожалуйста как и где сделать, что бы корзина отправлялась если общее кол-во товара больше 10. Спасибо

Расскоментируйе .jqcart-table-wrapper в qcart.css и убирете коммент из стиля
.jqcart-table-wrapper {
height: 150px;
padding: 0 5px;
overflow-x: auto;
}
Гость 08.10.2018 09:39
Подскажите, как сделать минимальную сумму заказа
Если б я просто подсказал, то вы бы сделали сами? ;)) Забирайте. Добавил параметр minSum. Посмотрите в примере.

Подскажите, как изменить минимальную сумму заказа в примере? Не пойму откуда берется параметр 2000. Спасибо.
Страница 4 из 28  
Ваш комментарий:
X