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

Страница 3 из 32  
paulwoop 08.03.2020 15:02
Добрый день. Подскажите, как передать сразу количество в корзину?
dexter113310 19.03.2020 19:58
Здравствуйте, помогите не могу реализовать чтобы считал доставку ( 2 выбора 600 руб и 1500 руб, а если сумма больше 10000 то бесплатно ) заранее огромное спасибо
Гость 20.03.2020 13:36
Добрый день, есть такой вопрос: хочу прикрутить корзину к мультиселлер магазинчику и нужно чтобы она отправляла заказ на емейл хозяина товара взятый из БД,а корзина отправляет на прописанный в ней вручную адрес.
Вот такой код, отправляет сообщение владельцу товара:
Показать код

Пытаюсь объединить вот так:
Показать код

Но ничего не выходит.Письмо не отправляется. Может подскажете в чем не состыковка и как исправить?
Гость 01.04.2020 16:29
Доброго дня, подскажите пожалуйста.
После изменений полей в js (перевод текстовых данных с рус. на анг.)
Изменениий после открытия в браузере не происходит.
Даже после удаления папки с js , все остается в рабочем состоянии и не обновляется в браузере. Кэш удален.
Гость 04.04.2020 20:11
Добрый день. Нашел Вашу корзину. Отличная вещь для сайта. В программировании полный ноль. Подскажите пожалуйста как сделать, чтобы мне через кнопку передавался, например, размер футболки? Я так понимаю это нужно делать через data-атрибут.

Но делаю ссылку, вот так:
<button class="add_item" data-id="7" data-title="Bugatti Veyron Super Sports" data-price="200" data-razmer="XL" data-img="http://site.com/img/photo.png">Добавить в корзину</button>

и ничего не происходит. Где ещё нужно изменить, чтобы передавался и этот атрибут.

Помогите пожалуйста. Очень сильно важно.

Спасибо за понимание.
Incode 04.04.2020 20:45
Я так понимаю это нужно делать через data-атрибут
Да, именно через него.
и ничего не происходит
А что вы ожидаете, чтобы происходило? Если добавить значение размера в письмо, то найдите в обработчике (handler.php) цикл с товарами заказа и добавьте еще одну колонку:
<td style="border: 1px solid #333333; padding: 5px;">'.$item_data['razmer'].'</td>
vipcrim 10.04.2020 15:43
Всем доброго дня, я вообще больше по SEO, в коде не силён.
Сейчас прикручиваю корзину к сайту [URL="https://santehnik-simferopol-vizov.ru/ten-boiler.html"]Тэны на бойлер в Симферополе
У[/URL]видел нормальную корзину тут, и почти прикрутил её к сайту.
Но когда тестил - понял, что она никуда не годится.
Посмотрите её на мобильном устройстве.
Всплывающее окно перегораживает весь экран мобилки,кнопку заказать уже не нажмёшь
По SEO корзина должна быть или в фрейме, чтоб была прокрутка или ещё как.
Готов отблагодарит, если кто сможет сделать всплывающее окно во фрейме или с прокруткой вниз, чтоб можно было 5 товаров заказать с мобилки.
Кому надо услуги по SEO - обращайтесь https://vk.com/id122929995
Гость 14.04.2020 15:35
Подскажите как вытащить данные и добавить в бд в js вообще ни чего не понимаю , под сайт реализовал все четко но бд чет не получается
Гость 14.04.2020 15:37
данные имеется ввиду информация про человека которую он пишет в форме
Гость 15.04.2020 17:41
Добрый день, спасибо Вам - корзина весьма хороша. В том варианте что предоставлен работает отлично, но вот возникла необходимость отправлять заказы на разные адреса в зависимости от владельца товара (условимся что в корзине товары одного владельца). В кнопке вызова прописал так:
<button class="add_item" data-id="<?php echo $rowProduct['id']; ?>" data-sell="<?php echo $rowProduct['sellerid']; ?>" data-title="<?php echo $rowProduct['ptitle']; ?>"  data-price="<?php echo $rowProduct['nprice']; ?>" data-img="images/products/<?php echo $rowthumb['pimage']; ?>"><font color="#fff">Сделать заказ</font></button>

