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

690 комментар

Страница 1 из 28  
Гость 25.04.2019 15:05
Добрый день! Подскажите пожалуйста, не работает кнопка отправить заказ. Как файл handler.php открывается? Мучаюсь, не могу разобраться.

Там разные версии php - если php5 не срабатывает, раскомментируйте php4.
kwm25 25.04.2019 18:53
@Гость, раскомментировал, все рано не пашет. И если запускаю через денвер то всегда отображает пустую корзину, то есть она даже через денвер не хочет работать. Версия денвера последняя стоит.
Гость 25.04.2019 19:59
раскомментировал, все рано не пашет. И если запускаю через денвер то всегда отображает пустую корзину, то есть она даже через денвер не хочет работать. Версия денвера последняя стоит.

У Денвера, второй версии, были проблемы с работой скриптов, возможно, в третьей тоже есть.
У Вас демо даже не запускается или Вы модифицировали плагин?
kwm25 25.04.2019 20:04
@Гость, я его немного модифицировал. Попробую разобраться. Я беру готовы
kwm25 25.04.2019 20:07
@Гость, Я его немного модифицировал. Попробую разобраться. Я беру готовую корзину, не измененную. Пытаюсь запустить в денвере отправку заказа, безрезультатно. Как вы говорите раскомментировал кусок кода в файле php, и все равно не хочет. Может сам денвер виноват, уже не знаю на что грешить. Даже как говориться оригинал не хочет запускаться.
Гость 25.04.2019 20:37
@kwm25
Скорее всего, Денвер не срабатывает. Попробуйте другой локальный сервер.
kwm25 25.04.2019 21:04
@Гость, какой посоветуете? Просто я новичок в этом деле, не очень сильно разбераюсь...
Гость 25.04.2019 21:25
@kwm25,
Open Server корректно работал с корзиной.
Версия - PREMIUM.
kwm25 26.04.2019 08:20
@Гость, Спасибо за помощь! Буду пробовать.
kwm25 26.04.2019 14:49
@Гость, Как вы говорили установил Open Server Premium и все заработало! Все работает как надо! Установил его на внешний накопитель для удобства) Еще раз спасибо Вам!
Гость 26.04.2019 15:10
@kwm25,
О, супер )))
julia 08.05.2019 11:37
почему может не работать кнопка оформить заказ?
julia 08.05.2019 11:50
@kwm25, можете подробно рассказать как заработала кнопка?
kwm25 16.05.2019 20:50
@julia, после установки Open Server, и запуске на нем самого проекта. Тамм версии php разные были поэтому и не работало ничего
kwm25 16.05.2019 20:54
Может кто знает, или сталкивался. Помогите пожалуйста. Возможно ли сделать счётчик количества товаров? То есть задаётся количество товара и после оформления заказа это количество уменьшается. Или какое нибудь уведомление о не наличии товара на складе, при этом его не возможно купить. Заранее спасибо!
G.V.1 18.05.2019 16:44
Доброго времени суток.

Подскажите, кто может

Скопировал исходники. Вставил.
Товар добавляется, все считается. НО!!!!

При нажатии на кнопку "Отправить заказ" ничего не происходит. (странички и код залил на сервер). Поддержка php есть.

Буду признателен, если подскажите, в чем дело.

Есть разница, какое свое мыло подставлять в php? гмейловское или иное?

Заранее спасибо
kwm25 18.05.2019 19:52
@G.V.1, попробуйте версии php менять, поэкспериментируйте если есть возможность. У меня на самой последней работало.
G.V.1 19.05.2019 12:40
@kwm25, пробовал, стоит сейчас последняя. результат одинаковый ((
G.V.1 19.05.2019 14:23
@kwm25, перезагрузил сервер, стал понимать php. Но сейчас другая проблема. При отправки письма выдает ошибку
// Ответ на запрос
$response = [
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'

Подскажите, в чем может быть беда?
kwm25 20.05.2019 07:44
@G.V.1, честно, не знаю. Не приходилось сталкиваться с таким.
kwm25 20.05.2019 07:46
А насчёт этого никто ничем не может помочь?(

Может кто знает, или сталкивался. Помогите пожалуйста. Возможно ли сделать счётчик количества товаров? То есть задаётся количество товара и после оформления заказа это количество уменьшается. Или какое нибудь уведомление о не наличии товара на складе, при этом его не возможно купить. Заранее спасибо!
Гость 13.06.2019 20:39
Так и не разобрался как вместо кнопки "В корзину" Сделать так - 1 + ? Визуально кнопку можно вынести с формы оформления заказа, но она не работает и не определяет id !
Гость 17.08.2019 15:51
Можете пожалуйста помочь -
Куда нужно вводить EMAIL?
attacer 22.09.2019 01:25
Добрый день, подскажите пожалуйста
У товара есть несколько вариация - через onclick у кнопки меняю data-id, чтобы якобы новый товар был.
При первом изменении атрибута товар попадает в корзину, а при последующем - уже нет. Только обновление страницы помогает.

Что необходимо подкорректировать?
Спасибо!
Гость 18.10.2019 22:57
Написал расширение для одной CMS на файлах с использованием этого скрипта:
https://my-engine.ru/extensions/zsINva4Bm1aZnphubGfgmyQ3NzwCGsjU
Страница 1 из 28  
Ваш комментарий:
X