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

Страница 17 из 33  
Гость 19.11.2017 22:15
Здравствуйте! Спасибо за данный скрипт. Всё отлично работает. Вот только не пойму как вместо количества показывать итоговую сумму. Ковыряясь в коде... интуитивно удалось добиться желаемого результата, но к сожалению не полностью. При обновлении результат обнуляется, хотя в корзине товар остается лежать. Не пойму куда копать дальше.
Dima.S. 25.11.2017 19:32
автору большое спасибо за плаги.

скажите пожалуйста, возникла проблема, при перезагрузке страницы на доли секунды появляется всплывающее окно, (корзина пуска).
подскажите пожалуйста в чем может быть проблема, может кто то сталкивался с подобной проблемой ?
ArturBoot 28.11.2017 22:19
Буду признателен если кто-нибудь подскажет как подключить платежную систему Яндекс.Касса. Хотя бы намекните куда копать)

Есть форма:

<form action="https://money.yandex.ru/eshop.xml" method="post">
    <input name="shopId" value="1234" type="hidden"/>
    <input name="scid" value="4321" type="hidden"/>
    <input name="sum" value="100.50" type="hidden">
    <input name="customerNumber" value="abc000" type="hidden"/>
    <input name="paymentType" value="AC" type="hidden"/>
    <input name="orderNumber" value="abc1111111" type="hidden"/>
    <input name="cps_phone" value="79110000000" type="hidden"/>
    <input name="cps_email" value="user@domain.com" type="hidden"/>
  <input type="submit" value="Заплатить"/>
</form>


Как передать параметры из платежной формы? POST-запросом? Если так, то как это реализовать?
Гость 04.12.2017 01:32
Подскажите пожалуйста как в самой корзине добавить кнопку - input value="Оплатить", при нажатии перенаправляло на ссылку сайта.

Отправить заказ Оплатить Вернуться к покупкам
Incode 04.12.2017 01:50
как в самой корзине добавить кнопку
Не сжатый файл плагина в папке "developer". HTML-код корзины присвоен переменной orderform. Редактируйте его и подключайте вместо минифицированного.
Гость 13.12.2017 22:04
Ребят, всем привет! Как сделать минимальную сумму заказа?
Гость 17.12.2017 15:19
Всем привет. Подскажите. Не отправляет на почту. Пишет "Хьюстон! У нас проблемы!". Всё делал что выше писали. Ничего не менялось.
Гость 20.12.2017 18:05
Всем привет. Подскажите. Не отправляет на почту. Пишет "Хьюстон! У нас проблемы!". Всё делал что выше писали. Ничего не менялось.

Даже смена версии php не помогла?!
Гость 21.12.2017 11:37
Аналогичная проблема: при перезагрузке страницы на доли секунды появляется всплывающее окно, (корзина пуста).
Еще при добавлении нового товара, с новой страницы, корзина полностью обнуляется (после нажатия add-item, local storage становится пустым). Возможно подскажете, в чем может быть проблема?
Гость 03.01.2018 12:18
День добрый, подскажите как добавить автоматическую нумерацию заказа? нашел код но он глючит
function getNumber() {
$filename = 'orderNum.txt';
$number = file_get_contents($filename);
$number++;
file_put_contents($filename, $number);
return $number;
}

echo(getNumber());

$sub = $_POST['zakaz'].getNumber();
Incode 03.01.2018 12:27
как добавить автоматическую нумерацию заказа?
Если вы записываете заказ в базу, то почему бы не использовать значение поля с автоинкрементом?
нашел код но он глючит
В чём это выражается? В файле 'orderNum.txt' изначально должно быть прописано какое-то значение, например "0". Да и сам файл должен уже существовать.
Гость 03.01.2018 13:53
Всем привет. Подскажите, в каком файле поменять язык значений в окне заказа?
Гость 03.01.2018 13:57
Точнее в каком файле находятся значения ( Корзина, Контактная информация и тд),мне нужно изменить!
Incode 03.01.2018 14:10
в каком файле находятся значения
Файл "handler.php" в папке "php", если я вас правильно понял.
Гость 03.01.2018 14:19
Там нет смотрел, изменить нужно в самом окне корзины эти слова на английские.
Гость 03.01.2018 15:27
Incode подскажи, вот нашел значения в jqcart.j, меняю на английский, почему не меняются, в чем может быть причина? кеш, кукисы чищу
Incode 03.01.2018 17:50
нашел значения в jqcart.js
Вы практически попали в точку, но не учли одну вещь... Рабочий файл - "jqcart.min.js", именно он подключен в примере. А в файле "jqcart.js" не сжатый код плагина, для того, чтобы пользователи могли вносить свои правки. После редактирования, нужно или же подключить в документ "jqcart.js" вместо "jqcart.min.js", или же заменить код в "jqcart.min.js".
spoon 04.01.2018 06:06
Здравствуйте, если не сложно и есть время, можите прикрутить автонумерацию заказа, которая выводилась бы в модальном окне, передавалась на почту клиенту и админу.
spoon 04.01.2018 12:07
Если исправлен расчет сумм с плавайщей запятой, то эта часть не нужна
$total_sum += (float)$item_data['count'] * (float)$item_data['price'];
spoon 04.01.2018 12:12
data-count="100500" это вообще что?))
Incode 04.01.2018 12:24
@spoon, Во-первых, "автонумерацию" на клиенте не сделать, т.к. данные, которые можно сохранить в браузере, не будут доступны у других пользователей. Во-вторых, данные поступающие от клиента, должны на сервере проходить обработку/фильтрацию. Я не ставил задачу писать бэкенд для плагина, т.к. это решение даже близко не будет к понятию "универсальное", а только сделал пример, в котором есть хоть какая-то обработка данных. Поэтому, приведение типов (float), совсем не помешает. data-count="100500" - просто пример "от фонаря" того, как можно добавлять какие-то свои данные, с последующей передачей их на сервер вместе с остальными ))
spoon 04.01.2018 12:34
т.е. тут $total_sum += (float)$item_data['count'] * (float)$item_data['price'];
мы просто умножаем 100500 например на 20
spoon 04.01.2018 12:36
Если я добавлю этот код
unction getNumber() {
$filename = 'orderNum.txt';
$number = file_get_contents($filename);
$number++;
file_put_contents($filename, $number);
return $number;
}

echo(getNumber());

$sub = $_POST['zakaz'].getNumber();

то я смогу создать автонумерацию заказа, записать в файл orderNum.txt, отправить на почту заказчику?
Incode 04.01.2018 13:01
мы просто умножаем 100500 например на 20
Да. Если память не изменяет, то когда-то давно меня просили сделать количество по умолчанию и, в качестве примера, я показал, как это можно сделать с помощью атрибута data-count.
По поводу нумерации, я писал вам выше. Файл изначально должен быть создан и в нем прописано исходное значение, т.е. какое-то число. И естественно, что путь к файлу должен быть указан точно.
spoon 04.01.2018 13:09
По поводу нумерации, я писал вам выше. Файл изначально должен быть создан и в нем прописано исходное значение, т.е. какое-то число. И естественно, что путь к файлу должен быть указан точно.


Да это я помню)) ну т.е. код в принципе рабочий?
Страница 17 из 33  
Ваш комментарий:
X