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

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

Страница 29 из 32  
Гость 11.04.2016 01:23
Здравствуйте, подскажите пожалуйста, я делаю через конструктор сайтов свой сайт, и прикрутил Ваш плагин к сайту, внёс переменные в нужные места, и почему то при публикации на сервер, файл handler.php отображается с кодировкой windows-1251 хотя я в проекте задал utf-8
Показать код
вот попытаюсь картинку приложить что характерно, те переменные которые я внёс, в коде хорошо отображаются,а на почту приходит - половина кракозябры, половина нормально, при этом при всём, если я принудительно на сервере меняю кодировку страницы обработчика на utf-8 то всё чётко становится. Подскажите плиз где что поменять, что бы сервак сразу кодировал эту страницу как utf-8 ?
Incode 11.04.2016 02:10
на почту приходит - половина кракозябры
Ответить сходу на вопрос, из-за чего это может быть, я не смогу. Хотя бы потому, что я понятия не имею о том, что это за "конструктор сайтов" и с чем его едят. Может быть в нём причина, а может быть вы что-то не так сделали - гадание на кофейной гуще.
где что поменять
Попробуйте дописать в .htaccess следующую строку:
AddDefaultCharset UTF-8
Но и в этом случае, не исключены "нежданчики", если кодировка у вас на сайте, так сказать, гуляет. Письма могут приходить с нормальной кодировкой, а какие-то страницы отображаться не правильно. Второй вариант - это создать документ в самом конструкторе и скопипастить туда код из файла-оригинала. Иногда такое прокатывает. В общем, попробуйте эти варианты, а там посмотрим.
Вадим 11.04.2016 21:28
Я для удобства работы создаю расширения в специальной программе (прога от конструктора) в проге есть галочка - обрабатывать этот файл, при публикации на предмет переменных. Я подозреваю что когда прога генерирует код, она какие то метки свои добавляет. Как бы сделать так что бы в самом обработчике была такая команда, что бы сервер к этой странице с обработчиком автоматом применял utf-8, и отображал эту страницу на хостинге с utf-8 кодировкой? Спасибо что уделили внимание моему вопросу.
Incode 11.04.2016 21:39
что бы сервер к этой странице с обработчиком автоматом применял utf-8
Я вам уже написал, что нужно сделать. Добавив в .htaccess вышеуказанную строку, вы задаёте кодировку для всего сайта (если .htaccess находится в корне). Можно еще прописать заголовок в сам файл-обработчик:
header('Content-type: text/html; charset=utf-8');
Вадим 11.04.2016 22:27
К сожалению почему то не помогает , внёс как Вы и говорили в обработчик, и файл создал .htaccess //joxi.ru/BA0nXwRFBX7pbm
Помогает только ручной выбор кодировки, но это неправильно как то
Incode 11.04.2016 23:35
К сожалению почему то не помогает
Вадим, я бы с удовольствием вам помог, но пытаться разобраться с тем, с чем никогда ранее дела не имел, да еще и дистанционно, не видя перед глазами всех возможностей, настроек и прочего - это выше моих сил. За восемь лет практики, я ни разу не имел дела с какими-то конструкторами. Как они работают, какие у них возможности или ограничения - для меня тайна покрытая мраком.
Гость 12.04.2016 09:53
Здравствуйте. Спасибо Вам за корзину. Она замечательно подошла к моему сайту. Только у меня один вопрос. Можно сделать так, чтобы товар располагался не в один столбик, а, например, по три в ряд? Как это можно сделать?
Incode 12.04.2016 11:38
чтобы товар располагался не в один столбик, а, например, по три в ряд
Если вы говорите о выводе товаров на страницу, то работа плагина никак не зависит от этой структуры, а зависит только от одного элемента - кнопки, которая может иметь любой вид и располагаться где угодно. Поэтому, как расположить товары: в ряд, в столбик или по диагонали - это уже зависит от ваших личных пожеланий, вкусов и фантазий.
Если вы не знаете, как можно расположить элементы по три в ряд, то вот я вам набросал пару примеров реализации.
DSergey 12.04.2016 17:44
Добрый день, спасибо за вывод на печать.
А можно вывести на печать таблицу с ценой без Контактной информации и по умолчанию сразу на принтер?
Спасибо.
Гость 13.04.2016 11:47
Доброго времени суток!Спасибо за труды все ОФИГЕННО! Маленькие вопрос как сделать чтобы блок с товарами отображался по центру страницы а слева, прошу прощения за нубский вопрос. Спасибо
Гость 13.04.2016 11:51
извините! спасибо сам погуглил и справился!)
Гость 14.04.2016 00:54
Как увеличть количество товаров? Спасибо
Incode 14.04.2016 01:26
Как увеличть количество товаров?
Вопрос крайне не корректный. Если имелось в виду то, что в демо всего три товара, а вы хотите больше, то вопрос еще больше добавляет недоумений. У вас должен быть сайт, который вы пишите сами или используете какую-то CMS. На сайте типа "интернет-магазин", за очень редким исключением, используется база данных, куда заносятся товары, а для пользователя (посетителя вашего сайта) эти товары выводятся на экран. Остается дать пользователю возможность заказать эти товары. Так вот корзина и предназначена именно для этой цели, но не управлением списком товаров или их выводом. Если у вас статичный сайт (без базы данных), то можете копировать блоки из примера и, изменяя их данные, добавлять новые товары. Каждый такой блок - это div с классом "item_box" и всё его содержимое.
Гость 14.04.2016 11:47
@Incode, спасибо за наставления (учу матчасть).
Гость 16.04.2016 20:55
Здравствуйте! Warning: mail(.....logs/php_mail.log): failed to open stream: No such file or directory in ....public_html/10/php/handler.php on line 77
{"errors":false,"message":"\u0417\u0430\u043a\u0430\u0437 \u043f\u0440\u0438\u043d\u044f\u0442 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443!"}
Incode 16.04.2016 21:30
Warning: mail(.....logs/php_mail.log): failed to open stream: No such file or directory in
Очень похоже, что у вас нет лог-файла или неверно указан путь к нему в настройках сервера. Это уже вопрос больше к вашему хостеру, если у вас шаред-хостинг или, если у вас VDS/VPS, то к тому, кто делал (или не делал) настройки.
И вот интересно, а письмо при этом отправляется и приходит нормально?
Гость 16.04.2016 21:42
@Incode, приходит письма все отлично! но видно ответа об успешной покупке со стороны сервера. Спасибо за ответ
@Incode, можно до бесконечности клацать на кнопку отправить заказ и будут приходить множество писем. версия php 5.5
все заработало! спасибо на серве используются виртуальный пути... Спасибо за труды... Удачи Вам, все отлично я рад до слез)))
Гость 18.04.2016 17:02
Добрый день!
Спасибо за замечательный плагин. Прекрасно работает.
Но у меня возникло одно затруднение. Я хочу использовать плагин на странице 2 раза. Один раз в качестве "Добавить товар в избранное", второй раз в качестве корзины (как он сейчас есть).
Бьюсь уже несколько дней и не получается его переделать, а именно: на странице 2 раза инициализаирую плагин(новый имена корзины, элемента add_item) и т.д. я в параметрах создаю для каждого разные. Также переделал значение куки (создал его как параметр) и все работает, но только либо "корзина" либо добавить в "Избранные товары".

