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

Страница 3 из 33  
Valery 05.05.2020 17:21
@Гость, Спасибо за ответ.
Попробовал оба варианта, к сожалению они не работают.
Если честно, я уже неделю ищу где ошибка :)
Версия PHP 5.4.45
В Вашей папки с файлами я только внёс на 17 строке в handler.php свой e-mail, переименовал самую главную папку и больше нечего. Такое впечатление что чего-то не хватает для связи между файлами jqcart.min.js и handler.php. Нажимая на кнопку отправить, вижу браузер пытается отправить, так как он проверяет текст описания на грамотность языка. Но нет какой-либо реакции по отправки.
А так-же что интересно, когда заполненный заказ я отправляю на печать, то под модальном окном выбора принтера для печати теряются данные заказчика и не распечатываются (сам заказ распечатывается нормально). А в браузере данные заказчика остаются.
На этом же хостинге (папкой выше) у меня стоит php обработчик формы и нормально работает.
Я зарегистрировался и оставил свой e-mail на Вашей странице (если захотите контактировать на прямую :)
Заранее спасибо!
P.S. Вот я чайник, каким-то образом оказалось что я сообщение отправлял в тему о старой корзине :) Сейчас повторяюсь в новую
Гость 05.05.2020 18:41
@Valery, что у меня получилось
(я не автор плагина, мне пару лет назад очень сильно помогли с настройкой корзины в комментариях, ребят, спасибо ))) и теперь я пробую помочь вам).
При тестировании на локальном сервере получилось следующее:
- плагин не работает, если он лежит в отельной папке внутри сайта.
-- все заработало, когда папка php c handler.php и файлы из папки js были перенесены в корневые папки сайта (т.е. www - js и php -)
-- в этом случае заказы отправляются как со страницы html в корне (тогда переносим и css в корневую папку с css), так и из папок сайта, где лежит только страница с товаром.

Насчет распечатки заказа, да, со страницы не печатается, данные заказчика не подцепляются. Это не принципиально, поскольку закачку приходит заказ в форме таблички и на вашу почту приходит также дубль этого заказа со всеми данными, и оттуда вы можете его распечатать.
Valery 05.05.2020 21:32
@Гость, Большое спасибо что откликнулись!
Скажу честно, от экспериментов за это время, уже кругом идёт голова :(
Я сделал всё как Вы посоветовали, все файлы перенёс из папок в корневой каталог. В www.html файле изменил соответственно все относительные адреса на новое расположение файлов. К сожалению нечего не получилось.
Потом подумал и решил провести ещё один эксперимент: Обычно в формах на html страницах указывается адрес к php обработчику. Здесь как я понимаю такой адрес должен быть прописан в файле jqcart.min.js. Единственное место которое я вижу, это на строке 24 слеш заменить на адрес: handler.php. Заменил. Но к сожалению не помогло.
Эксперименты провожу на рабочем (не локальном сервере).
Возможно у Вас есть ещё какие-нибудь идеи? :)
Гость 05.05.2020 21:51
@Valery, перед тем как отправить вам комментарий, протестировала плагин 4 раза и все разы он сработал корректно в разных вариантах страниц. Письма упали во временную папку. После отправки комментария, все смолалось в 0. Даже на рабочем сайте тестовый плагин не запустился, поверила на нем на всякий случай. Что-то есть ещё в настройке - вспомню, напишу.
Valery 05.05.2020 22:26
@Гость, Да, ещё что интересно: Когда я примерно неделю назад начал новые эксперименты с этим плагином, у меня в браузере появились 23 килобайта не удаляемых кука, сегодня после эксперимента ещё к ним 10 килобайт добавилось. То есть сейчас невозможно очистить 33 килобайта куков из браузера так как у них нет адреса. Может это совпадение, но странное
Гость 05.05.2020 23:57
@Valery, День сегодня странный... Итак, плагин отлично работает - как из коневой папки, так и из подкаталогов. Разделять его на части не нужно ))) Это хорошие новости.

На локальном сервере (osPanel) все работает, если запускать сайт через значок сервера в трее, а не из папки (что и произошло после отправки комментария вам). Просто невнимательность была. Вы писали, что на локальном сервере не сработало -- возможно, тоже запускали напрямую из папки? Второй момент, посмотреть, какая версия php стоит у локального сервера.

На рабочий сайт вытащила старый архив, там версия ниже 5.4. и, для этой версии нужно править еще одну строку 70 - заменить $headers = []; на $headers = array();

В прошлый раз ее и не заметили.

