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

Страница 1 из 26  
Гость 02.12.2018 06:12
т.е. вам не нужно считать кол-во, а просто добавлять товары в таблицу?
Гость 24.12.2018 18:59
Здравствуйте! Подскажите, как сделать, чтоб при добавлении в корзину, где нибудь выводить сообщение, что товар добавлен.... и еще, как сделать отдельную кнопку в товаре, при нажатии которой товар добавлялся с одновременным открытием корзины.... Буду очень благодарен... Корзина супер!
Incode 24.12.2018 19:05
выводить сообщение, что товар добавлен
Этот момент я не предусмотрел, но сейчас нет времени корректировать.
с одновременным открытием корзины
Перечитайте внимательно описание и в частности обратите внимание на параметр openByAdding.
Гость 24.12.2018 19:34
Перечитайте внимательно описание и в частности обратите внимание на параметр openByAdding.

Тут я разобрался (менять значение true i false)... Просто хотел одну кнопку 'добавить' отдельно и вторую 'купить' ... Можно ли две кнопки или нужно кучу кода переписывать? В любом случае спасибо....
Incode 24.12.2018 21:26
Можно ли две кнопки
Можно. Просто инициализируете плагин дважды, указывая в первом случае свой селектор для кнопок "Добавить" + параметр openByAdding: false, а во втором случае (для кнопок "Купить") - их селектор + параметр openByAdding: true.
// для кнопок "Добавить"
$.jqCart({
    buttons: '.add_item', // класс кнопок "Добавить"
    openByAdding: false // Не открывать корзину автоматом
    /* другие параметры */
});
// для кнопок "Купить"
$.jqCart({
    buttons: '.buy_item', // класс кнопок "Купить"
    openByAdding: true // Открывать корзину автоматом
    /* другие параметры */
});
Гость 24.12.2018 22:40
инициировал два раза плагин, как написали вы,с двумя кнопками с такими классами, но обе кнопки выполняют одинаковое действие, не зависимо от того что написаны разные buttons и разные значения для openByAdding.... Какой $.jqCart последний то правило openByAdding и выполняют обе кнопки....

$(function(){
$.jqCart({ 
			buttons: '.add_item',
			handler: './php/handler.php',
			cartLabel: '.label-place',
			visibleLabel: true,
			openByAdding: false,
			currency: 'грн.'
	});	
$.jqCart({
    buttons: '.buy_item', 
    handler: './php/handler.php',
	cartLabel: '.label-place',
	visibleLabel: true,
    openByAdding: true, 
    currency: 'грн.' 
  });		
	// Пример с дополнительными методами
	   
	$('.open').click(function(){	    
		$.jqCart('openCart'); // открыть корзину
	});
	$('.clear').click(function(){
		$.jqCart('clearCart'); // очистить корзину
	});	
});
<button class="buy_item"  >Купить</button>
<button class="add_item"  >Добавить</button>
         
Incode 24.12.2018 23:52
обе кнопки выполняют одинаковое действие
Да, вы правы. Метод-то я сделал глобальным... Усталость даёт о себе знать.
В общем, можно поступить таким образом:
$('.buy_item').on('click', function(){
    $(this).siblings('.add_item').trigger('click');
    $.jqCart('openCart');
});
Плагин инициализируется нормально один раз на кнопке "Добавить", без автооткрытия корзины. При клике на кнопку "Купить" - триггер события на кнопку "Добавить" и открываем корзину $.jqCart('openCart');. В примере выше, я исходил из того, что обе кнопки - это сестринские элементы, поэтому использовал метод siblings().
Гость 25.12.2018 00:29
При клике на кнопку "Купить" - триггер события на кнопку "Добавить" и открываем корзину $.jqCart('openCart');.


Извините, что донимаю вас... но уж как будет время... вообщем пробовал и так и сяк... и кэш чистил... При нажатии на .buy_item молчит.... ничего не происходит...

$(function(){
    $.jqCart({ 
			buttons: '.add_item',
			handler: './php/handler.php',
			cartLabel: '.label-place',
			visibleLabel: true,
			openByAdding: false,
			currency: 'грн.'
	});
	
$('.buy_item').on('click', function(){
    
    $(this).siblings('.add_item').trigger('click');
    $.jqCart('openCart');
});
});
Incode 25.12.2018 00:43
ничего не происходит
Покажите часть html-кода, где у вас располагаются кнопки. Пример с двумя кнопками, описанный мной выше
Гость 25.12.2018 00:57
вот:


<ul id="tovar" >  
				<?php while( $row = mysqli_fetch_assoc($results) ){  ?>
		<li>	      
       <a id="title"><?= "<small>" . $row['brand'] . "</small><br/>".$row['model'] ?></a>     
       <img   style="position: relative;" src="/product/<?= $row['name']; ?>" >
       
       <div id="price" ><?= (int)$row['cena'].  " грн. "; ?></div>  
       <button class="buy_item"  data-id="<?= $row['id']; ?>" data-title="<?= $row['model']; ?>"   data-price="<?= $row['cena']; ?>" data-img="/product/<?= $row['name']; ?>">Купить</button>
       <button class="add_item"  data-id="<?= $row['id']; ?>" data-title="<?= $row['model']; ?>"   data-price="<?= $row['cena']; ?>" data-img="https://ensy.com.ua/product/<?= $row['name']; ?>">Добавить</button>
          
         </li>           		
				<?php }   ?>		
</ul>
Гость 25.12.2018 01:06
Ой... извините за лишние вопросы... оказывается, не работала кнопка buy_item из-за того что выборка товаров у меня загружается из другой страницы... сейчас перекинул js на ту страницу и все заработало!!!!! Огромнейшееее человеческое спасибо)))
Incode 25.12.2018 01:37
все заработало
Хорошо. Только data-атрибуты у кнопки "Купить" - лишние. Они всё равно никакой роли не играют, а утяжелять страницу мусором не нужно.
Гость 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>
Страница 1 из 26  
Ваш комментарий:
X