Не могли бы вы допилить плагин, чтобы на странице его можно было вызывать (и соотв. привязывать к элементам) много раз, а не один (и название куки, чтобы в параметрах передавалось при инициализации).

Буду Вам очень благодарен.
Incode 19.04.2016 00:22
Не могли бы вы допилить плагин
Я до выходных основательно занят, поэтому придется отложить этот вопрос. Но в любом случае, я не могу понять, что конкретно вы хотите сделать. В моем понимании - это две кнопки у товара: добавить в корзину и добавить в избранное. С первым всё понятно, но с "избранным" не очень. Что должно происходить по нажатию на такую кнопку, какая последовательность действий? Опишите это подробней и когда вернемся к этому вопросу, будем меньше тратить время на всякого рода уточнения.
Гость 19.04.2016 17:35
Интересует вопрос. Я создал 1 форму див (она клонируется от кол-ва элементов массива), в каждую из массива мне приходят данный (товары), название и цена, но при нажатии кнопки "добавить" добавляется один и тот же продукт, это из-за того, что data-id="5" постоянный (<button id="Product" class="add_item" data-id="5">BYE</button>). Как сделать чтобы оно менялось в зависимости от количества созданных форм, или элементов массива ar =[[яблоко,100],[апельсин,150]]?
Гость 20.04.2016 11:42
Я до выходных основательно занят, поэтому придется отложить этот вопрос. Но в любом случае, я не могу понять, что конкретно вы хотите сделать. В моем понимании - это две кнопки у товара: добавить в корзину и добавить в избранное. С первым всё понятно, но с "избранным" не очень. Что должно происходить по нажатию на такую кнопку, какая последовательность действий? Опишите это подробней и когда вернемся к этому вопросу, будем меньше тратить время на всякого рода уточнения.


