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

660 комментар

Страница 26 из 27  
Гость 09.02.2016 18:02
Спасибо Огромное! исчезает теперь сообщение о отправке. А Вы можете подсказать, если я хочу кастомно изменить вид корзины, мне нужно новый дизайн в скрипт зашивать?
Incode 09.02.2016 19:05
если я хочу кастомно изменить вид корзины
Зависит от того, что именно вы хотите менять. В большинстве случаев, достаточно поработать на стилями в CSS-файле. Вот html-структура корзины в модальном окне:
Показать код
Смотрите на класс элемента, который хотите кастомизировать, или на класс его родительского элемента, ищите в CSS-файле ("jqcart.css") данный селектор и меняете или дополняете нужными свойствами.
Гость 11.02.2016 16:05
Здравствуйте, скажите пожалуйста, возможно ли сделать что бы покупатель сам мог вносить кол-во товаров в корзине, то есть, окошко кол-ва товаров для позиций товаров было регулируемым как инпут кликнул, внёс, а оно пересчитало само? (у меня сайт по продаже художественного бисера)Заранее большое спасибо Вам.
Incode 11.02.2016 16:16
то есть, окошко кол-ва товаров для позиций товаров было регулируемым
Не понял вашу задачу. В данный момент, количество регулируется нажатием на кнопки "+" и "-". А как бы вы хотели? Вписывать количество вручную?
Гость 11.02.2016 19:20
ну как бы да, что бы была такая возможность
Incode 11.02.2016 19:58
ну как бы да
Ок. Архив перезалил. Замените файл "jqcart.min.js".
Гость 12.02.2016 04:27
Спасибо Огромное, теперь вообще супер! Вы знаете, неловко просить, так как Вы и так проделали огромную работу, тем более проблема специфическая, а именно, при добавлении более 6 разных товаров, слой корзины расширяется, а по идее нужно сделать некую прокрутку что ли, что бы если товаров более определённого колл ва строк, то тогда прокрутка, и инпуты формы наверно более клёво смотрелись бы, если бы были расположены в горизонтальной проекции, а не столбиком как сейчас, но это уже детали как бы, ещё раз спасибо Вам большое))
Гость 12.02.2016 18:00
Здравствуйте, очень впечатлил Ваш вариант корзину, пожалуй он даже лучший из существующих в общем доступе, присоединяюсь к предыдушему коментатору, также хотел поинтересоваться, возможно ли сделать передачу картинок товара в корзину и на почту?
Incode 12.02.2016 19:20
возможно ли сделать передачу картинок товара в корзину и на почту?
Я постараюсь учесть все пожелания, когда у меня появится очередное "окно" в работе, но сейчас, к сожалению, у меня время может найтись только на исправление багов и мелкие доработки уже существующего варианта.
Гость 15.02.2016 14:49
Будем ждать, очень интересный вариант корзины, ещё раз спасибо Вам за всё))
vaco 27.02.2016 00:29
INCODE.PRO, только-только запустив для клиента работающий магазин, открыл для себя твой метод.
И понял, что всё, что месяцами кропотливой работы сделано до прочтения этой страницы, было сделано зря.
Низкий поклон, наиогромнейшее спасибо за лучший код для корзины!
Ты лучший!
Incode 27.02.2016 01:51
@vaco, спасибо за тёплые слова, но код еще очень далёк от идеала. Рад, что вам пригодился ;)
Гость 27.02.2016 12:31
FILE_APPEND необходимо указать и в первой строке, иначе файл просто затирается и пишется заново.
Лучше писать лог в отдельную папку и запаролить ее, т.к все заказы будут доступны кому угодно.
Кстати, а как если поставить все в подпапку указать путь к логу (если все стоит в корне, то указав в hadler.php путь papka/cart_data_log.txt все работает, а если в подпапке то не хочет papka/papka/cart_data_log.txt)?
И еще вопрос, из-за чего могут приходить пустые заказы, т.е вообще без данных?
Гость 27.02.2016 12:33
Добрый день, прикрутил корзину к сайту и столкнулся с проблемой вызова корзины из двух и более мест.
Данный код - <button id="open">Открыть корзину (вызов метода openCart)</button>
открывает корзину только из одного места.
Подскажите как вызвать окно корзины с разных мест и страниц.
Я в этом деле дилетант и прошу если можно более развернутый ответ, так сказать для чайника.
Спасибо.
Incode 27.02.2016 15:53
Лучше писать лог в отдельную папку
О каком-либо логировании, речь вообще не шла )) Обработчик (handler.php), в принципе, был сделан только, чтобы образно показать, как можно обрабатывать данные заказа и вывод в файл (cart_data_log.txt) - тоже только для того, чтобы проще было понять структуру данных. Как хранить, где хранить и хранить ли вообще эти данные - это уже личное дело каждого.
из-за чего могут приходить пустые заказы, т.е вообще без данных?
Протелепатировать же я не могу )) Попробуйте мониторить в консоли. Там видно, какие данные уходят в запросе, могут отображаться ошибки и т.д. Проверьте, чтобы все необходимые значения были в кнопке и в нужном порядке. Это можно проверить, открыв исходный код страницы и пробежавшись по каждой кнопке.
Incode 27.02.2016 16:00
Подскажите как вызвать окно корзины с разных мест и страниц.
Ваша ошибка в том, что в пределах одной страницы не может быть два и более элемента с одинаковым ID. Это правило можно распечатать, повесить над кроватью и повторять, как мантру, утром и перед сном :) ID - это уникальный идентификатор, а для групп элементов, можно использовать классы. Поэтому, измените:
<button id="open">
<!-- на -->
<button class="open">
И не забудьте изменить селектор элемента в JS: с '#open' на '.open'
Гость 27.02.2016 17:05
И не забудьте изменить селектор элемента в JS: с '#open' на '.open'

