Корзина jQuery
При создании интернет-магазина одной из основных частей является корзина. Корзину лучше всего писать с использованием javascript, это позволяет пользователю контролировать и очищать ее без перегрузки страницы. Сейчас мы рассмотрим как сделать корзину с использованием jQuery. В этом нам помогут плагины к нему jQuery cookie и .
Для начала пару слов о том, как и что будем делать. Т.к. нам надо сразу показывать количество товаров и полную сумму заказа, то изначально надо знать как количество определенного товара так и его цену.
Добавлять в корзину будем по ссылке, формат ссылки следующий:
<a id="good-2356-600" href="#" class="addCart">В корзину</a>
Вся суть заключается в class присвоенному ссылке и id. Мы будем отслеживать все клики по классу addCart, id состоит из следующих параметров: первый - good (значит что добавляем товар), второй - id товара в вашей базе, третий - цена товара за 1 шт, и четвертый - необязательный (в примере не указан) означает кол-во добавляемого товара. Количество можно например легко менять, если поставить рядом счетчик или выпадающий список. Но там уже потребуется дополнительный скрипт для изменения id, или же можно переписать основную функцию и количество отследить там. Но в примере все упрощено.
Отслеживать клик по ссылке мы будем так:
$('a.addCart').click(function() {
data = $(this).attr('id').split('-');
addCart(data[1], data[2], 1);
return false;
});
Как видно из примера мы отслеживаем id у ссылки и разбиваем его по символу "-" получая параметры.
Вот синтаксис функции добавления:
function addCart(p1, p2, p3){
if (!p3 || p3==0) {p3=1;}
msg.id = p1; // АйДи
msg.price = parseInt(p2); // Цена
msg.count = parseInt(p3); // Количество
var check = false;
var cnt = false;
var totalCountGoods = 0;
var totalprice = 0;
var goodsId = 0;
var basket = '';
$('#clearBasket').show();
$('#checkOut').show();
$('.hPb').show();
$('.hPe').hide();
basket = decodeURI($.cookie("basket"));
if (basket=='null') {basket = '';}
basketArray = basket.split(",");
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":");
if(goodsId[0]==msg.id) // ищем, не покупали ли мы этот товар ранее
{
check = true;
cnt = goodsId[1];
break;
}
}
if(!check) {
basket+= msg.id + ':' + msg.count + ':' + msg.price + ',';
} else {
$.jGrowl("Уже есть в корзине!");
}
if(!check) {
$.jGrowl("Добавлено!");
basketArray = basket.split(",");// Находим все товары
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":"); // Находим id товара, цену и количество
totalCountGoods+=parseInt(goodsId[1]);
totalprice+=parseInt(goodsId[1])*parseInt(goodsId[2]);
}
$('#totalGoods').text(totalCountGoods);
$('#totalPrice').text(totalprice);
$.cookie("totalPrice", totalprice, {path: "/"});
$.cookie("basket", basket, {path: "/"});
}
}
Теперь посмотрим HTML код корзины:
<div id="basket">
<table>
<tbody>
<tr class="hPb">
<td>Выбрано:</td>
<td><span id="totalGoods">0</span> товаров</td>
</tr>
<tr class="hPb">
<td>Сумма:</td>
<td><span id="totalPrice">0</span> руб.</td>
</tr>
<tr class="hPe">
<td colspan="2">Корзина пуста</td>
</tr>
<tr>
<td><a id="clearBasket" href="#">Очистить</a></td>
<td><a id="checkOut" href="/basket/">Оформить</a></td>
</tr>
</tbody>
</table>
</div>
// Прячем по умолчанию ссылки "Очистить" и "Оформить"
<style>
#clearBasket, #checkOut {
display: none;
}
.hPb {
display: none;
}
</style>
Теперь код, который вызывается при нажатии на ссылку "Очистить корзину"
$('#clearBasket').click(function() {
$.cookie("totalPrice", '', {path: "/"});
$.cookie("basket", '', {path: "/"});
$('#totalPrice').text('0');
$('#totalGoods').text('0');
$('.hPb').hide();
$('.hPe').show();
$(this).hide();
$('#checkOut').hide();
$.jGrowl("Корзина очищена!");
return false;
});
Код не сложный, сперва покажется что там много лишнего, но такая навороченность оправдывается работой во всей браузерах, в том числе ie6.
Необходим еще один кусок кода. Ведь когда мы обновляем страницу или переходим на другую браузер не запоминает добавляли мы товары или нет в корзину, т.к. оно содержится в куки. Следующий код можно реализовать на PHP, но мы рассмотрим его на javascript.
Этот код лучше всего помещать в самом сверху всех наших функций:
$(document).ready(function(){
msg = new Array();
var basket = '';
var totalprice = 0;
var totalCountGoods = 0;
if (!$.cookie("basket")) {$.cookie("basket", '', {path: "/"});}
basket = decodeURI($.cookie("basket"));
basketArray = basket.split(",");// Находим все товары
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":"); // Находим id товара, цену и количество
totalCountGoods+=parseInt(goodsId[1]);
totalprice+=parseInt(goodsId[1])*parseInt(goodsId[2]);
}
if (totalprice > 0) {
$('#clearBasket').show();
$('#checkOut').show();
$('.hPb').show();
$('.hPe').hide();
}
if (!totalprice) {totalprice = 0;}
$('#totalPrice').text(totalprice);
$('#totalGoods').text(totalCountGoods);
});
Вот собственно и все. Этого вполне достаточно для реализации корзины на jQuery. Оформление заказа так же легко пишется. Получаете строку из куки, разбиваете ее и по id уже узнаете и название товара и цену. Почему цену? Ведь цена у нас и так имеется в куки. Это для безопасности, для того чтобы хитрые люди не вписывали в куки цену меньшую, чем она есть за товар.
(12 votes, average: 4,67 из 5)
Loading ...
Loading ...
94 Комментариев на «Корзина jQuery»
Спасибо огромное весь интернет перерыл и у буржуев искал полно всего но настолько простого не чего не нашел
а было необходимо именно простая реализация.
Well-loved. Like or Dislike:
4 
0
Ответить
только вот здесь опечатку исправьте
строка 9 for(var i=0; i 0) {
Ответить
Спасибо на добром слове!
Да, там опечатка (парсер съел) — исправил.
Ответить
На всякий случай, если не будет что-то работать — сделал пример-демо, ссылка в конце статьи.
Ответить
как же добавить динамически количество добавляемого товара, прошу прощения за каламбур)..
если допустим рядом будет стоять импут вида
где 345 — id товара
Ответить
импут «вида» не прошел)..
ну общими словами — обычный input с value=»нужное количество» и name = «айди нашего товара»
Ответить
Value с input можно взять функцией val()
Подробнее тут
http://api.jquery.com/val/
А в name — id нашего товара я бы не стал запихивать. Лучше просто, также id инпуту.
Таким образом в функции, где мы отслеживаем клик по сути Вам нужно будет добавить взятие значение с input. Но чтобы его взять, инпуту нужно будет присвоить {id товара}-count, чтобы значение было например 324234-count.
Когда будете брать значение обращаться к id инпута будете так
$({id товара}-count).val()
Вроде понятно объяснил)
Ответить
Здравствуйте, пожалуйста покажите самый простейший пример оформления того что в корзине или вывода того что в корзине. У меня очень мало опыта работы с jq.
Ответить
Пример работы того что в корзине есть по ссылке с примером. Просто подобавляйте товары и увидите как оно отображается. Оформить можно с помощью CSS.
Работать непосредственно с корзиной лучше на PHP, функцией $_COOKIE, т.к. именно в куки хранятся все товары (id и количество).
Берете строку из $_COOKIE, разбиваете на массив, листаете, по ID выцепляете название товаров. Сложного ничего нет.
Ответить
так куки в этом примере написаны на жаве, пхп тут ни при чем. на пхп лишь только заросы к базе писать учитывая параметры полученные из жавы…
Ответить
На яваскрипте, а не на яве. Это разные вещи, не путайте.
Вышеописанный скрипт пишет состояние корзины в куки и позволяет без перезагрузки страницы добавлять товары в корзину.
Оформлять заказ, считывать данные о товарах — все равно придется на серверном языке (PHP например)
Ответить
подскажите как загружать из cookie (на других страницах каталога) данные о добавленных товарах в корзину ?
Ответить
неактуально ^^
Ответить
А почему jGrowl в примере не работает?
Ответить
Костя, в начале поста написано что потребуются два плагина jCookie и jGrowl.
Чтобы пример был проще в плане исходного кода — сообщения jGrowl я заменил обычными alert().
jGrowl можно найти на его офсайте.
Ответить
Добрый день! Спасибо за интересный материал. Но на практике у меня возникла проблема с выделением переменной из куки.
Имеется кука (выведено с помощью print_r):
Array ( [totalPrice] => 1600 [basket] => 23586:1:300,2356:1:600,2357:1:700, [PHPSESSID] => 45848ad63db800392d043279bfe0bd87 )
Теперь я хочу выделить переменные basket вот так:
for ($i = 0; $i <= count($_COOKIE['basket']); $i++)
{
echo $_COOKIE['basket'][$i]." «;
}
Выводит: 2
3
А хотелось бы: 23586:1:300
2356:1:600
2357:1:700
Что тут не так? Сегодня всю голову сломал, помогите, пожалуйста!
Ответить
И ещё можно добавить работу с сессиями (это для тех пользователей у кого куки отключены)?
Ответить
Отличная статья, спасибо большое. Вот только не получается у меня из куки выцепить с помощью пхп только айдишники товаров. Строку разбиваю, но немогу получить вывод айди — выводит все подряд -__-. Догадываюсь, что цикл, но пока — что-то безрезультатно..
Ответить
Андрей, javascript напрямую работать с сессиями не умеет, т.к. он работает на стороне клиента. Можно слать запросы в файл PHP, а тот уже пусть пишет сессии. Собственно статья о корзине, и данный код усложнит общий.
Eugene, раз у Вас значения перечисляются через запятую, то можно разбить строку в массив функцией explode
$basketArray = explode(«,», $_COOKIE["basket"]);
Потом пролистать массив
for ( $i=0; $i
}
Ответить
Код побился, вот
Ответить
Благодарю, так и делал, но вопрос состоял немного в другом, извиняюсь — неправильно сформулировал: возможно ли сделать вывод скажем не всех значений куки, а только айди, при том, что в куки содержатся айди:кол-во:цена
Ответить
Да, точно также разбиваете вашу строку по знаку двоеточие.
Результат в элементах массива и будет данными
Ответить
Спасибо, но мне кажется если товаров в корзине будет много фокус не пройдет. Или пройдет, но я с ума сойду, пока сделаю. Мне кажется в данном случае целесообразней, записать отдельную куку, в которой будут храниться только айдишники, а потом оперировать ими уже проще будет, как Вы считаете?
Ответить
А в чем проблема? Прогоняйте как в первом исходнике через for весь массив. Внутри цикла делите по двоеточию, получайте данные, а потом делайте с ними все что хотите. Стройте таблицу заказа например.
Алгоритм такой
==================
Берем куку
Разделяем ее по запятой, получаем массив
Прогоняем массив в цикле.
Внутри цикла делим строку по двоеточию.
Получаем данные, айди, количество и цену.
Ответить
Спасибо, вроде получилось, но выглядит как порнография :)
Ответить
Спасибо большое! Теперь нужную переменную выделил))) Ну а с сессиями поразмыслю на досуге!
Ответить
Здравствуйте!
Спасибо за труд, очень простое и эффективное решение!
Подскажите, пожалуйста, как сделать, чтобы при повторном нажатии на товар количество в куках увеличивалось, вместо появления сообщения? Какую команду нужно написать? Спасибо.
Ответить
makecode Ответил:
Май 6th, 2011 at 22:11
Изменения небольшие. Вам нужно как в примере пролистать массив
for(var i=0; i
Второй вариант. Зная id и цену товара, а также текущее количество можно собрать строку, например 2565:1:600
В центре это количество, следовательно собрав строку уже с увеличенным параметром, можно заменить кусок строки в куки на новую
cookie.replace(«2565:1:600″, «2565:2:600″)
И записать.
Ответить
redmol Ответил:
Май 10th, 2011 at 14:27
Спасибо, за ответ! Буду разбираться.
Подскажите еще, пожалуйста: как можно сделать, чтобы выполнялось добавления в корзину и переход на другую страницу? Нижеследующим способ не прокатил:
Перейти в корзину
Ответить
makecode Ответил:
Май 10th, 2011 at 15:36
Там, где отслеживаете клик, после функции addCart()
Поставить
location.href=’basket.php’;
Ответить
redmol Ответил:
Май 10th, 2011 at 16:03
ставил вот здесь, в разных местах, не работает:
$(‘a.addCart’).click(function() {
data = $(this).attr(‘id’).split(‘-’);
addCart(data[1], data[2], 1);
location.href=’basket.php’;
return false;
});
Ответить
makecode Ответил:
Май 10th, 2011 at 16:10
Рекомендую firebug для отслеживания ошибок.
Смотрите
Проверьте синтаксис, может кавычки не там или не те поставили.
Ответить
redmol Ответил:
Май 10th, 2011 at 16:18
Спасибо! Вот так заработало:
document.location.href = «basket.php»;
Ответить
hertz Ответил:
Сентябрь 11th, 2011 at 08:27
Изменения небольшие. Вам нужно как в примере пролистать массив
for(var i=0; i Потом по id найти товар и количество, потом добавить 1 к количеству. Собрать строку для куки и записать в куки.
—
Вопрос у меня банальный. Как найти по ID, и как собрать строку для куки?
Ответить
makecode Ответил:
Сентябрь 11th, 2011 at 12:47
Смотрите внимательнее пример. Там так и написано находим ID товара.
Ответить
Как сделать, чтобы totalPrice сумма не округлялась?
Ответить
makecode Ответил:
Август 3rd, 2011 at 09:13
В функции addCart
Заменить parseInt на parseFloat
Ответить
Константин Ответил:
Август 3rd, 2011 at 09:17
Пробовал не получалось, сейчас увидел, что не на тот goodsid поставил :)
Ответить
Константин Ответил:
Май 1st, 2012 at 02:01
А попородробней можно желательно с кодом…
Ответить
Извиняюсь, а есть ли у вас готовый скрипт удаления из корзины по элементам?
Ответить
makecode Ответил:
Август 8th, 2011 at 11:51
Готового нет, но я сначала разбираю куки, потом в цикле собираю заново без удаляемого элемента, потом записываю. Это не сложно.
Ответить
Программно сделал разбор куки и сбор в обратной последовательности, с изменением количества куки. При этом goodsId(p1) я не трогал, значение у всех записей по умолчанию 1, определил на количество другую переменную.
Возникла такая ситуация: куки обновляются, количество записей остается неизменно, но в выводится на 1 меньше.
Подскажите как поправить код.
Ответить
makecode Ответил:
Август 8th, 2011 at 11:50
Добавьте где-нибудь там перед выводом числа инкремент числа, типа
i++;
Ответить
Уважаемый автор!! первое хочу выразить благодарность за пример, такая щедрость на урок не везде есть! А второе хотел бы узнать как именно сделать оформление заказа!? хотя бы краткий но рабочий пример! Если бы вы статью написали к этому уроку то считаю что тема станет раскрытой!
Ответить
makecode Ответил:
Август 8th, 2011 at 11:48
К сожалению универсального нет, есть на рабочем проекте но там свои тонкости.
Оформление заказа сделать не сложно. Разбираете cookie вашей корзины, составляете заказ и отсылаете его на электронную почту или фиксируете в базе/отслеживаете, опять же от специфики вашего проекта.
Ответить
Ответил:
Август 10th, 2011 at 15:48
makecode к сожалению с jQuery я не силён!!! И методом тыка и поиском подобных тем я так и не смог реализовать вывод данных! Суть такова что мне нужно вывести только те товары которые выбрал пользователь, я хочу это сделать через куки! Нужно вытащить, id из ссылки тоесть нажал пользователь по ссылки скрипт посчитал и всё сохранил и мне нужно проверить id если такой есть то выводи нет значит нет. good-2356-600. Как же можно это сделать с скриптом из вашего примера, что бы он к примеру создавал массив и выводил id товара!?
1
2
3
4
5
и т.д.
Ответить
Почему если вставлять в куки русско-язычные параметры, то они будут в кодировке utf-8. Как можно сделать так, чтобы была кодировка win-1251?
Ответить
makecode Ответил:
Август 22nd, 2011 at 12:36
Когда читаете куки попробуйте через decodeURI
Ответить
Константин Ответил:
Август 22nd, 2011 at 13:04
Этот вариант не работает
Ответить
makecode Ответил:
Август 22nd, 2011 at 13:07
Сделайте перед записью encodeURI, после чтения decodeURI. Выставите кодировку самого исходного файла, проверьте кодировку в meta.
Ответить
Константин Ответил:
Август 22nd, 2011 at 16:25
Если сделать перед записью encodeURI, то скрипт начинает некорректно работать
Ответить
makecode Ответил:
Август 22nd, 2011 at 16:44
Что значит некорректно?
Правильно используете?
Ее аналог в PHP
Ответить
Банальный вопрос: как установить время жизни куки «basket»? после окончания сессии удаляются.
Заранее спасибо!
Ответить
makecode Ответил:
Август 23rd, 2011 at 10:01
http://makecode.ru/2011/01/jquery-cookie/
Переменная expires
Ответить
Большое спасибо за предоставленный материал.
Давно искал нечто похожее)))
Возник вопрос, как реализовать добавление параметров в корзину (таких, как цвет, размер), которые выбирает покупатель из списка. Разобрался как отображать выбранный параметр товара с помощью jquery, но не знаю как этот выбранный параметр засунуть в ид ссылки корзины. Буду очень благодарен за ответ.
Ответить
makecode Ответил:
Сентябрь 11th, 2011 at 12:49
Обратите внимание как это делается в примере. Все параметры собираются через : (двоеточие), просто добавляйте свои параметры так же через двоеточие и все.
Ответить
Извиняюсь, побилось всё из-за моих тегов(
Вот тут написал код jquery для изменения размеров и то, что не получается вбить в корзинку:
Ответить
makecode Ответил:
Сентябрь 11th, 2011 at 23:29
< a id"good-3663-< span id="GoodSizes" >< /span >»
Это жестяная жесть.
Так нельзя.
Вы же отслеживаете смену размера так?
Так.
Раз вся информация содержится в id ссылки, значит нужно менять как раз его.
Значит — нужно при смене размера как раз и производить эту операцию.
У Вас известен id товара у которого Вы производите смену размера. Во и ищите id этой ссылки, разбивайте командой split по дефису и собирайте заново из кусков получившегося массива и нового размера.
Вот и все.
Ответить
Огромное спасибо=) буду решать эту задачку.
Ответить
Здравствуйте!!! Я оптимизировал данный скрипт под себя и создал компонент на его основе под joomla. Но на месте стоять нельзя и как только я сделал минимальный рабочий уровень, начал думать как расширить компонент и возникла у меня мысль, что в этом скрипте есть недостаток, а именно нельзя удалить конкретный товар из корзины можно только очистить всё, вопрос каким образом можно удалить конкретный, товар!??? Может подскажите! Просидев 2 дня с cookie я честно добился на небольшом примере как удалить определённое значение, но конструкция конкретно отличается от скрипта корзины. ПАМАГИТЯ мне это реализовать!
Ответить
Дополнение заметил что одни человек таким уже интересовался но не описал как он это сделал.
В родном коде есть функция добавления function addCart
Скажите а можно ли сделать на её основе функцию удаления. Просто уже реально лазию в отчаянии по инету в поисках ответа.
Ответить
День 5 веду дневник! =)
Вообщем я щас в таком этапе удаления товара. Вот хренова с javascript у меня но что делать пытаюсь как то сделать.
Сделал я по тому же принципу что и добавление товара в корзину только сделал это не ссылкой а через
id.’-’.$raz_na->cena.’» class=»addCookie»>
вывел картинку в виде крестика.
А это скрипт удаления, честно скажу не совсем я его написал, спасибо моему другу Максу, что бы я без него делал. Хорошо когда ты знаешь что писать и как делать а когда незнаешь то задача становится какойто непосильной.
$(‘div.addCookie’).click(function() {
data = $(this).attr(‘id’).split(‘-’);
addCookie(data[1], data[2], 1);
return false;
});
function addCookie(p1, p2, p3){
if (!p3 || p3==0) {p3=1;}
msg.id = p1; // АйДи
msg.price = parseInt(p2); // Цена
msg.count = parseInt(p3); // Количество
var check = false;
var cnt = false;
var iii=»;
var tt=’:';
var totalCountGoods = 0;
var totalprice = 0;
var goodsId = 0;
var basket = »;
$(‘#clearBasket’).show();
$(‘#checkOut’).show();
$(‘.hPb’).show();
$(‘.hPe’).hide();
basket = decodeURI($.cookie(«basket»));
if (basket==’null’) {basket = »;}
basketArray = basket.split(«,»);
if(!check) {
alert(«Товар удалён»);
var tempArr = »;
basketArray = basket.split(«,»);// Находим все товары
for(var i=0; i<basketArray.length-1;i++) {
goodsId = basketArray[i].split(":"); // Находим id товара, цену и количество
if(goodsId[0] == p1){
for(var j=0; j<basketArray.length-1;j++) {
if(j != i)
tempArr = tempArr + basketArray[j] + ',';
}
basket = tempArr;
break;
}
}
$('#totalGoods').text(totalCountGoods);
$("#one").val(iii);
$('#totalPrice').text(totalprice);
$("#cena").val(totalprice);
$.cookie("totalPrice", totalprice, {path: "/"});
$.cookie("basket", basket, {path: "/"});
}
}
Вся суть такова что всё сделано на основе старого скрипта пользуйтесь на здоровье, надеюсь вам поможет! Хотя бы как пример.
Ответить
Здравствуйте! Спасибо большое за эту статью! Помогите, пожалуйста, с вопросом, если не трудно. Мне нужно сделать так, чтобы можно было менять кол-во товара в теге input. Я правильно поняла последовательность: нужно присвоить для id input’а: id=»{id товара}-count», в value input’a помещается кол-во товара. а потом как передастся все это из input’a в функцию? мы ведь отслеживаем по клику по ссылке? извините за глупые вопросы, не сильна в javascript(
Ответить
makecode Ответил:
Сентябрь 28th, 2011 at 20:25
Думаете в правильном направлении, потом количество забирайте и все. Достаточно знать только id.
Например так:
var countGood = $(‘#count_’+idgood).val();
Ответить
Спасибо большущее! будем разбираться=)
Ответить
Hertz Ответил:
Октябрь 5th, 2011 at 09:53
Я вот так сделал.
function addCart(p1, p2, p3){
if (!p3 || p3==0) {p3=$(‘#count’ + idgood).val();}
У меня вопрос про другое возник, как сделать так, чтобы при обновление страницы значения в инпутах сохранялись?
Див с товарами сохраняется так
var basketbox = $(«#basketbox»).html();
$.cookie(«basketbox», basketbox, {path: «/»});
Загружаю так
basketbox = decodeURI($.cookie(«basketbox»));
$(‘#basketbox’).html(basketbox);
Но значения остаются по умолчанию =(
Ответить
подскажите в каких строках что поменять если у меня вместо цены будет передаваться строковое значение (например цвет — красный, синий)
если не сложно то как можно подробнее так как в яваскрипте не очень
Ответить
подскажите а если у меня вместо скажем цены будет текстовое значение (например цвет товара — синий, скрасный) что и где мне надо поменять.
и надо писать msg.count = р4 или msg.count = parseString(p4)
Ответить
makecode Ответил:
Октябрь 24th, 2011 at 22:41
Писать долго, времени нет. Но задача не сложная, я опишу Вам логику:
На странице товара создаете select с выбором цвета. Устанавливаете value с цифрой, например:
1 — красный
2 — зеленый
3 — синий
Самому select назначаете id в виде color-(id товара), при добавлении в корзину, с помощью val() считываете текущее значение и пишете в куки.
Потом так же считываете.
Ответить
очень многое получилось уже. огромное спасибо.
но дошел до одной задачи и трабла
На почту у меня отправляется целиком массив данных о товаре в том числе ссылка ведущая на страницу товара.
но при получении письма эти ссылки блокируются браузером и стают не кликабельными.
как это можно исправить пожалуйста подскажите
Ответить
makecode Ответил:
Ноябрь 17th, 2011 at 01:00
Вообще это вопрос не по теме. Но подозреваю, что Вы просто криво формируете ссылку. Перепроверьте код 100 раз. Перед отправкой попробуйте его сначала echo у себя на сервере. Думаю, увидите сразу в чем проблема.
Ответить
вы оказались правы. криво сформировалась ссылка.
и вношу свою лепту .мож кому пригодится. для смены количества товара . изменение значения импута
<label for="quantity» class=»quantity_box»>Количество: <input type="text" class="inputboxquantity" size="4" id="quantity» name=»quantity[]» value=»1″>
<input type="button" class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById('quantity’); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;»>
<input type="button" class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById('quantity’); var qty = qty_el.value; if( !isNaN( qty ) && qty > 1 ) qty_el.value—;return false;»>
где — это айди товара в вашей базе
Ответить
Nik79 Ответил:
Ноябрь 17th, 2011 at 21:18
при публикации сообщения код покоцало. в таком виде код не верный
Ответить
makecode Ответил:
Ноябрь 18th, 2011 at 13:35
Воспользуйтесь
Ответить
Спасибо всем шикарная статья у меня все, что необходимо было сделать для проекта, получилось ))
встроил в систему с шаблонизатором и обработчик на пхп написал для корзины, отображается и удаление )) правда долго мучался поначалу не понимал как куки вообще работают, раньше имел дело с сессиями средствами пхп, но куки лучше без обновлений практически javascript просто самолет )) еще инпут увелечение колличества в корзине продумываю…
Вот например если удалять тот товар которого увеличиваешь колличество и потом записываешь с новым колличеством в куки и! для этого все описано выше :)
Ответить
Ответил:
Январь 10th, 2012 at 19:54
Да, статья действительно хорошая! Можете скинуть пример обработчика на пхп. Сам счас делаю, и чего-то видимо не понимаю, пока не получается у самого.
Ответить
Подскажите как к корзине прикрутить таблицу с товаром из базы MySQL к корзине. Как я понимаю по ID товара в базе, но как именно? Хочу сделать отображение в корзине не только количества выбранного товара, но и название, фото при оформлении покупки!
Ответить
Опубликую свой обработик
<?
// решение через куки
$basketArray = explode(",", $_COOKIE["basket"]);
for ( $i=0; $iassign(«data»,$data);
$template ->assign(«TOTAL_PRICE»,$total);
?>
Ответить
странно он не правельно отображается тут
Ответить
вот посмотрите сами
websiteprofi.ru/cgi-bin/cart.txt
Ответить
Здравствуйте.
А поделитесь пожалуйста простейшим решением, как отправлять сформированную корзину на email.
Очень нужно…
Спасибо большое!
Ответить
makecode Ответил:
Февраль 2nd, 2012 at 02:04
Простейшее — распарсить куки на php и отправить письмо.
Ответить
None Ответил:
Февраль 2nd, 2012 at 02:12
Дело в том, что я нуб в php.
А начальство попросило реализовать такое для корпоративного сайта.
Из всего, что нашел — это решение самое простое, но нету отправки на емейл.
Не подскажите?
Ответить
makecode Ответил:
Февраль 2nd, 2012 at 02:16
Пару строчек кода не обойдетесь. Все зависит от конкретной задачи.
Рекомендую поискать сразу готовые решения, они есть
Ответить
Доброго времени суток.
а можно ли в
В корзину
чтобы вместо 2356 и 600 бралась информация из БД.
в смысле: у меня выбирается продукция из каталога путем
$request2 = «select * from product where genre_id = «.$_GET["genre"];
$result2 = mysql_query($request2);
$number_rows2 = mysql_num_rows($result2);
$i=0;
while($i < $number_rows2){
$genre_id = mysql_result($result2,$i,"genre_id");
$product_id = mysql_result($result2,$i,"product_id");
$product_title = mysql_result($result2,$i,"product_title");
$i++;
}
и вот чтобы вместо 2356 бралось значение product_id
как связать это все? :)
Ответить
Здравствуйте! Уважаемый автор, если не трудно, опишите, пожалуйста, процесс обновления корзины при изменении количества товара. Наверное, сначала нужно перезаписать как-то value в input, а потом реализовать все на основе функции addcart? как заменить value, не могу понять второй день(
Ответить
makecode Ответил:
Февраль 29th, 2012 at 21:33
Сто лет назад делал без input, на span.
Код неоптимизирован. Там понажимайте на +/- будет менятся значение.
Потом при добавлении в корзину считывайте это значение со span в функцию.
Ответить
dimple Ответил:
Март 2nd, 2012 at 18:20
большое спасибооо!!!!
Ответить
Добрый день!
Ваша корзинка мне очень понравилась и соответствует требованиям моего сайта. Но у меня проблема в том, что я не могу добавлять стоимость. Не выходит jGrowl, но не это важно, так как и без него можно добавлять цену. Я не специалист программирования и поэтому не знаю как наладить корзинку. Помогите, пожалуйста.
Ирина
Ответить
Спасибо автору!
Подскажите плиз новичку — как передать айди товара в корзину и потом из карзины при нажатии на кнопку оформить айди (мона еще общую цену)?
Ответить
Спасибо все реализовал при клике на «оформить» перехожу на страницу карзины где сделал вывод товара (id,название и цена) в цикле — скажите пожалуйста как теперь посчитать общую цену и сделать чтоб можно было увеличивать кол-во 1 товара с пересчитыванием общей цены?
Ответить
Кому интересно изменил алерт на эффект «летаюшая картинка в корзину» код нужно вставить вместо Алерта (где «добавлено в корзину») доп. плагтнов ненадо:
$(«тут селектор картинки товара»)
.clone()
.css({‘position’ : ‘absolute’, ‘z-index’ : ’100′})
.appendTo(«.addCart»)
.animate({opacity: 0.5,
marginLeft: 250, marginTop:-200, //marginЫ управляют направлением полета
width: 50,
height: 50}, 400, function() {
$(this).remove();
});
Ответить
Константин Ответил:
Май 1st, 2012 at 01:54
Что как-то не работает!
Ответить
Игорь Ответил:
Май 1st, 2012 at 15:05
должно работать — могу весь код сбросить.
и в .appendTo(«.addCart») вместо селектора . addCart поставить селектор блока КУДА будет лететь а маргин убрать
Ответить