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

Страница 7 из 33  
Гость 25.12.2018 12:40
Спасибо за ваше время!!!
Когда у вас будет время, подскажите как добавить всплывающее окно на 0.5 сек. что товар, добавлен, потому что когда в телефоне сидишь, не понятно был ли результат, после нажатия кнопки.....
И еще пытаюсь исправить, пока безуспешно .jqcart-checkout (модальное окно). Проблема в том, что прокрутки к таблице с товарами недостаточно, не влезает форма заказа в мобильной версии... А после добавления значения высоты, чтоб использовать скролл, увеличиваются и сообщения о пустой корзине и об отправлении товара.... Пока вижу выход из этой ситуации, переносом формы заказа на другое окно возможно.... Что думаете?
Гость 31.12.2018 11:45
подскажите как добавить всплывающее окно на 0.5 сек


Как то так https://jsfiddle.net/spoon100500/hwqL3y69/
Koblanjumabaev 01.01.2019 17:20
Ребят, подскажите как можно добавить промокод в корзину, типа в корзине инпут, в инпуте вводишь промокод и после этого с итогов суммы какое то число,например 20$
Буду благодарен за помощь )
Koblanjumabaev 01.01.2019 17:20
итогов суммы отбирается какое то число,например 20$
Гость 02.01.2019 07:46
Поищите в предыдущих постах, вроде был такой вопрос.
agrotovar 06.01.2019 11:56
Здравствуйте, хочу поблагодарить Вас за отличную корзинку, и у меня возник такой вопрос: как сделать такую корзину, чтобы она отображалась не в модальном окне, а на обычной странице. Дело в том, что мне нужно добавить еще несколько полей input и при выводе на смартфоне их просто не видно. Если бы на обычной странице все это отображалось было бы прекрасно, спасибо.
Гость 08.01.2019 06:58
нужно добавить еще несколько полей input и при выводе на смартфоне их просто не видно

Это решается с помощью @media в css, делаете ширину и высоту блока на точках определенного размера, ну и поправляете инпуты.
agrotovar 08.01.2019 12:10
Здравствуйте, спасибо большое буду пробовать, а без модалки никак?
Гость 12.01.2019 10:58
а без модалки никак?

Ищите, в постах есть решение.
Гость 18.01.2019 22:03
Как то так https://jsfiddle.net/spoon100500/hwqL3y69/


Спасибо за подсказку... Но у меня почему-то этот скрипт работает и выводит сообщение, пока не нажал на кнопку "открыть корзину" либо на кнопку "очистить корзину", после этого сообщение о добавлении не выводится а просто происходит добавление.... Если обнавляю страницу, скрипт опять работает.... Может вы знаете в чем причина?
Гость 18.01.2019 22:15
И при открытии страницы тоже воводит сообщение про добавление...
Гость 18.01.2019 22:57
Даже когда перегружаешь страницу с вашим примером https://jsfiddle.net/spoon100500/hwqL3y69/ , выводит сообщение о дабавлении...
Гость 18.01.2019 23:54
Получилось без ошибок вот так...:
$(".tovar-dobavlen").fadeOut();
$(document).on('click', '.add_item', () => {
    $(".tovar-dobavlen").fadeIn("fast").html("<div class='jqcart-layout'><div class='jqcart-checkout'><h2 class='jqcart-empty-cart'>Заказ добавлен</h2></div></div>");
$('.tovar-dobavlen').fadeOut(1000);
}); 
<div class='tovar-dobavlen'></div>
IgAlKo 13.03.2019 17:01
Здравствуйте! Подскажите кто и как организовал прибавление к заказу стоимость доставки? Один рабочий вариант- через организацию кнопки на странице с товаром, все работает, но как организовать сразу в корзине через радио баттон? если вставить обычный баттон, то строка с доставкой не добавляется сразу в таблицу, только после закрытия-открытия корзины становится видна
Гость 16.03.2019 12:24
Здравствуйте! Подскажите пожалуйста как реализовать перезагрузку страницы при отправке заказа в обработку средствами PHP или JS, заранее благодарю.
Гость 17.03.2019 15:20
Здравствуйте. Замечательная корзина, модернизировал под себя. Не получается один момент.
У меня количество товара нужно выбрать только с <input type="number" min="2" max="" step="2" value="2"> , а как выбранное количество передать в модальную форму не пойму. Направьте меня если есть такая возможность, заранее благодарю.
Гость 21.03.2019 05:21
как реализовать перезагрузку страницы при отправке заказа

В свойстве sendOrder есть ajax запрос, после него допишите перезагрузку
location.reload();
Гость 21.03.2019 05:29
как выбранное количество передать в модальную форму


