Корзина на JQuery - хранение данных в localStorage
 

Написала на JQuery корзину. Все работает, осталось сделать сохранение при перезагрузке страницы.

Решила воспользоваться localStorage

Работает это у меня так. При пересчете итоговой стоимости, который присходит при любом действии, отправляю в localStotage на пробу всю корзину. А потом, при перезагрузке страницы - получаю значение и вывожу корзину.

Код отправки

//пересчет итоговой суммы и кол-ва итемов
function finalprice() {
	тут считаем	
	$storage = $(document).find(".cart").html();
	localStorage.setItem('01', $storage);               
}

Код вывода

$(document).ready(function() {
    lSItem = localStorage.getItem('01');
    if(lSItem !== null) {
        $('.cart').html(localStorage.getItem('01'));
    }
и т.д....
}

Вроде бы это работает, но с одним глюком - последние действия не запоминаются. Как будто на один шаг назад работает.

Второй день сижу с этой штукой - идеи кончились(

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

Спасибо.

С каких пор html код описания товара стал называться корзиной? :)
Это же не выгодно, хранят параметры товара и выбранное количество, а вывод, это цикл формирующий из них html код.

Я просто тестирую работу localStorage. Если я сейчас это еще и на переменные разобью - я чокнусь. Код не закончен. Помогите ошибку найти.

Ну а почему не просто тогда записывать какую либо цифру? :)

Смотрите. Зашел кто-то, собрался купить, а потом ушел не купив. Что это означает? То, что вы своей корзиной мусорите на компьютере пользователя. Уж если выбрали локальное хранилище для корзины, то есть сессионное хранилище, тогда вы не станете виновником мусора.

И потом - ваш код плох не только тем, что вы храните в корзине не параметры ее, а html код, что затрудняет работу с самой корзиной, но и тем, что данные о товаре вы дергаете со страницы, а ведь можно их прописать в data атрибуте кнопок.

