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

Страница 33 из 33  
Гость 08.02.2016 01:06
Как по мне так всё очень здорово, огромнейшее человеческое спасибо, не только за корзину, но и за умение держать слово, это достойно уважения. Единственный момент, можно ли сделать крестик удаления товара справа, и такой же красненький, тот крестик посимпатишней был)) Спасибо ещё раз.
Incode 08.02.2016 01:41
можно ли сделать крестик удаления товара справа, и такой же красненький
Можно. В принципе, я над стилями практически не работал, т.к. они должны больше соответствовать стилю сайта, к которому корзина прикручивается и достаточно легко меняются в CSS-файле. Но если это проблематично для вас, то без проблем. Архив перезалил, скачайте, плиззз.
Гость 08.02.2016 17:25
Здравствуйте, я прошу прошения, но я знаю только зачатки джавы, и немного html в данный момент почему то не отправляются письма, можно ли получить простейший обработчик php где только почту надо поменять, и письма отпралялись бы? Спасибо.
Incode 08.02.2016 18:18
простейший обработчик php где только почту надо поменять
Именно такой обработчик и есть в архиве. Переменной $admin_mail (handler.php, строка 18) прописываете свой Email и всё. Может быть вы пытаетесь отправлять на локальном сервере (OpenServer, XAMPP и т.д. или, не дай Бог, Denwer)? Там стоят заглушки, отправка имитируется и письма "сбрасываются" в определенную папку, в виде текстовых файлов. Если тестируете на хостинге, то проверьте - может письмо в спам попало.
Гость 08.02.2016 21:08
все файлы на сервере, почту указал корректно, нажимаю отправить, и ничего не происходит. Если напрямую перехожу на страницу обработчика выдаёт ошибку: Parse error: syntax error, unexpected '[' in /home/users/9/9_______/domains/................./php/handler.php on line 69
Incode 08.02.2016 21:51
выдаёт ошибку
У вас просто древняя версия PHP и она не поддерживает короткий синтаксис определения массивов. Я даже в комментариях там указывал это.
$arr = []; // PHP 5.4+
$arr = array(); // PHP < 5.4

Замените в коде следующее:
// эту строку
$headers   = [];
// на эту
$headers   = array();
// и эту часть
$response = [
    'errors' => !$send_ok,
    'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
// на эту
$response = array (
    'errors' => !$send_ok,
    'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
);
Гость 08.02.2016 23:04
Спасибо огромное!)) Всё зафурычило. Возможно ли сделать, что бы надпись допустим, принято в обработку через 1-1,5 секунды сама убиралась, и страница принимала дефолтный вид? Тогда вообще было бы здорово) Ещё раз спасибо.)
Страница 33 из 33  
Ваш комментарий:
X