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

Страница 20 из 33  
Гость 06.05.2017 01:22
Всем привет, это опять я, тот самый извращенный рэдбином быдлокодер.
С самого начала сталкивался с проблемой. Никак не мог вывести ответ о том, что заказ принят в обработку.
Вот сам обработчик

<?php
require "db.php";
parse_str($_POST['orderlist'], $orderlist);
parse_str($_POST['userdata'], $userdata);
$total_sum = 0;
foreach($orderlist as $id => $item_data) {
	$total_sum += (float)$item_data['count'] * (float)$item_data['price'];
	$total_count += (float)$item_data['count'];
	$vote=0;
$subject = 'Заказ от '.date('Y-m-d H:i:s').'г.';
$addf = R::dispense('addr');
$addf->name = $userdata['user_name'];
$addf->phone =$userdata['user_phone'];
$addf->Email =$userdata['user_mail'];
$addf->adress =$userdata['user_address'];
$addf->comment =$userdata['user_comment'];
$addf->Item_name =$item_data['title'];
$addf->Item_vin =$item_data['id'];
$addf->Item_count =$item_data['count'];
$addf->Item_price=$item_data['price'];
$addf->Items_total_price=$total_sum;
$addf->order_time=$subject;
$addf->already_vote=$vote;
$id = R::store($addf);
 $upload = R::load('forvin',$item_data['id']);
$upload->count-=$item_data['count'];
R::store($upload);
	
}
$addf = R::dispense('addr');
$addf->name = $userdata['user_name'];
$addf->Email =$userdata['user_mail'];
$addf->Item_count =$total_count;
$addf->Items_total_price=$total_sum;
$addf->order_time=$subject;
$id = R::store($addf);
$response = [
	'errors' => !$send_ok,
	'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
exit( json_encode($response) );
 ?>

Вопрос в том, что я делаю не так. Версия пхп старше седьмой. Делаю на локалке в Вампе. Возможно нет какого-либо жизненноважного участка кода здесь..Но я пытался полностью запустить тот скрипт, что был изначально. В итоге, ничего не вышло. В базу поля заносятся и все идеально работает...
Но как реализовать ответ - я, увы, не знаю. Очень сильно нуждаюсь в помощи или совете
Заранее большое спасибо)
Гость 06.05.2017 02:27
Через этот php не работает отправка на почту, в нем все верно?

<?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 = 'admin@best-shop.piva.net';
// 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>Email:</b> '.$userdata['user_mail'].'</li>
<li><b>Адрес:</b> '.$userdata['user_address'].'</li>
<li><b>Комментарий:</b> '.$userdata['user_comment'].'</li>
</ul>
<p>Информация о заказае:</p>
'.$tbl.'
<p>Письмо создано автоматически. Пожалуйста, не отвечайте на него, т.к. все ушли на пляж!</p>
</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 = mail($to, $subject, $body, implode("\r\n", $headers));

