Купленный товар после перемещения(покупка по клику) в корзину, должен быть не доступен для повторного клика и еще нужно создать отдельную страницу только для просмотра купленного товара.
Написала JS, что то не выводить на отдельную страницу и почему не показывает таблица.
index.html
cart.html
script.js
Написала JS, что то не выводить на отдельную страницу и почему не показывает таблица.
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main page</title>
<link rel="stylesheet" href="style.css">
<script src="cookie.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div id="top-line">
<div id="backet-img">
<a href="#"><img src="img/korzina.png" alt=""></a>
</div>
<div id="backet">
<a href="cart.html" id="checkout" class="btn btn-info"><span>Корзина</span></a>
</div>
</div>
<div id="main-block">
<div class="block">
<div class="block-img"></div>
<h3 class="title">Samsung Galaxy</h3>
<p>Price:<span class="price">20</span> tenge </p>
<button class="add_item" data-id="1" data-title="Samsung" data-price="20">Добавить в корзину</button>
</div>
<div class="block">
<div class="block-img"></div>
<h3 class="title">LG Optimus</h3>
<p>Price:<span class="price">100</span> tenge </p>
<button class="add_item" data-id="2" data-title="LG Optimus" data-price="100">Добавить в корзину</button>
</div>
</div>
</body>
</html>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="container-fluid col-md-12 text-center" id="cart_content"></div>
</div>
<script src="script.js"></script>
</body>
</html>:
var cartModule = (function () {
var cart = {
addAllEvents : function () {
var itemBox = document.getElementsByClassName('block');
for(var i = 0; i < itemBox.length; i++){
this.addEvent(itemBox[i].querySelector('.add_item'), 'click', this.addToCart);
}
this.addEvent(document.getElementById('backet'), 'click', this.openCart);
},
addEvent : function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler)
} else {
element['on' + type] = handler;
}
},
getCartData : function () {
return JSON.parse(localStorage.getItem('Cart'));
},
setCartData : function (key) {
localStorage.setItem('Cart', JSON.stringify(key));
},
addToCart : function () {
var item = {
id : parseInt(this.getAttribute('data-id')),
title : this.getAttribute('data-title'),
price : parseInt(this.getAttribute('data-price')),
};
var count = 0;
var data = cart.getCartData() || {};
if(data.hasOwnProperty(item.id)){
localStorage.setItem('Cart::count', 1 + parseInt(localStorage.getItem('Cart::count')));
data[item.id][3] += 1;//item.quantity + data[item.id][3]; /
data[item.id][2] = item.price * data[item.id][3];
} else {
localStorage.setItem('Cart::count', 1 + parseInt(localStorage.getItem('Cart::count')));
item.price = item.price * 1;
data[item.id] = [ item.id, item.title, item.price, 1];
}
cart.setCartData(data);
cart.getContent().innerHTML = '';
cart.getCheckout().innerHTML = 'Товар добавлен';
setTimeout(function(){
cart.getCheckout().innerHTML = 'Корзина <sup>' + parseInt(localStorage.getItem('Cart::count')) + '</sup>';
}, 1000);
},
openCart : function () {
var data = cart.getCartData() || {};
if(Object.keys(data).length !== 0){
var count = 0;
var price = 0;
var item = '';
for(var items in data){
price = price + parseInt(data[items][2]);
count = count + parseInt(data[items][3]);
item += '<tr class="quantity" data-id="' + data[items][0] + '">'
+ '<td class="id">' + data[items][0] + '</td>'
+ '<td class="title">' + data[items][1] + '</td>'
+ '<td class="price">' + data[items][0] + '</td>'
+ '<td><button class="decrement btn btn-primary">-</button>
<button class="count btn btn-default">' + data[items][3] + '</button> ' +
'<button class="increment btn btn-primary">+</button></td>'+ '<td class="price">' + data[items][2] + '</td>'
+ '<td class="delete"><button class="btn btn-warning">Удалить</button></td>'
+ '</tr>';
}
cart.getContent().innerHTML = ''
+ '<table width="100%" class="table table-bordered table-hover">'
+ '<tr><th>id</th><th>Наименование</th><th>Цена</th><th>Кол-во</th><th>Summa</th><th></th></tr>'
+ item
+'<tr><td></td><td></td><td>ИТОГО:</td><td class="all_count">' + count + '</td><td class="all_price">' + price + '</td><td>' +
'<button id="clear_cart" class="btn btn-default">Очистить корзину</button></td></tr>'
+ '</table>';
var quantity = cart.getContent().querySelectorAll('.quantity');
for(var j = 0; j < quantity.length; j++){
cart.addEvent(quantity[j].querySelector('.decrement'), 'click', cart.quantity);
cart.addEvent(quantity[j].querySelector('.increment'), 'click', cart.quantity);
cart.addEvent(quantity[j].querySelector('.delete'), 'click', cart.delete);
}
cart.addEvent(document.getElementById('clear_cart'), 'click', cart.clearCart);
} else {
cart.getCheckout().innerHTML = 'В корзине пусто!';
cart.getContent().innerHTML = ''
}
},
delete : function () {
localStorage.setItem('Cart::count', parseInt(localStorage.getItem('Cart::count')) -this.parentNode.querySelector('.count').innerHTML);
var data = cart.getCartData();
delete data[this.parentNode.querySelector('.id').innerHTML];
cart.setCartData(data);
cart.openCart();
cart.checkout();
},
clearCart : function () {
cart.getContent().innerHTML = '';
cart.getCheckout().innerHTML = 'Корзина очищена.';
localStorage.clear();
localStorage.setItem('Cart::count', 0);
},
quantity : function () {
var item = {
id : parseInt(this.parentNode.parentNode.querySelector('.id').innerHTML),
title : this.parentNode.parentNode.querySelector('.title').innerHTML,
price : this.parentNode.parentNode.querySelector('.price'),
count : this.parentNode.parentNode.querySelector('.count'),
apiece : cart.getCartData()[this.parentNode.parentNode.querySelector('.id').innerHTML][4],
data : cart.getCartData(),
};
if (this.innerHTML == '+') {
item.count.innerHTML++;
item.price.innerHTML = item.count.innerHTML * item.apiece;
localStorage.setItem('RudraJS-Cart::count', parseInt(localStorage.getItem('Cart::count')) + 1);
} else {
if (item.count.innerHTML > 1) {
item.count.innerHTML--;
item.price.innerHTML = item.count.innerHTML * item.apiece;
localStorage.setItem('Cart::count', parseInt(localStorage.getItem('Cart::count')) - 1);
} else {
localStorage.setItem('Cart::count', parseInt(localStorage.getItem('Cart::count')) - item.count.innerHTML);
delete item.data[item.id];
this.parentNode.parentNode.innerHTML = '';
cart.setCartData(item.data);
cart.openCart();
cart.checkout();
return false;
}
}
item.data[item.id] = [item.id, item.title, item.price.innerHTML, item.count.innerHTML, item.apiece];
cart.setCartData(item.data);
cart.openCart();
cart.checkout();
},
checkout : function () {
this.getCheckout().innerHTML = 'Корзина <sup>' + parseInt(localStorage.getItem('Cart::count')) + '</sup>';
},
setLocalStorage : function () {
if (localStorage.getItem('Cart::count') === null) {
localStorage.setItem('Cart::count', 0);
}
},
getContent : function () {
return document.getElementById('cart_content');
},
getCheckout : function () {
return document.getElementById('backet');
}
};
cart.setLocalStorage();
cart.checkout();
return {
init : function() {
return document.addEventListener("DOMContentLoaded", function(event) {
cart.addAllEvents();
});
},
}
})();
function dd(data) {
console.log(data);
}
cartModule.init();