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

Страница 16 из 33  
spoon 04.01.2018 13:09
unction getNumber() {
$filename = 'orderNum.txt';
$number = file_get_contents($filename);
$number++;
file_put_contents($filename, $number);
return $number;
}

echo(getNumber());

$sub = $_POST['zakaz'].getNumber();
Incode 04.01.2018 13:43
код в принципе рабочий?
В принципе работать должен. Если у вас что-то не работает, то в первую очередь нужно смотреть лог ошибок.
Кстати, в вашем коде выше, вы вызываете функцию дважды: один раз для вывода (echo), а второй - для конкатенации и присваивании переменной. Не забудьте, что каждый вызов функции - это инкремент (увеличение на единицу) значения в файле.
spoon 04.01.2018 13:57
Спасибо большое, буду прикручивать)
spoon 05.01.2018 05:23
Здравствуйте, при отправки заказа лог ошибок выдает ошибку в этой строчке
$send_ok = mail($to, $subject, $body, implode("\r\n", $headers));
Может потому что домен на рф?
spoon 05.01.2018 11:16
Корзина просто супер, огромное спасибо!!!
Почиму то картинки в почте не показываются, в модальном окне все хорошо, а на почте нет их?
spoon 05.01.2018 11:34
Вот такая ссылка приходит на почту за место нормальной
https://resize.yandex.net/mailservice?url=http%3A%2F%2Fimg%2Fnokia.png&proxy=yes&key=cdd87a5d8c44388681e5e14b9ccd2a76
Incode 05.01.2018 11:51
выдает ошибку
Хорошо бы показывать текст ошибки.
Может потому что домен на рф?
Сомневаюсь. Письмо может не дойти до адресата, попасть в спам и т.д., но дело функции mail() - всего лишь отправить, а к результатам передвижения письма, она дела ни имеет.
Почиму то картинки в почте не показываются
Путь к изображению должен быть абсолютным и включающим домен и протокол. Т.е. если на сайте вы используете путь "/images/some_image.jpg", то для письма это будет "http://site.com/images/some_image.jpg"
spoon 05.01.2018 12:09
С путями разобрался, спасибо, вы правы.
Гость 06.01.2018 12:48
Подскажите, нужно,чтобы при обновлении страницы или переходе на другую страницу,выбранный товар оставался также в корзине, а не исчезал, как реализовать в коде ?
Incode 06.01.2018 13:29
при обновлении страницы ... товар оставался также в корзине
Товар и должен оставаться в корзине не только при обновлении страницы или при переходе на другую, но даже после закрытия браузера и последующего открытия в нём же вашего сайта. Если товары пропадают из корзины, то где-то в коде происходит очищение данных localStorage. Проверьте свой код. Может есть вызов $.jqCart('clearCart'); или что-то вроде localStorage.clear();.
spoon 07.01.2018 17:04
День добрый, ещё раз про кодировку)) всё работает отлично, но при добавлении в таблицу отправления переменных они на почте превращаются в знаки вопросов, причем переменные вне таблицы работают отлично.http://h801055215.nichost.ru
spoon 07.01.2018 17:06
Прописывал и в хетаккесс, не помогает. Сам php файл UTF-8 без BOM, сервер UTF-8.
spoon 09.01.2018 18:04
Ковыряясь который день с кодировкой)) понял, что проблема появления крокозябр связана в js файлах т.е. если мы меняем там какой то русский текст в дивах, то при попадании на html у него сбивается кодировка.
spoon 09.01.2018 18:05
Но с php файлом вообще другая история)) там кодировка сбивается в таблице, т.е. при изминении русских слов они на почте превращаются или в вопросы или ромбы.
spoon 10.01.2018 08:04
Сегодня частично проблему решил, перенес код jqcart.min.js в head стало всё Ок. Но проблема с формой php осталось, в таблице происходит перекодировка.
Гость 10.01.2018 15:30
Подскажите из-за чего может не отправляться заказ? При на нажатии на "отправить заказ" ничего не происходит
spoon 10.01.2018 16:48
Почту указали в php файле?
Гость 10.01.2018 21:55
Здравствуйте. Корзина супер спасибо! Может кто-нибудь поможет и напишет код, как записать данные из корзины в БД после нажатия кнопки отправить заказ.
spoon 11.01.2018 11:11
Не помешало бы) заранее благодарны.
Гость 11.01.2018 14:15
Сегодня частично проблему решил, перенес код jqcart.min.js в head стало всё Ок. Но проблема с формой php осталось, в таблице происходит перекодировка.

Тоже долго с этим возилась - помогло то, что сбросила все кодировки в файле min.js, т.е. получился файл вообще без кодировки, в .php utf-8 без BOM.
Гость 12.01.2018 22:16

spoon 10.01.2018 16:48
Почту указали в php файле?


да указал, сформировал заказ, нажимаю send application ничего не прооисходит
Гость 12.01.2018 22:51

spoon 10.01.2018 16:48
Почту указали в php файле?


да указал, сформировал заказ, нажимаю send application ничего не прооисходит


В консоли ошибка " Вот лог ошибки " Failed to load resource: the server responded with a status of 500 (Internal Server Error) /php/handler.php"

Менял только на нужные текста, очень странно, что определенное время работало нормально, потом перестало отправлять, ничего не происходит. Возможно проблема именно на стороне хостера?

Подключил лог ошибок, но он не появляется, как я понимаю из-за того что именно не отправляется форма
Incode 13.01.2018 02:15
Менял только на нужные текста
В первую очередь, проверьте файл, где делали изменения. Внимательно просмотрите его на предмет синтаксических ошибок. Возможно, что изменяли еще и htaccess. Какие-то недочеты в нём, так же могут вызывать ошибку 500. В любом случае, пятисотая - это ошибка сервера и к клиентской части отношения не имеет.
spoon 13.01.2018 05:34
А может настройки сервера меняли?
Гость 14.01.2018 13:47
Все ок, решил перезалить заново handler.php все заработало, ведать были неверные изменения!
Страница 16 из 33  
Ваш комментарий:
X