// Ответ на запрос
$response = [
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
// ! Для версий PHP < 5.4 использовать традиционный синтаксис инициализации массивов:
/*
$response = array (
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
);
*/
exit( json_encode($response) );
Гость 08.05.2017 16:44
Каковы могут быть причины того, что от сервера нет ответа?
В примере все работает. На локальном сервере - нет
Гость 08.05.2017 18:47
Каковы могут быть причины того, что от сервера нет ответа?
В примере все работает. На локальном сервере - нет

Возможно, другая версия php в настройках локального сервера.
Гость 09.05.2017 19:44
Версия PHP 7.0.1
Но при изменении на 5.6.25 ноль эмоций, к сожалению
Гость 09.05.2017 21:28
Проверял у знакомого. На Денвере все работает. Понимаю, что вопрос немного не по теме. Но если кто знает - отзовитесь...
В чем может быть причина отсутствия ответа на Вампе
Гость 10.05.2017 00:53
Такс, после небольшого мозгового штурма все стало на свои места. Если коротко. Не отправлялся запрос, т.к. до этого в коде встречались ошибки, связаны они были с тем, что у Вампа нет никакого мэил сервера, по дэфолту он просто не предусматривается. Разобравшись с отправкой писем - разобрался и с ответом сервера.
Гость 10.05.2017 08:35
Отлично! Мне надо было сделать магазин за праздники, но я забухал, остался день, и этот скрипт меня оч выручил, я бы лучше не написал!
Гость 10.05.2017 23:05
И снова всем привет. Все рабоатет хорошо..Кроме Кириллицы.. Вместо нее в качестве овтета получаю следующее:
PP=QP>QP P7P0P:P0P7QP8P:P5:

P$.P.P.: P2P2P2
P"P5P;.: P2P2P2
Email: kostkaras@mail.ru
PP4QP5Q:
PP>P

PP=QP>QP P7P0P:P0P7P0P5:
ID PP0P8PP2P0P=P8P5 P&P5P=P0 PP>P;-P2P>
4 P P>P;P8P:P>P2Q P9 P

P4QP;Q P=P0QQP3P8P2P0QP5P;Q QP5P
584.96 1
5 P P>P;P8P:P>P2Q P9 P

P4QP;Q P=P0QQP3P8P2P0QP5P;Q QP5P
586.60 1
PQP>P3P>: 1171.56

PP8QQ P

QP>P7P4P0P=P> P0P2QP>PP6P0P;QP9QQP0, P=P5 P>QP2P5QP0P9QP5 P=P0 P=P5P3P>, Q.P:. P2QP5 QQP;P8 P=P0 P?P;QP6!

В гугле найти нчиего не могу. Кодировка точно ютф-8.
Кто знает - отзовитесь пожалуйста
Гость 10.05.2017 23:27
Вопрос вновь отпал. Решил все просто. Отключением смтп4Дев и включением вместо него "Test Mail Server Tool User's Manual"
Гость 14.05.2017 18:27
А чего выдает сообщение об успешной отправке, а на почту письма не доходят?
Хостинг используется - hostinger.com.ua, РНР Версия 7.0
Гость 15.05.2017 14:33
Мне 2 письма приходят при заказе, скорее всего из-за этой строки
$headers[] = 'Bcc: Admin <'.$admin_mail.'>'; // скрытая копия админу сайта, т.е. вам

Как ее отменить? Ибо при удалении, либо закомментировании скрипт не работает.
Попробовал сделать так
$headers[] = 'From: От админа <zakaz@site.com>'; // От кого
$headers[] = 'Bcc: example@site.com'; // скрытая копия админу сайта, т.е. вам

После этого приходят 2 письма на example@site.com, а на почту админа zakaz@site.com не приходит.

Как решить?
Гость 15.05.2017 15:57
Как поставить максимальное кол-во заказа? Подскажите пожалуйста
Гость 15.05.2017 17:12
Почему приходит 2 одинаковых письма при отправке заказа?
Гость 18.05.2017 00:57
выкладываю отправление писем только из-за большого уважения к автору этого скрипта
Показать код
Incode 18.05.2017 02:07
Господа! Я уже сбился со счета повторять две вещи:
1. Я сейчас крайне занят и на ответы времени просто физически не хватает.
2. Пользуйтесь классом PHPMailer и не изобретайте колесо, если у вас пока не хватает знаний написать код отправки почты самостоятельно.
Гость 22.05.2017 13:56
Тоже интересует, как менять количество товара вне корзины. Допустим, есть кнопка заказать и рядом выбор количества товара - как передать нужное количество в корзину?
dohuze 25.05.2017 16:10
Скажите, пожалуйста, если товаров много, то как добавить вертикальную полосу прокрутки ?
Incode 25.05.2017 16:38
@dohuze, Для класса "jqcart-checkout", добавляем в css:
.jqcart-checkout {
    /* ... */
    height: 500px; /* или max-height. Значение ваше */
    overflow-y: auto;
}
dohuze 26.05.2017 09:32
Спасибо
Гость 31.05.2017 15:21
Подскажите, как заказ, формируемый в файл handler.php и отправляемый на почту отправить также в БД? В файле handler.php к базе подключаюсь. Буду благодарен очень!
Incode 31.05.2017 16:04
отправить также в БД
В переменной $orderlist - массив со списком заказываемых товаров, а в переменной $userdata - данные покупателя. В начале файла "handler.php" (строки 10,11), есть закомментированные строки. Раскоментируйте их и посмотрите в "cart_data_log.txt", что и в каком виде вы получаете на сервере.
Гость 31.05.2017 17:48
Отлично, спасибо
Гость 21.06.2017 08:30
Корзина отличная, но с мобилы пользоваться неудобно. МОЖЕТ кто переписал под себя открытие корзины в .html или .php? Поделитесь пожалуйста кодом.
Спасибо.
Serg 25.06.2017 18:57
Здравствуйте, спасибо администратору за классную корзину! Всё работает отлично! Я не очень силён в js, нужна помощь, в js дописать возможность в блоке товара, клиенту изменять кол-во товара и выбор товара по характеристикам. Буду благодарен или пишите 6421935@mail.ru
Страница 20 из 33  
Ваш комментарий:
X