Добавьте класс jqcart-amount вашему инпуту.
Гость 21.03.2019 09:40
Добавил класс jqcart-amount к инпуту:<input id="kol" class="jqcart-amount" style="width:50px" type="number" min="2" max="" step="2" value="" > не работает.
Добавил скрипт :
<script>
var input = document.getElementById('kol')
input.addEventListener('input', (e) => {
document.getElementsByClassName('add_item')[0].setAttribute('data-incr', input.value)
console.log(e[0].getAttribute('data-incr'))
})
</script>
Срабатывает только раз,следующие добавления или изменения не работают.Куда копать?
Гость 22.03.2019 08:54
Я вас не правильно соорентировал с добавлением класса, т.к. этот класс добавлен в мод и поиск ведется в моде, а не в статическом коде, попробуйте добавить инпуту класс add_item который используется в кнопках.
Гость 23.03.2019 22:18
<input id="kol" style="width:50px" type="number" min="2" max="" step="2" value="" >
Добавление количества решил: itemData.count = $('.kol').val();
Но второй товар добавляется со старым инпутом. Как его обновить?
Гость 25.03.2019 15:53
Кто-то пробовал добавить динамический data-атрибут. Например, над кнопкой добавить в корзину можно было из выпадающего списка выбрать вариативный параметр. Не могу сообразить как реализовать
Гость 09.04.2019 00:49
Здравствуйте!
Подскажите пожалуйста подробно как настроить адреса для отправки заказа по почте.
Ничего не получается. А без этого корзина не нужна. Я пишу программы на Дельфи и когда делал рассылку то указывал адрес почты, логин пароль порт и ещё чего то. И только тогда рассылка работала. Правда было это давно. Заранее благодарен. Леонид
Incode 09.04.2019 01:19
Я пишу программы на Дельфи
Это не мой профиль, но если обработчик у вас на PHP, то...
Подскажите пожалуйста подробно
На "подробно" уйдёт много времени. Начните с простейшей функции mail(), а так же класса PHPMailer, который облегчит более сложные задачи по отправке почты.
Гость 11.04.2019 02:07
Доброй ночи.Что то я никак не могу понять ничего. Скопировал как есть и вставил. Посмотрите где ошибки, что не так
<html>
<head>
<meta charset="utf-8">
<title>jqCart - Demo</title>
<link href="https://incode.pro/demo/icp_example20/css/jqcart.css"
rel="stylesheet" type="text/css">
<script
src="https://incode.pro/demo/icp_example20/js/jquery-1.11.3.min.js"></script>
<script src="https://incode.pro/demo/icp_example20/js/jqcart.min.js"></script>
<script>
$(function(){
'use strict';
// инициализация плагина
$.jqCart({
buttons: '.add_item',
handler: './php/handler.php',
cartLabel: '.label-place',
visibleLabel: false,
openByAdding: false,
currency: '&euro;'
});
// Пример с дополнительными методами
$('#open').click(function(){
$.jqCart('openCart'); // открыть корзину
});
$('#clear').click(function(){
$.jqCart('clearCart'); // очистить корзину
});
});
</script>
<style type="text/css">
/* Стили для демо (таблица товаров) */
#wrapper {
width: 50%;
margin: 10px;
}
#label-place {
margin: 10px 0;
}
.item_box {
border: 1px solid #999;
margin-bottom: 10px;
padding: 5px;
}
.item_box::after {
content:'';
display: table;
clear: left;
}
.item_box > img {
float: left;
}
.shopping_list {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
}
.shopping_list td, .shopping_list th {
padding: 10px;
border: 1px solid #AAAAAA;
}
</style>
</head>
<body>
<br>
<br>
<div id="wrapper">
<div class="label-place">
<div class="jqcart-cart-label" style="display: none;"><span
class="jqcart-title">Оформить заказ</span><span
class="jqcart-total-cnt">0</span></div>
</div>
<!-- Элемент, где будет расположен ярлык корзины --> <br>
<div class="item_box"> <img
src="https://incode.pro/demo/icp_example20/img/samsung.png" alt="">
<h3 class="item_title">Samsung Galaxy S10</h3>
<p>Цена: <span class="item_price">20</span>$</p>
<button class="add_item" data-id="1" data-title="Samsung Galaxy S10"
data-price="20"
data-img="https://incode.pro/demo/icp_example20/img/samsung.png"
data-count="100500">Добавить в корзину</button> </div>
</div>
<p> <button id="clear">Очистить корзину</button>
<button id="open">Открыть корзину</button>
</p>
</body>
</html>
Страница 7 из 33  
Ваш комментарий:
X