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

Страница 5 из 33  
G.V.1 19.05.2019 12:40
@kwm25, пробовал, стоит сейчас последняя. результат одинаковый ((
G.V.1 19.05.2019 14:23
@kwm25, перезагрузил сервер, стал понимать php. Но сейчас другая проблема. При отправки письма выдает ошибку
// Ответ на запрос
$response = [
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'

Подскажите, в чем может быть беда?
kwm25 20.05.2019 07:44
@G.V.1, честно, не знаю. Не приходилось сталкиваться с таким.
kwm25 20.05.2019 07:46
А насчёт этого никто ничем не может помочь?(

Может кто знает, или сталкивался. Помогите пожалуйста. Возможно ли сделать счётчик количества товаров? То есть задаётся количество товара и после оформления заказа это количество уменьшается. Или какое нибудь уведомление о не наличии товара на складе, при этом его не возможно купить. Заранее спасибо!
Гость 13.06.2019 20:39
Так и не разобрался как вместо кнопки "В корзину" Сделать так - 1 + ? Визуально кнопку можно вынести с формы оформления заказа, но она не работает и не определяет id !
Гость 17.08.2019 15:51
Можете пожалуйста помочь -
Куда нужно вводить EMAIL?
attacer 22.09.2019 01:25
Добрый день, подскажите пожалуйста
У товара есть несколько вариация - через onclick у кнопки меняю data-id, чтобы якобы новый товар был.
При первом изменении атрибута товар попадает в корзину, а при последующем - уже нет. Только обновление страницы помогает.

Что необходимо подкорректировать?
Спасибо!
Гость 18.10.2019 22:57
Написал расширение для одной CMS на файлах с использованием этого скрипта:
https://my-engine.ru/extensions/zsINva4Bm1aZnphubGfgmyQ3NzwCGsjU
Гость 23.10.2019 19:31
Была у кого-то проблема с отправкой? У меня просто не переходит handle.php . Как можно исправить?
Гость 24.10.2019 06:21
Была у кого-то проблема с отправкой? У меня просто не переходит handle.php . Как можно исправить?

Какую ошибку выдает?
Гость 09.11.2019 19:36
Подскажите пожалуйста как сделать чтобы половина товаров считалось в целых числах а остальное в дробных десятичных
overlord 09.11.2019 23:20
Здравствуйте, Подскажите пожалуйста как сделать чтобы половина товаров считалось в целых числах а остальное в дробных десятичных
Гость 29.11.2019 12:23
Добрый день. Хорошая корзина. Спасибо автору! Как еще сделать, чтобы данные внесенные в поля ввода сохранялись при возврате к покупкам?
Гость 30.11.2019 13:28
@Incode, подскажите пожалуйста как подключить этот файл.Спасибо.
<?php
// Подключаемся к базе (данные доступа изменить на свои)
$dbh = new \PDO('mysql:host=localhost;dbname=MY_DATABASE', 'MY_USERNAME', 'MY_PASSWORD');
// Записываем в таблицу order основные данные по заказу
$query = "INSERT INTO `order` (`username`, `email`, `telephone`, `address`, `comment`) VALUES (?, ?, ?, ?, ?)";
$sth = $dbh->prepare($query);
$sth->execute([
    $userdata['user_name'],
    $userdata['user_mail'],
    $userdata['user_phone'],
    $userdata['user_address'],
    $userdata['user_comment'],
]);
// Если заказ успешно записан, то получаем ID заказа (!должно быть поле с автоинкрементом)
if($order_id = $dbh->lastInsertId()) {
    // Записываем в таблицу order_product каждый из заказанных товаров, с привязкой к ID заказа
    $query = "INSERT INTO `order_product` (`order_id`, `product_name`, `price`, `count`) VALUES (?, ?, ?, ?)";
    $sth = $dbh->prepare($query);
    foreach($orderlist as $id => $item_data) {
        $sth->execute([
            $order_id,
            $item_data['title'],
            $item_data['price'],
            $item_data['count']
        ]);
    }
    // * Другим вариантом, может быть сгененрирована строка запроса с "мультивставкой"
    // и запрос выполняется один раз, а не в цикле.
    // Пример такого запроса:
    // INSERT INTO tbl_name (a,b,c) VALUES (1,2,3),(4,5,6),(7,8,9);
}
Гость 30.11.2019 16:40
@Incode,подскажите пожалуйста как подключить этот файл.Спасибо.
<?php
// Подключаемся к базе (данные доступа изменить на свои)
$dbh = new \PDO('mysql:host=localhost;dbname=MY_DATABASE', 'MY_USERNAME', 'MY_PASSWORD');
// Записываем в таблицу order основные данные по заказу
$query = "INSERT INTO `order` (`username`, `email`, `telephone`, `address`, `comment`) VALUES (?, ?, ?, ?, ?)";
$sth = $dbh->prepare($query);
$sth->execute([
$userdata['user_name'],
$userdata['user_mail'],
$userdata['user_phone'],
$userdata['user_address'],
$userdata['user_comment'],
]);
// Если заказ успешно записан, то получаем ID заказа (!должно быть поле с автоинкрементом)
if($order_id = $dbh->lastInsertId()) {
// Записываем в таблицу order_product каждый из заказанных товаров, с привязкой к ID заказа
$query = "INSERT INTO `order_product` (`order_id`, `product_name`, `price`, `count`) VALUES (?, ?, ?, ?)";
$sth = $dbh->prepare($query);
foreach($orderlist as $id => $item_data) {
$sth->execute([
$order_id,
$item_data['title'],
$item_data['price'],
$item_data['count']
]);
}
// * Другим вариантом, может быть сгененрирована строка запроса с "мультивставкой"
// и запрос выполняется один раз, а не в цикле.
// Пример такого запроса:
// INSERT INTO tbl_name (a,b,c) VALUES (1,2,3),(4,5,6),(7,8,9);
}
Гость 30.11.2019 16:43
Подскажите пожалуйста как подключить данный файл.

<?php
// Подключаемся к базе (данные доступа изменить на свои)
$dbh = new \PDO('mysql:host=localhost;dbname=MY_DATABASE', 'MY_USERNAME', 'MY_PASSWORD');
// Записываем в таблицу order основные данные по заказу
$query = "INSERT INTO `order` (`username`, `email`, `telephone`, `address`, `comment`) VALUES (?, ?, ?, ?, ?)";
$sth = $dbh->prepare($query);
$sth->execute([
$userdata['user_name'],
$userdata['user_mail'],
$userdata['user_phone'],
$userdata['user_address'],
$userdata['user_comment'],
]);
// Если заказ успешно записан, то получаем ID заказа (!должно быть поле с автоинкрементом)
if($order_id = $dbh->lastInsertId()) {
// Записываем в таблицу order_product каждый из заказанных товаров, с привязкой к ID заказа
$query = "INSERT INTO `order_product` (`order_id`, `product_name`, `price`, `count`) VALUES (?, ?, ?, ?)";
$sth = $dbh->prepare($query);
foreach($orderlist as $id => $item_data) {
$sth->execute([
$order_id,
$item_data['title'],
$item_data['price'],
$item_data['count']
]);
}
// * Другим вариантом, может быть сгененрирована строка запроса с "мультивставкой"
// и запрос выполняется один раз, а не в цикле.
// Пример такого запроса:
// INSERT INTO tbl_name (a,b,c) VALUES (1,2,3),(4,5,6),(7,8,9);
}
Гость 04.12.2019 10:00
Ау, есть кто тут?
WooToy 17.12.2019 02:23
Здравствуйте! Очень интересный плагин, но вот одна проблема, не приходят заявки на почту, пишет заявка принята в обработку! Что может быть? Спасибо! Сайт wootoy.ru
Гость 17.12.2019 15:33
@WooToy, Покажите содержимое файла handler.php
WooToy 17.12.2019 22:17
@Гость,
<?php
parse_str($_POST['orderlist'], $orderlist);
parse_str($_POST['userdata'], $userdata);
/*
$orderlist - массив со списком заказа
$userdata - данные заказчика
*/
// При желании, можно посмотреть полученные данные, записав их в файл:
// file_put_contents('cart_data_log.txt', var_export($orderlist, 1) . "\r\n");
// file_put_contents('cart_data_log.txt', var_export($userdata, 1), FILE_APPEND);
// Заголовок письма
$subject = 'Заказ от '.date('d.m.Y').'г.';
// ваш Email
$admin_mail = 'wootoy@mail.ru';
// Email заказчика (как fallback - ваш же Email)
$to = !empty($userdata['user_mail']) ? $userdata['user_mail'] : $admin_mail;
// Формируем таблицу с заказанными товарами
$tbl = '<table style="width: 100%; border-collapse: collapse;">
	<tr>
		<th style="width: 1%; border: 1px solid #333333; padding: 5px;">ID</th>
		<th style="width: 1%; border: 1px solid #333333; padding: 5px;"></th>
		<th style="border: 1px solid #333333; padding: 5px;">Наименование</th>
		<th style="border: 1px solid #333333; padding: 5px;">Цена</th>
		<th style="border: 1px solid #333333; padding: 5px;">Кол-во</th>
	</tr>';
$total_sum = 0;
foreach($orderlist as $id => $item_data) {
	$total_sum += (float)$item_data['count'] * (float)$item_data['price'];
	$tbl .= '
	<tr>
		<td style="border: 1px solid #333333; padding: 5px;">'.$item_data['id'].'</td>
		<td style="border: 1px solid #333333;"><img src="'.$item_data['img'].'" alt="" style="max-width: 64px; max-height: 64px;"></td>
		<td style="border: 1px solid #333333; padding: 5px;">'.$item_data['title'].'</td>
		<td style="border: 1px solid #333333; padding: 5px;">'.$item_data['price'].'</td>
		<td style="border: 1px solid #333333; padding: 5px;">'.$item_data['count'].'</td>
	</tr>';
}
$tbl .= '<tr>
		<td  style="border: 1px solid #333333; padding: 5px;" colspan="3">Итого:</td>
		<td style="border: 1px solid #333333; padding: 5px;"><b>'.$total_sum.'</b></td>
		<td style="border: 1px solid #333333;">&nbsp;</td>
	</tr>
</table>';
// Тело письма
$body = '
<html>
<head>
  <title>'.$subject.'</title>
</head>
<body>
  <p>Информация о заказчике:</p>
	<ul>
		<li><b>Имя:</b> '.$userdata['user_name'].'</li>
		<li><b>Телефон:</b> '.$userdata['user_phone'].'</li>
		<li><b>Адрес:</b> '.$userdata['user_address'].'</li>
		<li><b>Комментарий:</b> '.$userdata['user_comment'].'</li>
	</ul>
	<p>Информация о заказае:</p>
  '.$tbl.'
</body>
</html>';
// Заголовки
$headers   = []; // или $headers = array() для версии ниже 5.4
$headers[] = 'MIME-Version: 1.0'; // Обязательный заголовок
$headers[] = 'Content-type: text/html; charset=utf-8'; // Обязательный заголовок. Кодировку изменить при необходимости
$headers[] = 'From: Best Shop <noreply@best-shop.piva.net>'; // От кого
$headers[] = 'Bcc: Admin <'.$admin_mail.'>'; // скрытая копия админу сайта, т.е. вам
$headers[] = 'X-Mailer: PHP/'.phpversion();
// Отправка
$send_ok = true;//mail($to, $subject, $body, implode("\r\n", $headers));
// Ответ на запрос
$response = [
	'errors' => !$send_ok,
	'message' => $send_ok ? '<div style="padding: 20px;">Заказ принят в обработку!</div>' : '<div style="padding: 20px;">Хьюстон! У нас проблемы!</div>'
];
// ! Для версий PHP < 5.4 использовать традиционный синтаксис инициализации массивов:
/*
$response = array (
	'errors' => !$send_ok,
	'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
);
*/
exit( json_encode($response) );


Вроде только email поменял
WooToy 17.12.2019 22:21
скорее всего дело в хостинге, стоковую версию залил, без изменений, только email поменял, так же((
WooToy 17.12.2019 23:15
Всё, решил проблему. Я скачивал версию с гитхаба, скачал с сайта, заработало.
Гость 18.12.2019 10:00
в файле нужно было поменять строку
// Отправка
$send_ok = true;//mail($to, $subject, $body, implode("\r\n", $headers));
на
// Отправка
$send_ok = mail($to, $subject, $body, implode("\r\n", $headers));
WooToy 19.12.2019 10:16
Сложно ли будет подключить к этой корзине какую нибудь платежную систему?
WooToy 21.12.2019 04:12
А как сделать на основе этого скрипта функцию "Добавить в избранное"?
Страница 5 из 33  
Ваш комментарий:
X