Добрый день дорогие друзья . Нужна Ваша помощь . Уже 3 день завис на этим.
Суть какая формируется корзина через javascript данные корзины сохраняются в localstorage
Хочу данные корзины при оформлении передать в python для сохранения в json файл на сервере.
Как передать данные из клиента на сервер.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
* {margin: 0; padding: 0;}
#wrapper {
width: 50%;
margin: 10px;
}
#cart_content {
margin-top: 10px;
padding: 5px;
border: 1px solid #060;
}
.item_box {
border: 1px solid #999;
margin-bottom: 10px;
padding: 5px;
}
.shopping_list {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
}
.shopping_list td,
.shopping_list th {
padding: 10px;
border: 1px solid #AAAAAA;
}
.shopping_list th:last-child {
width: 1%;
}
.shopping_list tr:last-child {
background-color: #EDEDED;
font-weight: bold;
}
.del_item {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f00;
text-align: center;
line-height: 30px;
color: #fff;
cursor: pointer;
}
</style>
<body>
Привет {{ b1 }}
{% for Katalog in b2 %}
{{ Katalog.artikul|float }}
<div class="item_box">
<h3 class="item_title">{{ Katalog.name_tovar }}</h3>
<p>Цена: <span class="item_price">{{ Katalog.artikul|float}}</span> руб.</p>
<button class="add_item" data-id="{{ Katalog.id }}">Добавить в корзину</button>
</div>
{% endfor %}
<p><button id="checkout">Оформить заказ</button> <button id="clear_cart">Очистить корзину</button> <button id="test9">9999</button></p></p>
<div id="cart_content"></div>
<script type="text/javascript">
var d = document,
itemBox = d.querySelectorAll('.item_box'), // блок каждого товара
cartCont = d.getElementById('cart_content'); // блок вывода данных корзины
// Функция кроссбраузерная установка обработчика событий
function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
} else {
elem.attachEvent('on'+type, function(){ handler.call( elem ); });
}
return false;
}
// Получаем данные из LocalStorage
function getCartData(){
return JSON.parse(localStorage.getItem('cart'));
}
// Записываем данные в LocalStorage
function setCartData(o){
localStorage.setItem('cart', JSON.stringify(o));
return false;
}
//test
// Добавляем товар в корзину
function addToCart(e){
this.disabled = true; // блокируем кнопку на время операции с корзиной
var cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет
parentBox = this.parentNode, // родительский элемент кнопки "Добавить в корзину"
itemId = this.getAttribute('data-id'), // ID товара
itemTitle = parentBox.querySelector('.item_title').innerHTML, // название товара
itemPrice = parentBox.querySelector('.item_price').innerHTML; // стоимость товара
if(cartData.hasOwnProperty(itemId)){ // если такой товар уже в корзине, то добавляем +1 к его количеству
cartData[itemId][2] += 1;
} else { // если товара в корзине еще нет, то добавляем в объект
cartData[itemId] = [itemTitle, itemPrice, 1];
}
// Обновляем данные в LocalStorage
if(!setCartData(cartData)){
this.disabled = false; // разблокируем кнопку после обновления LS
cartCont.innerHTML = 'Товар добавлен в корзину.';
setTimeout(function(){
cartCont.innerHTML = 'Продолжить покупки...';
}, 500);
}
return false;
}
// Устанавливаем обработчик события на каждую кнопку "Добавить в корзину"
for(var i = 0; i < itemBox.length; i++){
addEvent(itemBox[i].querySelector('.add_item'), 'click', addToCart);
}
// Открываем корзину со списком добавленных товаров
function openCart(e){
var cartData = getCartData(), // вытаскиваем все данные корзины
totalItems = '',
totalCount = 0,
totalSum = 0;
// если что-то в корзине уже есть, начинаем формировать данные для вывода
if(cartData !== null){
totalItems = '<table class="shopping_list"><tr><th>Наименование</th><th>Цена</th><th>Кол-во</th><th></th></tr>';
for(var items in cartData){
totalItems += '<tr>';
for(var i = 0; i < cartData[items].length; i++){
totalItems += '<td>' + cartData[items][i] + '</td>';
}
totalSum += cartData[items][1] * cartData[items][2];
totalCount += cartData[items][2];
totalItems += '<td><span class="del_item" data-id="'+ items +'">X</span></td>';
totalItems += '</tr>';
}
totalItems += '<tr><td><strong>Итого</strong></td><td><span id="total_sum">'+ totalSum +'</span> руб.</td><td><span id="total_count">'+ totalCount +'</span> шт.</td><td></td></tr>';
totalItems += '<table>';
cartCont.innerHTML = totalItems;
} else {
// если в корзине пусто, то сигнализируем об этом
cartCont.innerHTML = 'В корзине пусто!';
}
return false;
}
// функция для нахождения необходимого ближайшего родительского элемента
function closest(el, sel) {
if (el !== null)
return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel));
}
/* Открыть корзину */
addEvent(d.getElementById('checkout'), 'click', openCart);
/* функция тест*/
/*JSON.parse(localStorage.getItem('cart')) */
function test4() {
var data = JSON.parse(localStorage.getItem('cart'));
return fs.writeFile('/', JSON.stringify(data, null, ' '), 'utf-8', cb)
/*return alert(JSON.stringify(data));*/
}
/* test2 */
addEvent(d.getElementById('test9'), 'click', test4);
/* Удаление из корзины */
addEvent(d.body, 'click', function(e){
if(e.target.className === 'del_item') {
var itemId = e.target.getAttribute('data-id'),
cartData = getCartData();
if(cartData.hasOwnProperty(itemId)){
var tr = closest(e.target, 'tr');
tr.parentNode.removeChild(tr); /* Удаляем строку товара из таблицы */
// пересчитываем общую сумму и цену
var totalSumOutput = d.getElementById('total_sum'),
totalCountOutput = d.getElementById('total_count');
totalSumOutput.textContent = +totalSumOutput.textContent - cartData[itemId][1] * cartData[itemId][2];
totalCountOutput.textContent = +totalCountOutput.textContent - cartData[itemId][2];
delete cartData[itemId]; // удаляем товар из объекта
setCartData(cartData); // перезаписываем измененные данные в localStorage
}
}
}, false);
/* Очистить корзину */
addEvent(d.getElementById('clear_cart'), 'click', function(e){
localStorage.removeItem('cart');
cartCont.innerHTML = 'Корзина очишена.';
});
</script>
</body>
</html>
Код файла python приведу в коментариях не помещяется тут
Простой
