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

Страница 14 из 33  
spoon 01.02.2018 17:51
Вроде все работает но Итоговая стоимость передается в другую функцию и при изменении её она не меняется в итоговой стоимости с доставкой.


Помогите с решением вопроса.
Гость 14.02.2018 07:23
Добрый день!
Как сделать что само высплывающее окно корзины было масштабируемым в соответствии с девайсом клиента, так как например в айфоне се окно режется разрешением экрана?
spoon 15.02.2018 05:44
Оно и так адаптивное или вы про что то другое?
Гость 22.02.2018 03:59
Доброе утро, есть пару вопросов:
1. Есть ли такая возможность добавить количество товара в саму карточку товара? И чтобы количество сразу добавлялось в корзину
2. И есть ли такая возможность, чтобы использовать любой другой popup, не стандартный
Спасибо большое
Гость 12.03.2018 12:46
Подскажите как сменить валюту
spoon 14.03.2018 11:22

$.jqCart({
        buttons: '.add_item',        
        handler: '/php/handler.php', 
        visibleLabel: false,        
        openByAdding: false,        
        currency: '&euro;',  // валюта: строковое значение, мнемоники (по умолчанию "$")
        cartLabel: '.label-place' 

Вот тут и меняешь

 currency: '&euro;',
Гость 21.03.2018 10:06
Добрый.

Подскажите, а как держать корзину постоянно открытой, чтобы дизайн ей придать?

Спасибо!
Incode 21.03.2018 10:54
держать корзину постоянно открытой
Такой функционал, по понятным причинам, не предусматривался, но можно вызывать метод $.jqCart('openCart'); после загрузки страницы. Разместите этот код после инициализации плагина. А можно просто скопировать HTML-код корзины в отдельный файл, подключить основные стили и корректировать CSS отдельно.
Гость 21.03.2018 11:04
html код корзины в js файле находится. Я даже не знаю как его так скопировать, чтобы потом можно было все вставить назад:)

Спасибо большое!
Incode 21.03.2018 11:26
html код корзины в js файле находится.
Вам нужно скопировать сгенерированный код. Открываете корзину на странице, правый клик где-нибудь на таблице с товарами, выбираете "Посмотреть код" (в Chrome) или "Исследовать элемент" (в FireFox). В открывшейся консоли находите элемент с классом "jqcart-checkout", правый клик на нём - "Копировать" > "Внешний HTML" (Copy > Copy outerHTML)
spoon 22.03.2018 07:41
Итоговая стоимость передается в другую функцию и при изменении её она не меняется в итоговой стоимости с доставкой.
Вот расчет доставки

$(document).on('change', '#myselect', function() {
    var delivery = $('.jqcart-delivery');
    var selectedText = $(this).find(':selected').text();
    var selectedVal = $(this).find(':selected').val();
  
    delivery.find('.text').text(selectedText);
    delivery.find('.sum').text(selectedVal);
    
    var globalsum = Math.ceil(+selectedVal + +globalper);
    $('.summ').text(globalsum);
  
  $('[name="text"]').val(selectedText);
  $('[name="sum"]').val(selectedVal);
  $('[name="summ"]').val(globalsum);
});

var globalper;-глобальная переменная Итого, заменил b на globalper
spoon 22.03.2018 07:41
Как правильно это сделать?
Incode 22.03.2018 10:06
@spoon, вы думаете, что можно сориентироваться не видя всех ваших изменений в коде?
Итого сделать глобальной
Зачем, если все расчеты можно делать в одном методе? После основных расчетов, вытаскивать значения ваших дополнительных полей и добавлять/отнимать от уже имеющихся.
windcrack 01.04.2018 00:06
Простите меня пожалуйста но можно ли кнопки Добавить в корзину поменять на <input type="checkbox" class="add_item" data-id="5">? Просто проблема в том что я поменял но у меня по много раз добавляется товар. А я хочу сделать чтобы при выборе чекбокса товар добавлялся 1 раз. А при отмене выбора чекбокса товар не добавлялся.
Incode 01.04.2018 01:45
@windcrack, забирайте. Делал, то что называется "на коленке", поэтому могут быть баги.
windcrack 01.04.2018 03:49
@Incode, Большое вам спасибо!
Гость 05.04.2018 21:15
Здравствуйте!
Подскажите, как сделать так, чтобы форма отправлялась только если заказ от 2000р? Т.е. кинул в корзину товар на 1000р, жмешь отправить и уведомление "мин.заказ от 2000р", плюсиком прибавил товар, увеличив сумму до 2000р и снова отправить и все ок? Подскажите, пожалуйста.
Incode 05.04.2018 23:13
Подскажите, как сделать
Если б я просто подсказал, то вы бы сделали сами? ;)) Забирайте. Добавил параметр minSum. Посмотрите в примере.
Гость 07.04.2018 12:26
@Incode, Вот спасибо большое. Надеюсь вам не составило большого труда? Сам бы не сделал)
Гость 07.04.2018 13:15
@Incode, Только никак не получается в мою корзину это прикрутить. У меня есть файл jqcart.min.js и корзина не как у Вас открывается в отдельном окне, у меня страница с корзиной с таким кодом
Показать код
Гость 09.04.2018 22:12
Здравствуйте. При отправке формы выдает ошибку 405. Как исправить?
Гость 09.04.2018 22:27
проект размещен на GitHub
Incode 09.04.2018 23:57
При отправке формы выдает ошибку 405. Как исправить?
В инете уже есть достаточно информации по этому поводу
Гость 10.04.2018 12:33
Подскажите, когда добавляю товар в корзину он не отображается, но показывает, что в корзине товар есть. Дело в том, что цена у меня дробная через запятую, когда ставлю целое число или точку вместо запятой, то отображается. В чем проблема?
Incode 10.04.2018 13:58
В чем проблема?
Вы как бы уже сами ответили на свой вопрос. Не буду говорить про все языки программирования, но в том же JS, дробная часть числа отделяется точкой и только ей. При выводе данных в html, изменяйте запятую на точку и проблем возникать не будет.
Страница 14 из 33  
Ваш комментарий:
X