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

Страница 30 из 33  
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 методов мне более чем хватает)) В любом случае Вам спасибо огромное, что не забываете про нас!
Гость 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]]?
Страница 30 из 33  
Ваш комментарий:
X