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

Страница 27 из 33  
Гость 27.09.2016 14:57
Спасибо большое!!!
Incode 27.09.2016 15:14
Можно ли сделать так, чтобы это значение бралось из переменной smarty
Можно, конечно же. Но т.к. изменять придётся далеко не пару строк кода, а времени свободного у меня сейчас нет, то заниматься этим я сейчас просто физически не могу. Если знакомы с JS/jQuery, то можете сами попробовать это сделать: нужно добавить data-атрибут в кнопку добавления товара, где будет значение переменной, изменить шаг при инкременте/декременте кол-ва в корзине в соответствии со значением этого data-атрибута. Кроме всего прочего, необходимо сделать изменения и расчетах суммы по каждому товару и итоговой суммы соответственно. Распакованный файл плагина лежит в папке "developer".
infinitymd 27.09.2016 17:43
Жаль... Сам пытался сделать, но, похоже, знаний js мне не хватает :(
Incode 27.09.2016 19:00
@infinitymd, если ближе к выходным получится выкроить время, то постараюсь помочь.
Гость 27.09.2016 20:56
такой вопрос: при добавлении в корзину больше 4-5 товаров, они идут списком и не прокручиваются вниз. То есть не видно контактной информации и кнопок "отправить заказ" и "вернуться к товарам".

Как это можно исправить?
Incode 27.09.2016 21:48
Как это можно исправить?
Посмотрите в css-файле, строка 98-102. Раскомментируйте эту часть кода, установите своё значение для свойства height (~350px).
Гость 27.09.2016 22:37
/*.jqcart-table-wrapper {
height: 360px; /* максимальная высота для таблицы с товарами, после которой будет появляться прокрутка
padding: 0 5px;
overflow-x: auto;
}/*

это часть?
просто после того, как я её раскомментила, у меня в корзине пропала таблица и вся информация просто выводится по строчно
Гость 27.09.2016 23:29
при добавлении в корзину передается только первое слово в data-title. В чем может быть проблема?
Incode 28.09.2016 01:21
это часть? у меня в корзине пропала таблица и ...
Эта. Только вы, скорее всего, не убрали комментарий к высоте.
.jqcart-table-wrapper {
    height: 360px;
    padding: 0 5px;
    overflow-x: auto;
}
Incode 28.09.2016 01:31
при добавлении в корзину передается только первое слово в data-title
Вы хотели сказать, что не "в", а "из". Тут остаётся только ванговать... Возможно, что в названии присутствуют кавычки. Если это так, то их нужно или преобразовывать в мнемоники (htmlspecialchars, htmlentities), или же для значения дата атрибута использовать одинарные кавычки.
infinitymd 30.09.2016 16:23
@Incode, спасибо, буду очень на это надеяться...
Incode 30.09.2016 19:28
@infinitymd, скачиваете и подключаете этот js-файл, в кнопки, где необходим "шаг", добавляете data-атрибут data-step, значение которого и будет являться тем самым шагом. Если этого атрибута в кнопке не будет, то инкремент/декремент будет происходить с шагом "1". Также, если присутствует значение шага !== 1, то изменение кол-ва в корзине можно будет выполнять только с помощью кнопок +/- (без ручного ввода). Это поможет избежать некорректного количества заказываемого товара. При поверхностном тестировании ошибок не обнаружил, но т.к. делал второпях, держите руку на пульсе.
infinitymd 03.10.2016 09:44
@Incode, Супер! Огромное спасибо, все работает!!!
Гость 09.10.2016 11:42
Привет всем.
Модальное окно корзины плохо отображается на мобильных устройствах, а поскольку автор корзины занят,то может кто нибудь подскажет как перенести корзину на простую страницу.
Спасибо.
ikozarenko 25.10.2016 13:53
Добрый день, очень нужно добавить выпадающий список отделений "новой почты" и отправку адреса на e-mail. В какую сторону копать?
Incode 25.10.2016 15:27
@ikozarenko, я понятия не имею, где брать списки отделений новой почты, но если они у вас есть, например, в БД, то можно попробовать так:
1. Открываем JS-файл плагина. В папке "developer" есть несжатый файл, там будет проще внести изменения и потом уже подключить его на страницу.
2. В начале файле (~18стр.) находим переменную orderform и html-коде формы ставим маркер #np# в том месте, где нужно выводить select.
3. В методе "init", после строки opts = $.extend(opts, o);, добавляем код:
var np = '';
if (typeof opts.novajaPochta === 'string' && opts.novajaPochta !== ''){
    np = '<p><label>Новая почта:</label><select name="novaja_pochta">' + opts.novajaPochta + '</select></p>';
}
orderform = orderform.replace(/#np#/, np);

4. Передаёте сформированный список отделений в виде строки (готовые элементы option), через параметр novajaPochta
$.jqCart({
    /* др. опции */
    novajaPochta: '<option value="1">Отделение 1</option><option value="2">Отделение 2</option>'
});

5. В php-обработчике ловим данные под ключом "novaja_pochta" ($userdata['novaja_pochta']).
ikozarenko 25.10.2016 15:47
@Incode, https://devcenter.novaposhta.ua/docs/services/556d7ccaa0fe4f08e8f7ce43/operations/556d8211a0fe4f08e8f7ce45
Здесь есть информация, но я немного нуб чтоб интегрировать это все в скрипт. Извините за то что морочу голову...
Я наверное немного неправильно сформировал свой вопрос. Нужно сделать окно ввода города, и по мере ввода подгружается список отделений, после выбора нужного мы отправляем его уже в обработчик для отправки на email. Спасибо за ваши труды!
Incode 25.10.2016 15:59
@ikozarenko, это нужно разбираться в их API, что займёт далеко не пару минут. На выходных попробую покопаться, но обещать ничего не буду.
ikozarenko 25.10.2016 16:07
@Incode, Спасибо огромное!
Rodion 07.11.2016 06:42
Добрый день, как можно переделать под окно от фреймворка uikit?

https://getuikit.com/docs/modal.html#javascript
Incode 07.11.2016 07:32
@Rodion, с uikit не работал, поэтому какой-либо совет дать сложно. К тому же, при поверхностном просмотре документации, я не увидел информации о динамической работе с модальным окном.
Rodion 07.11.2016 21:22
@Incode, как тогда можно полностью убрать modal окно? Сам пробыв но карниза перестает работать.
Incode 08.11.2016 08:36
как тогда можно полностью убрать modal окно?
@Rodion Для начала, убрать стили модального окна: фиксированное позиционирование, ненужные быкграунды и т.д. Затем определится с элементом, куда корзина должна выводится. К примеру, это элемент с id="output_cart". В несжатом js-файле (jqcart.js), примерно на строке 167, изменяем строку:
// Эту 
$(modal).hide().appendTo('body').find('.jqcart-checkout').html(cartHtml).end().fadeIn();
// На эту
$('#cart_output').html(cartHtml);
Это тот минимум, который необходим для решения вашей задачи.
Rodion 08.11.2016 16:24
@Incode, спасибо, скажите не могли бы вы jqcart.js хорошо про комментировать? Очень тяжело разбираться в коде.
Incode 08.11.2016 17:32
@Rodion, сейчас на это времени нет... даже к моему большому сожалению. У меня с августа не было ни выходных, ни праздников.
Страница 27 из 33  
Ваш комментарий:
X