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

Страница 26 из 33  
Rodion 08.11.2016 18:53
@Incode, если оплатить ваше время что вы про комментировать, возможно так?
Incode 09.11.2016 01:29
если оплатить ваше время
@Rodion, Я бы сам оплатил, чтобы меня сейчас не дёргали )) На скорую руку набросал, скачивайте. На данный момент - это максимум, что готов сделать.
Rodion 09.11.2016 04:05
@Incode, спасибо большое.
Гость 11.11.2016 19:51
Добрый день.
Пытался разобраться, но не получилось, прошу совета.
При подключении скрипта виджета группы вк (VK.Widgets.Group):
<script src="https://vk.com/js/api/openapi.js?136" type="text/javascript"></script>
инициализация плагина полностью перестает работать, корзина не открывается, товар не добавляется.
Если перейти с другой страницы с товаром в корзине, корзина открывается, но опять же товар не добавляется и отправка формы не идет.
defer/async и $.noConflict(); не помогает, не туда копаю может быть?
Incode 11.11.2016 20:18
не туда копаю может быть?
Вполне возможно. Копать нужно начиная с консоли. Есть ли ошибки и какие?
Гость 11.11.2016 21:07
@Incode,
Выдает:
setStorage (jqcart.js:196)
localStorage.setItem('jqcart', JSON.stringify(o));

addToCart (jqcart.js:70)
actions.setStorage(cartData);

DOMException: Blocked a frame with origin "http://test" from accessing a cross-origin frame.
at JSON.stringify (<anonymous>)
at Object.setStorage (http://test/js/developer/jqcart.js:196:43)
at HTMLButtonElement.addToCart (http://test/js/developer/jqcart.js:70:15)
Если это поможет
Incode 11.11.2016 22:30
Если это поможет
Не особо. Само подключение виджета, без каких-либо манипуляций, не будет конфликтовать ни с библиотекой jQuery и тем более с кодом плагина. Есть еще какие-то внешние факторы, влияющие на такое поведение. Попробуйте подключить виджет на тестовой странице (только плагин и виджет) и проверить. Если всё будет работать нормально, то нужно инспектировать код на реальной странице: какие данные в дата-атрибутах, какие изменяются ли они или элементы страницы динамически, совпадения в классах, несколько одинаковых id на странице и т.д. Если страница доступна в инете, то дайте на неё ссылку.
Гость 13.11.2016 08:55
@Incode, спасибо за подсказку, решил не заморачиваться, подключил через iframe. Все работает отлично.
infinitymd 18.11.2016 16:42
Здравствуйте. Столкнулся с такой проблемой: как добавить в скрипт js событие (нажатие на кнопку "отправить заказ") для целей Яметрики. Для этого нужно добавить в скрипт строку "onclick="yaCounter********.reachGoal('CART'); return true;", дело в том, что одиночные кавычки в нем все портят...
infinitymd 18.11.2016 16:48
Присоединяюсь, может еще кто подскажет, как на статической странице отобразить корзину?
Гость 22.11.2016 11:59
Привет класный скрипт, но почему то не приходят письма на почту. У меня у одного такая проблема, помогите плиз. Очень надо!!!
Гость 22.11.2016 12:08
Спасибо разобрался, по коментариям выше. Автору скрипта жму руку и большое человеческое спасибо Вам за огромную работу. Удачи
Гость 22.11.2016 15:21
Здравствуйте. Подскажите, пожалуйста, как можно в списке товара добавить выбор количества с одновременным подсчетом суммы и уже потом перенести в корзину. Помогите.
infinitymd 22.11.2016 16:04
а тут плагин не нужен. Нужен лишь скрипт умножающий переменную с ценой на выбранное количество...
Гость 23.11.2016 11:43

infinitymd 22.11.2016 16:04
а тут плагин не нужен. Нужен лишь скрипт умножающий переменную с ценой на выбранное количество...

А подробнее можно или пример? Спасибо.
Гость 23.11.2016 17:49
Ребят помогите пожалуйста, иногда когда добавляю товар в корзину, он пишет, что в корзине есть допустим 3 товара, но при нажатии на открытие пишет, что корзина пустая. потом пройдет немного времени и она опять открывается и нормально работает. В чем может быть причина? Спасибо
infinitymd 24.11.2016 08:49
Ошибка данных при добавлении в корзину. Снова открывается - потому что время кэша истекает...
infinitymd 24.11.2016 08:53
@Гость, боюсь я не настолько силен в js, чтобы на коленке скрипт написать, но принцип действия такой: берется поле ввода input text, див с ценой и див с результатом, в js работаем с id этих полей. Все мат функции можно в гугле найти...
Гость 24.11.2016 10:38
@infinitymd, спасибо, это сделал. Но возник вопрос: можно ли сделать чтобы добавление в корзину происходило после изменения количества товара, а не по кнопке?
Пример:
часть кода HTML:
<div class="item_box">
  <img src="img/samsung.png" alt="">
  <h3 class="item_title">Samsung Galaxy S10</h3>
  <p>Цена: <span class="item_price">20</span>&#8381;</p>
  <p>Кол-во: <input name="item_count" value="" max-legth="4" class="item_count"></p>
  <p>Сумма: <span class="item_sum"></span></p>   
  <button class="add_item" data-id="1" data-title="Samsung Galaxy S10" data-price="20" data-img="img/samsung.png" data-count="100500">Добавить в корзину</button>
  </div>

часть кода скрипта:
$(document).on('input keyup', '.item_count', function(){
	var opts={currency: '&#8381;'};
	that = $(this).closest(".item_box");
	price = $(that).find('.item_price').text();
	count = $(that).find('.item_count').val();
	sum = Math.ceil((price*count) * 100) / 100;
	$(that).find('.item_sum').html(sum + ' ' + opts.currency);
});
infinitymd 24.11.2016 11:44
Не совсем понял, надо чтобы человек, допустим, вбил кол-во "20", и сразу товар в корзину добавился?
Гость 25.11.2016 09:57
@infinitymd, да.
infinitymd 25.11.2016 11:48
тогда в конце скрипта добавляйте

$(document).ready(function(){
 $(".add_item").click();
});
infinitymd 25.11.2016 11:50
только, мне кажется это будет людей смущать, обычно после изменения кол-ва все кликают по кнопке "купить", соответственно в корзину товар будет добавляться два раза (после скрипта и при клике на кнопку)
Гость 25.11.2016 20:29
Пожалуйста, подскажите, как вывести общую сумму из "Итого:" на главную страницу? Я в javascript'е=0', но очень хотелось бы её всё же вывести оттуда, поможете?
Гость 26.11.2016 16:52
Добавьте кнопку "Очистить корзину" в саму корзину
Страница 26 из 33  
Ваш комментарий:
X