Если версия 5.4.4, которая у вас на сайте, относится к варианту кода <5.4., то из-за строчки 70 у Вас не отправлялись письма. И, поправив ее + расскоментировав код для 5.4, возможно все заработает )
Гость 06.05.2020 00:03
@Valery, плагин не использует куки. Данные там хранятся в локалсторадж. И вообще, исходя из комментариев, трудно вам будет без базовых знаний... Если знаете JS, то сможете без проблем настроить плагин под себя (он не зашифрован). Если знаете PHP, то сможете что-угодно делать с данными заказа на сервере. Если ни тех, ни других знаний нет и вы даже не можете понять причину, почему плагин может не работать (не умете дебажить), то лучше кому-нибудь заказать сделать специально для вас то, что вам нужно, со всеми нужными настройками и т.д.
Valery 06.05.2020 14:54
@Гость,
Нее... критиковать новичка который пытается разобраться и предложить ему кого-то нанять оно просто...

Где я писал: «что на локальном сервере не сработало»? У меня в принципе нет локального сервера. Я всё делаю уже много лет на веб-редакторе линукса Bluefish, а тестирую на нормальном сервере и мне этого достаточно.
Спасибо за Вашу помощь! Буду тестировать Ваши идеи. Но что я не понял:
1. Вы пишете что моя версия 5.4.4 меньше 5.4 Это как? Против законов математики?
2. Так каким образом (или где) в файле jqcart.min.js. прописана связь с конкретным обработчиком handler.php для передачи на него данных?

Да, Вы правы, у меня не много знаний. Я - не профи, это моё хобби. С этим плагином я хочу бесплатно помочь своему серьёзно больному другу, который из-за болезни вот уже несколько лет вынужден находится дома и хоть как-нибудь подрабатывать комплектациями. По моей идее, эта корзина должна ему помочь. Да и я, по мере возможностей учусь. Именно поэтому я на этом сайте. И когда опубликованный здесь готовый плагин с нуля не работает, то задаю естественные вопросы «Где копать»?
Гость 14.05.2020 13:58
@Incode, Огромное спасибо за корзину и помощь по её доработки. Подскажите пожалуйста еще одно: как передать значение Чекбокса, которое выбрал пользователь в эту строку? <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>

Я хочу, чтобы передавался, например, размер обуви из выбранного чексбокса пользователем. Ну понятно, что нужно добавить data-атрибут в эту кнопку. Вот так: <button class="add_item" data-razmer="checkbox">Добавить в корзину</button>

Но как же передать значение этого выбранного чекбокса пользователя в дата-атрибут? Если пользователь выбрал 40 размер обуви, значит и мне дата-атрибутом передастся это значение.

@Incode, Огромное пожалуйста помогите, то уже не могу сообразить как. Всё перерыл.
Incode 14.05.2020 16:39
как передать значение Чекбокса
Самый простой способ - это добавлять значение в data-атрибут динамически.
$('check_box_selector').on('change', function() {
  $('button_selector').data('razmer', $(this).val());
});
Гость 14.05.2020 17:12
@Incode,

Самый простой способ - это добавлять значение в data-атрибут динамически.
$('check_box_selector').on('change', function() {
$('button_selector').data('razmer', $(this).val());
});

Я вообще полный ноль в программировании. Можно подробней пожалуйста. Самая важная функция для моего сайта, а не могу реализовать ((( Или же как правильно запрос в Гугле вбить?

@Incode, Выручайте )))
Incode 14.05.2020 17:54
Выручайте
check_box_selector - это селектор ваших переключателей размеров. В качестве селектора может быть любой отличительный признак: класс, атрибут и т.д. После того, как размер выбран (событие change), мы добавлем в data-атрибут кнопки его значение. button_selector - это селектор кнопки (принцип тот же, что и для чекбоксов). К примеру, у вас такие элементы:
<input type="radio" class="size" value="M">
<input type="radio" class="size" value="L">
<input type="radio" class="size" value="XL">
<button class="buy">Купить</button>
Значит, JS-код изменяем следующим образом:
$('.size').on('change', function() {
  $('.buy').data('razmer', $(this).val());
});
Пример в песочнице
Гость 14.05.2020 18:08
@Incode, вот нашел такое в Интернете, как мне доработать:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>
Если вы хотите получить строку "Mr", если выбран первый вариант (а не просто "1") , вы сделаете это следующим образом:
$( "#myselect option:selected" ).text();
// => "Mr"  


Как прописать этот $( "#myselect option:selected" ).text(); в эту строку:

<button class="add_item" data-id="7" data-razmer="Bugatti Veyron Super Sports" data-price="200" data-img="http://site.com/img/photo.png">Добавить в корзину</button>

Вот такой вариант не работает:
<button class="add_item" data-id="7" data-razmer="$( "#myselect option:selected" ).text();">Добавить в корзину</button>

Я хочу, чтобы посетитель выбрал размер через select и он прописался сразу в кнопку как data-атрибут. Ну и пользователь только один раз нажал на "Добавить в корзину".

Не могу понять как прописать всё это дело в этой кнопке вызова корзины <button class="add_item" data-razmer="????">Добавить в корзину</button>

@Incode, Выручайте )))
Incode 14.05.2020 18:27
$('#myselect').on('change', function() {
  $('.add_item').data('razmer', $('option:selected', this).text());
});
Гость 14.05.2020 20:50
@Incode, вставил так код,

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>


