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

802 комментария

Страница 1 из 33  
Гость 25.08.2020 11:35

Гость 23.08.2020 17:12
Доброго дня.

Давненько установил эту корзину на сайт. Весьма нравится.
И вот только сейчас дошли руки сделать её на отдельной странице с выбором способа доставки и оформления на организацию.

Есть хитрый вопрос=)
Нету случайно наработок выпадающей "мини корзины" с номенклатурой, количеством и суммой всего?

Например: в хедере значёк корзины. При нажатии в попап появляется мини корзина с кнопкой "оформить заказ".


Сделал проще.
На сайте по сути 2 корзины теперь. Одна фулл версия на отдельной странице, а вторая в модальном окне.
Та, что в модальном окне оставил только табличку с товарами и суммой, вместо кнопок поставил ссылку на корзину фулл версию. (Естественно лишний код обработки из скрипта модальной корзины убрал).

Теперь дальше появился вопрос:
Как сделать, чтобы после добавления товара в корзину кнопка автоматически заменилась на кнопку "Уже в корзине" (и стала ссылкой на корзину)?
Гость 03.09.2020 10:59
Подскажите как удалить в этой корзине полноценной € этот знак в общей сумме ?я найти не могу в каком файле он расположен но явно не в html
Гость 03.09.2020 12:01
Подскажите как удалить в этой корзине полноценной € этот знак в общей сумме ?я найти не могу в каком файле он расположен но явно не в html


В куске кода ниже, параметр "currency":

// инициализация плагина
$nc.jqCart({
buttons: '.add_item',
handler: '/handler.php',
cartLabel: '.label-place',
visibleLabel: true,
openByAdding: false,
currency: 'руб.'
});

Рекомендую Вам внимательнее изучить код корзины.
Гость 03.09.2020 12:54
Спасибо я нашел ощибку и исправил а как мне сделать так чтобы я готовую корзину внешне занес на сайт и там отображались мои покупки ?я сделал корзину с помощью картинки и в css как мне вместо оформить заказ и номерацией поставить свою корзину готовую где будет работать счетчик ?
Гость 03.09.2020 20:40
я в плане расположений все понял но допустим я сделал корзину добавил в html код картинку корзины в css ее стилизовал с эффектами при наведении мышки как сделать так чтобы данной корзине подключить ее чтобы при нажатии заказать загоралась ну счетчик от 0 может доходить поразному зависит сколько покупок сделает человек вот такой вопрос могу ли я сделанную корзину на сss и html связать вместо cartLabel: '.label-place' дать другое название и она будет работать или нет?прошу подскажите кто нибудь буду очень благодарен.
Гость 04.09.2020 12:06
Кто может помочь я добавил код в html и сss сделал внешне свою корзину как мне сделать так чтобы эта корзина работала в плане если я нажимаю на кнопку добавить в корзину чтобы товар попадал в эту корзину и работал счетчик может можно как то редактировать label-place ПОД МОЮ ВНЕШНЕ КОРЗИНУ ?
Гость 04.09.2020 12:09
И как мне убрать надпись оформить заказ при этом заменить внешне на свою корзину и там есть счетчик 0 стоит чтобы он видо изменялся если добавляется товар можно ли как это организовать ?
Гость 04.09.2020 16:22
ПОД МОЮ ВНЕШНЕ КОРЗИНУ ?


1. Ничего не понял, но очень интересно )))

2. А что значит "ВНЕШНЕ КОРЗИНУ"?
Гость 04.09.2020 19:54
Смотрите ,я добавил рисунок картинки (корзина)потом ее стилизовал в css и при наведении курсора у меня была анимация красивая на корзине и внешне она мне очень понравилась да и вообще .НЕ подскажите как сделать так чтобы вместо вашей корзины которая в этом проекте есть модуль где текст оформить заказ и номерация ну счетчик так как мне свою корзину заменить на внешне вашу которая с надписью оформить заказ чтобы не было надписи и была моя корзина со счетчиком ,возможно ли как то стилизовать данный функционал - cartLabel: '.label-place',вот Это заменить на стилизацию под моим названием корзину можно ли добавить и будет ли она работать?
Гость 04.09.2020 20:07
ну хотябы как мне убрать текст оформить заказ и оставить только счетчик?а дальше допустим стилизовать
Гость 09.10.2020 00:52
Здравствуйте! Можно ли как то реализовать выбор количества перед добавлением в корзину? Спасибо)
Гость 23.10.2020 09:01
Добрый день! Классная корзина , но есть нюанс... Подскажите как решить:
Есть карточка товара.. добавлено несколько радиобоксов с параметрами. При нажатии радиокнопки в кнопку "Добавить в корзину" параметры выбора передаются, но при нажатии добавить в корзине изменяется количество товара , а не добавляется новый товар (имеется ввиду новый объект в локальном хранилище). Как именно обнулять значение отправляемой с кнопки добавить.
Гость 05.11.2020 23:32
Добрый день. Кто-нибудь пробовал сделать маску на телефон? типа +7 999 999 99 99
Гость 13.12.2020 00:19
@Гость, без проблем
Показать код


PS: SMTP настройки берите для своего почтового сервиса
Гость 10.02.2021 22:53
Ребята понять не могу! как вывести содержимое корзины в БЛОКЕ! мне не нужно новое окно
Гость 10.02.2021 22:55
Ребята подскажите - нужна ссылка на товар и отображение списка в блоке, без всплыващего окна.
shepelev.boris@gmail.com
Гость 15.02.2021 14:49
Добрый день. Подключил корзину к сайту, но библиотеки jquery-1.11.3 и jquery-3.5.1 вступают в конфликт. На jquery-3.5.1 плагин не работает, а на jquery-1.11.3 не работают другие скрипты. Пробую решить проблему через .noConflict, пока неудачно. Кто-нибудь сталкивался с похожей проблемой, подскажите пожалуйста решение. Спасибо.
Гость 15.02.2021 15:50
Все, не надо, по библиотекам разобрался.
Гость 26.02.2021 10:13
Добрый день. Подскажите, кто-нибудь реализовал добавление кнопки "Очистить корзину" в самой корзине? Метод clearCart у меня работает только на другой странице или так и должно быть? Попытался удалять все строки по аналогии с удалением одной строки, но знаний не хватает, не получается удалить одним кликом все строки. Заранее спасибо.
Гость 01.03.2021 12:56
Здравствуйте. Подскажите пожалуйста как добавить кнопки с фиксированной стоимостью доставки при оформлении заказа в корзине, что бы сумма увеличивалась на стоимость доставки?Спасибо
Гость 15.03.2021 12:27
Добрый день, подскажите, как убрать отображение ID товара, в корзине и письме?
Гость 15.03.2021 13:00
Добрый день, подскажите, как вместо ID товара показывать номер строки по порядку (1,2....), в корзине и письме?
m4ximka123 04.06.2021 13:46
Добрый день, подскажите пожалуйста, как подключить базу данных к данной корзине, и по нажатию на товар, происходила запись в саму базу. Заранее спасибо.
Гость 26.06.2021 01:26
Будет ли развитие корзины?
Очень много багов и не доработок, их пофиксить бы уже.
Гость 08.08.2021 03:35
Ну вы даете) Нахаляву вам дали норм плагин под заточку под себя, а вы еще наглеете тут чтоб вам все дорабатывали и фиксили, во народ пошел) Закажи на фрилансе доделку тогда, если сам не умеешь.
Страница 1 из 33  
Ваш комментарий:
X