Не могу я в дата атрибут прописать. HTML код страницы мне менять нельзя - такое условие. :(

Ленча, вы где-то потеряли вызов finalprice!

Что бы не мучаться с jQuery и со всей этой массой finalprice(), которое должно вызываться при малейшем изменении, вы можете добавить...

setInterval(finalprice, 500);

рядом с function finalprice() {}

//пересчет итоговой суммы и кол-ва итемов
function finalprice() {
	тут считаем	
	$storage = $(document).find(".cart").html();
	localStorage.setItem('01', $storage);               
}
// запоминаем всегда самое новое состояние корзины 
setInterval(finalprice, 500);

Пусть так, но корзина существует до оформления заказа, а он оформляется на сервере. Для его оформления корзину нужно будет передать на сервер, если он у вас не имеет к ней доступа (куки), после чего удалить. И это должен быть объект, в котором под идентификатором товара содержится выбранное его количество. Или данное условие не оговаривалось?

laimas, там ничего не пишется в базу. Просто отправляется формой на почту - мне не нужно оформлять все на сервере.

Malleys, проверю сейчас. Но при действиях пользователя все считается вроде как корректно - только в хранилище передается как-то косо.

А что даст задержка в 500?

Буду переписывать все под куки, раз не получилось с хранилищем. Жалко, что не нашлась ошибка - не люблю оставлять за спиной невыясненные косяки(

Так я же вам написал, что вы где-то потеряли вызов finalprice!

Точней там, где у вас происходит обработка события нажатия на кнопку Заказать! Там где обработчик нажатия на $("#price .uk-button-primary") у вас прописано 2 раза finalprice... перенесите их в конец функции перед return false... Но это не понимаете! Поэтому вот код...

$("#price .uk-button-primary").each(function() {
			$(this).removeAttr("uk-scroll");
		}).click(function(event) {
			event.preventDefault();
			$(this).addClass('selected');
			//первым делом по клику обнуляем все переменные
			check = 'norecord';

			//забираем название товара и цену
			title = $.trim($(this).closest('.el-item').find('h4').text());
			price = $(this).closest('.el-item').find('.el-meta').text().replace(/\D+/g, "");
			img = $(this).closest('.el-item').find('img').attr('src');

			//если в корзине уже что-то есть
			if ($(".cart .product").children('.item').length > 0) {
				//для каждой строки в корзине
				$('.cart .product .item').each(function() {
					//находим текущий тайтл элемента
					currenttitle = $(this).find('.itemname').text();
					//сравниваем текущи с тем, что кликнут(title)
					//если они совпадают - меняем количество и цену итема
					if (currenttitle === title) {
						//делаем заметку, что такой итем уже есть
						check = "yesrecord";
						//получаем значение количества
						$input = $(this).find('.incount');
						incount = +$input.val();
						//прибавляем еще одну штуку
						countfin = incount + 1;
						//устанавливаем новое значение кол-ва
						$input.val(countfin);
						$input.change();
						//устанавливаем новое значение стоимости итема
						innerprice = price * countfin;
						//заносим новое значение стоимости в блок
						$(this).find('.price').text(innerprice);
					}
				});
			}

			//если записи с таким тайтлом нет или вообще нифига нет
			if ((check === "norecord") || ($(".cart .product").children('.item').length <= 0)) {
				//добавляем запись
				$('<div class="item">' + //'<img src="' + img + '" />' +
				'<span class="itemname">' + title + '</span>' + '<span class="minus">-</span>' + '<input class="incount" value ="1">' + '<span class="plus">+</span>' + '<span class="price">' + price + '</span>' + '<span class="delete">X</span>' + '<span class="hiddenprice">' + price + '</span>' + '</div>').appendTo($(".cart .product"));

				if (number != 'yesfinal') {
					$(".product").after("<div class='finalprice'>Итого: <span>" + price + "  </span>руб</div>");
					number = 'yesfinal';
				}
			}
			//пересчет итога
			finalprice();
			return false;
		});

Оно показало, что вы где-то пропустили finalprice (за 500 мс можно ведь заметить, что итоговая цена вычисляется не сразу при нажатии, а позже, через 500мс, значит где-то не хватает finalprice)

Всего-то поменять две строчки! И понять, что оно точно также не сохраняет последнее, потому что это не зависит от хранилища! Вы читать умеете? У. ВАС. ПРОПУЩЕН. ВЫЗОВ. FINALPRICE.

Вам уже указали причину! Вот сейчас даже показали решение с кодом...

Читай что тебе пишут! Вы даже не пытались найти, где у вас пропущен этот вызов!

Они нам говорили jQuery упрощает разработку... а тут тако-о-е!!!

Malleys, спасибо, что наорали) Ветром мозги продуло - полегчало :D

По этой причине у меня не сохранялась последняя строка. А по какой причине не сохраняется значение инпута?

Вводим или нащелкиваем цифру больше единицы. Получается, она уже есть в DOM. Причем заметьте, все посчиталось корректно.

Теперь мы берем этот код, сохраняем и вытаскиваем. Все остается как нужно, и только значение инпута сбрасывается до единицы. Причем нельзя сказать, что данные не заносятся в хранилище - ибо общая сумма и общее количество в итоговой строке остаются верными и соответствуют последним значениям.

Если в строке было два пункта на 5000 руб по 2500 за штуку - после перезагрузки в строке остается 5000 руб, но в инпуте единица. Причем! Если мы эту строку удалим - из общей суммы вычтется ДВЕ штуки товара! Как будто в инпуте value два - как и полагается, вот только видим мы единицу. Мистика какая-то.

Почему??

Не ругайте за код, я уже начала переписывать начисто этот полный бардак.

У вас меняется только внутреннее свойство HTML-элемента, а в DOM не меняется.

Точней вы меняете только значение value, а атрибут не меняете!

У вас в двух местах написано...

//меняем значение количества
$input.val(count);

Замените на...

//меняем значение количества
$input.val(count).attr("value", count);

Огромное спасибо. :yes: Тут я бы точно сама не допетрила никогда.

Там не в двух, там такая петрушка в четырех местах))

Пойду перепишу этот ужас по-человечески.