data-sell="<?php echo $rowProduct['sellerid']; ?> - присваивает id владельца товара.
Далее в handler.php нужно сделать запрос на выборку email по данному id
Показать код

Думаю так (во всяком случае с конкретно прописаным id работает четко) И вот здесь не разберусь, что мне нужно подставить в условия WHERE ? надеюсь на Вашу помощь.
Гость 21.04.2020 20:23
Уважаемый Incode, скажите пожалуйста такую очень важную вещь для меня. Где в файле jqcart.min изменить значение, чтобы окно "Спасибо Ваш заказ принят", исчезало через 10 секунд, а не так, как сейчас? Что-то нигде не найду. Спасибо за помощь.
Incode 22.04.2020 23:33
Где в файле jqcart.min
Работайте с файлом jqcart.js, который лежит в папке "developer". После этого можете его минифицировать и заменить им файл jqcart.min.js или уже сразу подключать его.
Примерно на строке 175, найдите метод "sendOrder". Внутри него метод $.ajax(). Вот в его callback-функции success и можно добавить таймер (setTimeout) на определенное время, после которого закрыть корзину.
Гость 27.04.2020 18:02
СПАСИБО Incode За вашу работу!!!
Подскажите пожалуйста, что нужно сделать чтобы при загрузке или обновлении странице корзина с товаром уже была в открытом виде.
Спасибо заранее
Incode 27.04.2020 19:40
корзина с товаром уже была в открытом виде
Вызываете открытие таким образом:
$.jqCart('openCart');
Гость 27.04.2020 20:15
СУПЕР!!! поставил в head и получилось :) СПАСИБО Вам ОГРОМНОЕ!!!
Думается благодаря вашему труду многим как и мне становится интересно и полезно осваивать JS. От души желаю Вам здоровья и благополучия!
Гость 29.04.2020 03:15
можно ли отправлять данные на базу
Гость 29.04.2020 03:17
как можно отправлять данные в базу не можете ли помочь
Incode 29.04.2020 15:14
как можно отправлять данные в базу не можете ли помочь
Вы по сути просите провести лекцию по работе с базами данных. В файл handler.php передаются данные заказа, а что дальше с ними делать - решать вам. Сейчас там реализована только отправка на почту. Если нужно, то можете эти же данные записывать в БД.
Гость 03.05.2020 15:07
Здравствуйте! Понимаю, что я со своим вопросом буду выглядеть как «чайник». Но получается это правда :) Давно уже нашел Вашу корзину и начал делать сайт для своего друга (сам пишу html, css). Сейчас появилось свободное время чтобы его закончить, но что я обнаружил: Нормально добавляется и удаляется товар в корзину и если не внести данные в форму, то она «ругается». Но если всё внести правильно и нажать на кнопку «отправить», то ничего не происходит... Сначала я начал винить себя что «дорабатывая» Вашу корзину для себя я что-то испортил. Поэтому решил сделать эксперимент как говорится «с чистого листа». Заново скачал файл с Вашего сайта, разархивировал, в файле handler.php записал свой e-mail и целиком поставил Вашу папку на свой работающий сайт (не локальный). К сожалению при попытке отправить, по прежнему ничего не происходит. Вижу что у других интегрировать в сайт вашу корзину получается, а у меня нет, поэтому могу сделать вывод что я что-то должен сделать ещё к Вашей папке или изменить ещё что-то в каком-то файле, но не пойму что. Подскажите пожалуйста.
Гость 05.05.2020 13:54
что я что-то должен сделать ещё к Вашей папке или изменить ещё что-то в каком-то файле, но не пойму что.

