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

Страница 1 из 33  
Гость 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
Ну вы даете) Нахаляву вам дали норм плагин под заточку под себя, а вы еще наглеете тут чтоб вам все дорабатывали и фиксили, во народ пошел) Закажи на фрилансе доделку тогда, если сам не умеешь.
Гость 15.10.2021 19:07
<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-img
file:///C:/Users/ASUS/Desktop/%D0%B2%D0%B5%D1%80%20batiskaf/index.html ?
Гость 10.01.2022 09:24
Шикарная корзина! Оптимизировал под себя.

Однако есть большая проблема и немного встал в тупик.

На сайте используется еще другой jQuery. Изначально эта корзина на сайте не заработала.
Использовал в начале:
jQuery(document).ready(function($){

Итого:
Показать код


При этом корзина заработала, однако перестал работать фильтр товаров.

Делал через алиас:
var $nc = jQuery.noConflict();
И далее менял $ на $nc - корзина работала, а фильтр по прежнему нет.

В файле jqcart.js тоже добавлял var $nc = jQuery.noConflict(); и всёравно фильтр не работает.

Только стоит убрать вывод корзины - фильтр тут же работает.

Как победить?))
Гость 17.09.2022 15:37
Добрый днь из 2022))) А как отправить заказ в гугле табличку и на почту гмайл?
Гость 02.10.2023 03:37
Будет обновление корзины?
Incode 03.10.2023 03:29
Будет обновление корзины?
Обновление этой корзины не актуально, но возможно будет новая корзина и без jQuery, т.к. технологии меняются и как-то не хочется тянуть за собой старьё. )
Страница 1 из 33  
Ваш комментарий:
X