|
Сообщение от sty-wolf
|
|
нужно прописать в цикле добавления товаров?
|
Зачем?
|
Сообщение от sty-wolf
|
|
а тут прописать метод удаления?
|
Все что требуется из операций, то и пишите. Если добавление, значит обращение к методу/функции (не знаю что там у вас) добавления, позвоните Кате и пригласите ее в кино и т.д. и т.п. А если удаление, значит обращение к методу/функции (не знаю что там у вас) удаления, позвонить Кате и извиниться, пригласить в кино Свету и т.д. и т.п.
Я не знаю что и как у вас в полном объеме, да и вникать в это и некогда, и не охота.
Поэтому, из того что пишу, вам нужна только суть, а далее вы уже по этой "дорожной карте" применяя свои методы/функции, свои элементы в верстке и их селекторы/атрибуты выполняйте это же самое.
Сохраните это у себя и запустите, пощелкайте добавление/обновление/удаление товаров с обновлением страницы. Все работает? Что в сути самой работы непонятного? В примере все очень просто, нет нагромождения лишних элементов и их атрибутов/классов. Самые необходимые операции и все. Это как раз для того, чтобы и была понятна суть механизма. Облепите ее своими наворотами и все.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
h3 {
margin-top: 0;
}
li {
display: inline-block;
list-style: none;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
}
.btn {
width: 100%;
padding: 10px 20px;
border: none;
background-color: #6FBBFC;
margin-top: 15px;
cursor: pointer;
}
.btn span:after {
content: 'Добавить в корзину';
}
.btn.add {
background-color: #FE6C6C;
}
.btn.add span:after {
content: 'Удалить из корзины';
}
.to-cart:after {
content: 'В корзину:';
}
.to-cart.add:after {
content: 'В корзине:';
color: #C70404;
}
</style>
<script type="text/javascript">
//страница с товарами, получаем сразу корзину
var cart = localStorage.cart && JSON.parse(localStorage.cart) || {};
//добавляем товар
function add(id, name, n) {
cart[id] = {name: name, count: n};
mem();
}
//обновляем товар
function upd(id, n) {
cart[id].count = n;
mem();
}
//удаляем товар
function del(id) {
delete cart[id];
mem();
}
//изменения корзины сохраняем
function mem() {
console.log(cart);
localStorage.cart = JSON.stringify(cart);
}
$(function() {
//добавление/удаление товара
$('#products').on('click', 'button', function() {
//все что потребуется для дольнейших операций
var bt = $(this),
id = bt.data('id'),
p = bt.closest('li'),
v = p.find('input');
if(bt.hasClass('add')) {
//удаление товара с ID из корзины
del(id);
v.val(v.attr('min')); //сбросить значение поля количества до мин. значения
//и прочие сопутствующие операции
} else {
//добавление товара с ID в корзину
add(id, p.find('h3').text(), +v.val());
//и прочие сопутствующие операции
}
bt.add(v.prev()).toggleClass('add'); //изменение состояния кнопки, и метки поля количества
}).on('change', 'input', function() { //изменение количества товара в корзине
var id = this.dataset.id;
if(!cart[id]) return;
upd(id, this.valueAsNumber);
//и прочие сопутствующие операции
});
//отметить товары в корзине при загрузке страницы
Object.keys(cart).forEach((id) => {
$('button[data-id='+id+']').addClass('add').closest('li').find('label').addClass('add').next().val(cart[id].count)
});
});
</script>
</head>
<body>
<ul id="products">
<li>
<h3>Портвейн</h3>
<div>
<label class="to-cart"></label> <input data-id="15" type="number" min="1" max="3" value="1" autocomplete="off" /> бутылей
</div>
<button class="btn" data-id="15"><span></span></button>
</li>
<li>
<h3>Кагор</h3>
<div>
<label class="to-cart"></label> <input data-id="215" type="number" min="1" max="5" value="1" autocomplete="off" /> бутылей
</div>
<button class="btn" data-id="215"><span></span></button>
</li>
<li>
<h3>Коньяк</h3>
<div>
<label class="to-cart"></label> <input data-id="67" type="number" min="1" max="1" value="1" autocomplete="off" /> бутылей
</div>
<button class="btn" data-id="67"><span></span></button>
</li>
<li>
<h3>Самогон</h3>
<div>
<label class="to-cart"></label> <input data-id="13" type="number" min="1" max="100" value="1" autocomplete="off" /> литров
</div>
<button class="btn" data-id="13"><span></span></button>
</li>
</ul>
</body>
</html>