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

645 комментариев

Страница 4 из 26  
windcrack 19.05.2018 21:07
@Incode, Уважаемый мой человек. Как мне в вашей корзине сделать калькулятор? чтобы складывалось 2 суммы и итог добавлялся в корзину. Я побывал у меня ни как не выходит. Если надо могу и не бесплатно. Мне надо всего 1 слот остальные как и были чек боксами.
Гость 22.05.2018 11:41
Здравствуйте! На мобильном при приближении модального окна не видно нижнюю часть формы. Поставьте пожалуйста прокрутку нижней части.
windcrack 23.05.2018 21:00
@Гость, Пролистайте комментарии там был написан вариант решения
Гость 24.05.2018 12:28
Извините за такой вопрос, может задавал уже кто то, а можно ли сделать передачу данных из корзины в базу данных, если есть в коде уже, то где изменить на данные своей базы
Гость 24.05.2018 13:29
Здравствуйте!!! Подскажите пожалуйста как привязать кнопки) измучился
"Добавить в корзину" - 1 +
// кнопки на карточке товара

$(document).ready(function() {
$('.knopka_minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.knopka_plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});

<input type="button" class="add_item" data-id="1" data-price="750" value="В корзину">
<span class="knopka_minus">-</span>
<input type="text" value="1" class="vvod_chisla" disabled="disabled"/>
<span class="knopka_plus">+</span></div>
Гость 24.05.2018 13:39
<input type="button" class="add_item" data-id="1" data-price="750" value="В корзину">
<div>
<span class="knopka_minus">-</span>
<input type="text" value="1" class="vvod_chisla" disabled="disabled"/>
<span class="knopka_plus">+</span>
</div>
Incode 24.05.2018 14:23
как привязать кнопки
Вообще, выше уже обсуждалось, но повторю:
В методе addToCart (смотрите естественно не минимизированный файл плагина) измените инкремент количества, указывая значение из соответствующего поля. Т.е., вместо строки
cartData[itemData.id].count++;
должно получится что-то вроде:
cartData[itemData.id].count += +$(this).next('div').find('.vvod_chisla').val() || 1;
Селектор поля, который у вас с классом "vvod_chisla", я брал исходя из показанной вами разметки. Если в реальном проекте она отличается, то и селектор корректируйте. Только не забудьте, что не сжатый файл никуда не подключается, поэтому или же замените в jqcart.min.js на отредактированный код или подключайте не сжатый jqcart.js
Гость 25.05.2018 11:51
Подскажите, пожалуйста!
При заказе, в тестовом документе создается запись, о покупке, но при этом, если сделать например еще 1 заказ то старая запись замещается новой, как сделать, что бы новая просто добавлялась, а не замещала старую?
Зарание спасибо <3
Гость 25.05.2018 21:10
Спасибо тебе большое добрый человек!!! Избавь меня от мучений плиииз...

только со второго клика берет число из '.vvod_chisla'
а в label-place не учитывается

cartData = actions.getStorage() || {};
if (cartData.hasOwnProperty(itemData.id)) {
cartData[itemData.id].count += +$(this).next('.skoba_knopok').find('.vvod_chisla').val()||1;
} else {
itemData.count = 1;
cartData[itemData.id] = itemData;
}
actions.setStorage(cartData);
actions.changeTotalCnt(1);
label.show();
if(opts.openByAdding) {
actions.openCart();
}
windcrack 27.05.2018 21:48
data-pric="" можно ли сюда записать переменную?
windcrack 27.05.2018 21:49
data-price='' то есть сюда
HanSolo 28.05.2018 16:50
@Incode, здравствуйте. Думал у вас корзина адаптивная, но на 610px примерно уже все едет, а на 517px вовсе пропадает корзина.
Хотел медиа запросами в css адаптировать, но как если она пропадает на 517px?))
HanSolo 29.05.2018 16:06
@Incode, более менее адаптировал, хотя конечно на 380 смотрится не очень... Но только заметил, что на планшетах и телефонах не закрывается по тапу за областью дива с контентом. Можно конечно на кнопку нажимать "продолжить покупку", НО если нечаянно открыл пустую корзину, то все....
windcrack 30.05.2018 21:56
Понял не правильно задал вопрос. Можно ли задать в data-price своё значение из другой переменной?
windcrack 03.06.2018 20:59
У меня есть калькулятор(да я его сделал сам). Но как мне значение из подсчитанного калькулятора занести в
data-price
. Есть ли какой обработчик? или только прописанные значения? Просто корзина хорошая не хочу менять. А мне осталось только калькулятор прикрепить вернее значение из него.
stas_rsv 10.06.2018 16:53
Отличная корзина. Но все же маленький вопросик. :-)
Судя по всему по умолчанию, в корзине товары сортируются по ID. Как сделать сортировку по Наименованию?
Гость 12.06.2018 17:06
Привет Всем! Товарищи Подскажите пожалуйста есть еще где подобные корзинки. Весь инет перерыл только эту нашел)
Гость 12.06.2018 17:08
Или есть кто тут кто мне сможет помочь ее маленько доделать. За деньги естественно
Гость 18.06.2018 05:18
Здравствуйте! Подскажите пожалуйста как добавить каптчу в корзине?
windcrack 30.06.2018 18:45
@Гость, Полистайте есть ответ на ваш вопрос
Гость 06.07.2018 15:07
Как сделать не евро, а рубли? подскажите пожалуйста?
Incode 06.07.2018 16:43
Как сделать не евро, а рубли?
Параметр currency, вместо '&euro;' указать свою валюту. В описании всё есть, читайте внимательно
Гость 06.07.2018 17:14
Параметр currency, вместо '&euro;' указать свою валюту. В описании всё есть, читайте внимательно

Долго думал, но разобрался, спасибо...
Гость 13.07.2018 19:08
Добрый день !подскажите люди добрые как вывести вместо количества товара , сразу сумму в карточке ?
Гость 14.07.2018 20:43
Добавил в карточку еще три дополнительных поля , как сделать так чтоб в письме приходили данные которые введут люди ?? Именно с карточки нужно а не из самой корзины
Страница 4 из 26  
Ваш комментарий:
X