Да ни чего не должно происходить, просто товар также помещается в корзину/избранное (храниться в куке/хранилище), на странице также в определенном месте изменяется кол-во товаров (только это не товаров в корзину а товаров в избранном). При клике на избранное, скрипт на сервере может считать куку и просто вывести эти товары.

Тут может быть множество применений, например сайт недвижимости, удобно добавлять (отмечать) избранные объекты. Опять же интернет магазин, можно ваш код корзины запустить трижды:
1.Как корзина покупок (jqcart_basket своя кука/хранилище)
2.Как избранные товары (jqcart_mark своя кука/хранилище)
3.Как товары выбранные для сравнения по параметрам (jqcart_param своя кука/хранилище)

Вот только заставить плагин работать (запустить), хотя бы два раза на странице (два экземпляра со своими настройками) не получается.

По сути если это допилить, то получается уникальный плагин, который может иметь множество применений.
Очень надеюсь на вашу помощь.
Incode 23.04.2016 17:28
Да ни чего не должно происходить
Простая кнопка, без установки на неё каких-либо плагинов или обработчиков событий, даст именно такой эффект :)
просто товар также помещается в корзину/избранное
Я вашу мысль понял, но сделать это, изменив всего пару строк, не получится. Для такой задачи, как у вас, придётся основательно менять логику плагина и прикручивать "костыли". В любом случае, на это нужно время. Т.к. вы не регистрировались, то сообщить о результате я не смогу, поэтому просто следите за темой, если вы не нашли еще какое-то другое решение.
regtorg 25.04.2016 15:51
Зарегистрировался, с нетерпением буду ждать переделанный плагин.
Гость 30.04.2016 11:43
Хочу поблагодарить вас за плагин - как раз то, что я искал. Но как всегда есть пожелания))

1)6*0.6 = 3.5999999999999996 $ - не порядок, надо округлить значения, пробовал всюду round (x,2) ставить, почему-то не работает

2)кнопку купить, вставляю в последний столбец таблицы и пишу в ней данные, которые есть в этой же строке. Можно ли (опционально) вытягивать наименование и цену из соседних столбцов текущей строки?
Incode 02.05.2016 15:28
6*0.6 = 3.5999999999999996 $ - не порядок
Согласен. Поправил.
Можно ли (опционально) вытягивать наименование и цену из соседних столбцов
Я специально сделал так, чтобы у кнопок не было привязки к разметке. Ведь у всех она разная и всего предусмотреть просто нереально. Конечно же, сделать это можно, но:
1. До конца месяца, у меня не будет времени - это точно.
2. Востребовано это будет существенно меньшим количеством пользователей. Я бы сказал больше... вы пока единственный, кто задал подобный вопрос из около 3000 скачавших.
3. А есть ли смысл изгаляться - большой вопрос в принципе.
Страница 29 из 32  
Ваш комментарий:
X