Версию php проверяли в handler.php? Возможно на сайте используется php < 5.4,
тогда нужно раскомментировать строки /* */ 85-90 и закомментировать 80-83 /* */
Valery 05.05.2020 17:21
@Гость, Спасибо за ответ.
Попробовал оба варианта, к сожалению они не работают.
Если честно, я уже неделю ищу где ошибка :)
Версия PHP 5.4.45
В Вашей папки с файлами я только внёс на 17 строке в handler.php свой e-mail, переименовал самую главную папку и больше нечего. Такое впечатление что чего-то не хватает для связи между файлами jqcart.min.js и handler.php. Нажимая на кнопку отправить, вижу браузер пытается отправить, так как он проверяет текст описания на грамотность языка. Но нет какой-либо реакции по отправки.
А так-же что интересно, когда заполненный заказ я отправляю на печать, то под модальном окном выбора принтера для печати теряются данные заказчика и не распечатываются (сам заказ распечатывается нормально). А в браузере данные заказчика остаются.
На этом же хостинге (папкой выше) у меня стоит php обработчик формы и нормально работает.
Я зарегистрировался и оставил свой e-mail на Вашей странице (если захотите контактировать на прямую :)
Заранее спасибо!
P.S. Вот я чайник, каким-то образом оказалось что я сообщение отправлял в тему о старой корзине :) Сейчас повторяюсь в новую
Гость 05.05.2020 18:41
@Valery, что у меня получилось
(я не автор плагина, мне пару лет назад очень сильно помогли с настройкой корзины в комментариях, ребят, спасибо ))) и теперь я пробую помочь вам).
При тестировании на локальном сервере получилось следующее:
- плагин не работает, если он лежит в отельной папке внутри сайта.
-- все заработало, когда папка php c handler.php и файлы из папки js были перенесены в корневые папки сайта (т.е. www - js и php -)
-- в этом случае заказы отправляются как со страницы html в корне (тогда переносим и css в корневую папку с css), так и из папок сайта, где лежит только страница с товаром.

Насчет распечатки заказа, да, со страницы не печатается, данные заказчика не подцепляются. Это не принципиально, поскольку закачку приходит заказ в форме таблички и на вашу почту приходит также дубль этого заказа со всеми данными, и оттуда вы можете его распечатать.
Valery 05.05.2020 21:32
@Гость, Большое спасибо что откликнулись!
Скажу честно, от экспериментов за это время, уже кругом идёт голова :(
Я сделал всё как Вы посоветовали, все файлы перенёс из папок в корневой каталог. В www.html файле изменил соответственно все относительные адреса на новое расположение файлов. К сожалению нечего не получилось.
Потом подумал и решил провести ещё один эксперимент: Обычно в формах на html страницах указывается адрес к php обработчику. Здесь как я понимаю такой адрес должен быть прописан в файле jqcart.min.js. Единственное место которое я вижу, это на строке 24 слеш заменить на адрес: handler.php. Заменил. Но к сожалению не помогло.
Эксперименты провожу на рабочем (не локальном сервере).
Возможно у Вас есть ещё какие-нибудь идеи? :)
Гость 05.05.2020 21:51
@Valery, перед тем как отправить вам комментарий, протестировала плагин 4 раза и все разы он сработал корректно в разных вариантах страниц. Письма упали во временную папку. После отправки комментария, все смолалось в 0. Даже на рабочем сайте тестовый плагин не запустился, поверила на нем на всякий случай. Что-то есть ещё в настройке - вспомню, напишу.
Valery 05.05.2020 22:26
@Гость, Да, ещё что интересно: Когда я примерно неделю назад начал новые эксперименты с этим плагином, у меня в браузере появились 23 килобайта не удаляемых кука, сегодня после эксперимента ещё к ним 10 килобайт добавилось. То есть сейчас невозможно очистить 33 килобайта куков из браузера так как у них нет адреса. Может это совпадение, но странное
Страница 3 из 32  
Ваш комментарий:
X