Спасибо огромное - помогло)))
Гость 27.02.2016 19:09
Огромный респект за такую работу. Столько времени искал и ждал адекватную корзину с отправкой заказа на почту. И вот наконец оно. Сильно не хватает прокрутки модального окна, на айфоне неюзабельно, а это критично. Можешь исправить пожалуйста? И еще раз спасибо!)
Incode 27.02.2016 19:44
не хватает прокрутки модального окна ... Можешь исправить пожалуйста?
Сделаю, но позже. Я уже писал выше, что сейчас просто нет достаточного количества свободного времени на какие-то существенные изменения. Но ваше пожелание возьму на заметку.
Гость 27.02.2016 20:26
Я сделал так
В Файле jqcart.css находим стоку .jqcart-checkout и добавляем
overflow: auto; /* scroll; Добавляем полосу прокрутки */
height: 400px; /* Высота блока */
white-space: nowrap; /* Запрещаем перенос строк */
Если что не так,то поправьте или удалите мою писанину.
кстати, email в корзине не проверяется, а только имя и телефон.
vaco 02.03.2016 10:14
@Incode, ещё один момент для совершенства без того прекрасного кода=)
При заказе от десяти разных по "ID" товаров в приходящем письме с десятой строки ломается таблица, каждый раз по разному. Над таблицей выходит десятый "ID" товара. Помимо, по таблице с переодичностью появляется замена одной буквы тремя символами "� �". Причём в cart_data_log.txt всё в порядке, хоть сто пунктов, хоть 10.
Incode 02.03.2016 12:11
@vaco, спасибо за замечание, проверю.
Думаю, что в конце статьи добавлю "логи изменений" с датой этих изменений, чтоб вам было проще ориентироваться. Но сделаю это и корректировку письма уже ближе к выходным.
@vaco, протестировал отправку на почту заказа с разным кол-вом товаров (от 5-ти до 30-ти разных позиций) и проблем не возникло. При этом, пробовал отправлять на разные почтовые сервисы. Скорее всего, что проблема у вас с кодировкой. В идеале - это кодировка всех файлов "UTF-8 без BOM" и сравнение таблиц в базе "utf8_general_ci". Проверьте для начала этот момент.
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 показан, возможно где-то по быстрому))) можно код вставить?
Спасибо.
Страница 26 из 27  
Ваш комментарий:
X