Ну и кнопка вызова корзины.
<button class="add_item" data-razmer="$('#myselect').on('change', function() {
  $('.add_item').data('razmer', $('option:selected', this).text());
});">Добавить в корзину</button> 


Но что-то не работает, так и выводит при вызове корзины такую строку:
$('#myselect').on('change', function() {
  $('.add_item').data('razmer', $('option:selected', this).text());
});


Может не так что-то сделал?
Incode 14.05.2020 21:39
Может не так что-то сделал?
Не то. Код нужно разместить на странице обернув его в теги <script></script>. Можно поставить код в самом конце страницы или внутри тегов <head> в начале, но тогда дополнить следующим образом:
<script>
$(function(){
    $('#myselect').on('change', function() {
      $('.add_item').data('razmer', $('option:selected', this).text());
    });
});
</script>
Гость 14.05.2020 21:43
@Incode, А, теперь понятно. Но как прописать выбор значения размера (data-атрибут) в саму кнопку? Что нужно прописать вместо знаков вопроса ниже? Вот это не пойму.

<button class="add_item" data-id="[xfvalue_id]" data-razmer="???">Добавить в корзину</button>
Incode 14.05.2020 22:05
Что нужно прописать вместо знаков вопроса ниже?
Ничего. Данные будут туда попадать автоматом при выборе размера из select-а
Гость 14.05.2020 22:28
@Incode, Всё работает. Спасибо. Но есть одна проблема. Когда делает заказ покупатель, то в корзине не видно, какой размер он выбрал. Ну то ладно, то в таблицу можно добавить, но она потом едет. Подскажи пожалуйста, как прописать к существующему data-атрибуту выбранный размер.

То есть в таблице (после нажатия на кнопку "Добавить в корзину") через точку с запятой показать выбранный размер.

Например, после названия товара через ; написать размер, чтобы не ковырять таблицу.

Туфли мужские; Размер: 44


Ну как-то так.
<button class="add_item" data-title="Туфли мужские; Размер: 44">Добавить в корзину</button>


Если писать так, то вылазит ошибка:
<button class="add_item" data-title="Туфли мужские; Размер: data-razmer=''">Добавить в корзину</button>
Incode 14.05.2020 23:05
Делайте это на стороне сервера. Просто сконкатенировать две строки:
$title_size =  $_POST['title'] . '; Размер: ' . $_POST['razmer'];
Гость 14.05.2020 23:18
@Incode, Подскажите пожалуйста подробнее что куда и в какой файл добавить-изменить. Я в программировании полный ноль умноженный на ноль.
Гость 15.05.2020 12:01
@Incode,
Делайте это на стороне сервера. Просто сконкатенировать две строки:
$title_size =  $_POST['title'] . '; Размер: ' . $_POST['razmer'];


Подскажите пожалуйста подробнее что куда и в какой файл добавить-изменить. Я в программировании полный ноль умноженный на ноль =)
Гость 19.05.2020 13:26
Добрый день, подскажите как сделать заказ на минимальную суму 345 грн и минимально количество 5 л?
Вот как тут:
if ($.trim($('[name=user_name]', $that).val()) === '' || $.trim($('[name=user_phone]', $that).val()) === '') {
$('<p class="jqcart-error">Пожалуйста, укажите свое имя и контактный телефон!</p>').insertBefore($that).delay(3000).fadeOut();
return false;
}
Только с ошибкой "<p class="jqcart-error">минимальное количество 5 л</p>"
Спасибо
Гость 20.05.2020 19:49
Подскажите как рядом с количеством товара вывести общую суммы ? Очень нужно
Valery 23.05.2020 14:29
Наконец я сам разобрался почему у меня не срабатывает handler.php.
Оказывается, у меня в тех. характеристиках сервера указан PHP больше 5.4, а по факту меньше.
Ещё раз спасибо @Гость за подсказки, а @Incode за замечательный код!
.............................

Теперь появилась новая проблема:
У меня на каждой странице корзина в открытом виде (так как клиентам удобнее видеть, как они собирают заказ).
Проблема в чём:
На странице 1, клиент что-то кладёт в корзину, потом клиент переходит на страницу 2, вносит какие-либо изменения в заказ. Потом нажав кнопку браузера «Назад» возвращается на страницу 1 и видит свой первоначальный заказ. Если перезагрузить страницу вручную, то заказ меняется на последний актуальный. Но об этом клиент не догадывается. Я искал в Гугле решение, как сделать автоматическое перезагружание страницы при возврате, но к сожалению подходящего рабочего варианта не нашел (возможно не хватает моих знаний :().

ПОЖАЛУЙСТА! Подскажите какую функцию/скрипт нужно написать и куда вставить для автоматического обновления содержимого корзины при возврате на предыдущую страницу.
Заранее ОГРОМНОЕ СПАСИБО!
Страница 3 из 33  
Ваш комментарий:
X