javascript - 为什么我的 Javascript 购物车在付款后没有重置为零？
问题描述
我有一个名为“cart”的 js 变量，它是在我的主页（main.html）中创建的。只要用户在购物车中添加产品，变量就会正确更新。在结帐页面 (checkout.html) 中，单击“付款”按钮后，我想将购物车值重置为 {}。但是是行不通的。购物车数据已正确发送到后端，但购物车值未重置为零。有人有想法吗？太感谢了。
main.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" type="text/css" href=" {% static 'css/main.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Titre onglet</title>
<script type="text/javascript">
var user = '{{request.user}}'
function getToken(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getToken('csrftoken');
function getCookie(name) {
// Split cookie string and get all individual name=value paris in an array
var cookieArr = document.cookie.split(";");
// Loop through the array elements
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
// Removing whitespace at the beginning of the cookie name and compare it with the given string
if(name == cookiePair[0].trim()) {
// Decode the cookie value and return
return decodeURIComponent(cookiePair[1]);
}
}
// Return null if not found
return null;
}
var cart = JSON.parse(getCookie('cart'));
if(cart == undefined) {
cart = {};
console.log('Cart was created !!');
document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/";
}
console.log('Cart:', cart);
</script>
</head>
<body>
<header>
<nav>
<ul>
<li id="logo"> <a href="#"> Monoi </a></li>
<li> <a class="nav-link" href="{% url 'home' %}"> Accueil </a> </li>
<li> <a class="nav-link" href="#"> La marque </a> </li>
<li> <a class="nav-link" href="#"> La boutique </a> </li>
<li> <a class="nav-link" href="{% url 'products' %}"> Tous les produits </a> </li>
<li> <a class="nav-link" href="#"> Contact </a> </li>
<li> <a href="https://www.instagram.com/monoi.paris/" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i> </a> </li>
<li> <a href="https://www.instagram.com/monoi.paris/" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i> </a> </li>
<li> <a href="{% url 'cart' %}"><i class="fa fa-shopping-cart"></i> </a> </li>
<li> <span class="cart-count" id="cart-count"> {{cartItems}} </span> </li>
<li> <a href="#"> <button class="button" type="button">Log In</button> </a> </li>
</ul>
</nav>
</header>
<section class="container" id="page-content">
{% block content %}
{% endblock content %}
</section>
<footer>
<div id="copyright">
<span>© AlexisWeb </span>
</div>
</footer>
<script type="text/javascript" src="{% static 'js/cart.js' %}"> </script>
</body>
</html>
结帐.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="checkout-page">
<form id="form">
{% csrf_token %}
<div class="order-summary">
<div> <a class="back-to-button button" href="{% url 'cart' %}">← Back to Cart</a> </div>
<div> <h3> Order Summary </h3> </div>
<div class = "order-summary-list">
{% for item in items %}
<div class="order-list">
<div class="order-table"> <img class="thumbnail-small" src="{{item.product.imageURL}}"> </div>
<div class="order-table"> <h5> // {{item.product.name}} // </h5></div>
<div class="order-table"> <h5> // {{item.product.price|floatformat:2}} € // </h5> </div>
<div class="order-table"> <h5> // {{item.quantity}} // </h5> </div>
</div>
{% endfor %}
</div>
<div> <h4> Items : {{order.get_cart_items}} <h4> </div>
<div> <h4> Total : {{order.get_cart_total|floatformat:2}} € <h4> </div>
</div>
<div class="customer-info">
<div id="customer-basic-info" class="customer-basic-info">
<div class="text-box-name"> <input required class="form text-box" type="text" name="name" placeholder="Name.."> </div>
<div class="text-box-email"> <input required class="form text-box" type="email" name="email" placeholder="Email.."> </div>
</div>
<div> <h4> Shipping information </h4> </div>
<div class="customer-shipping-info-1">
<div class="text-box-address"> <input required class="form text-box" type="text" name="address" placeholder="Address.."> </div>
<div class="text-box-postcode"> <input required class="form text-box" type="text" name="postcode" placeholder="Code postal"> </div>
</div>
<div class="customer-shipping-info-2">
<div class="text-box-city"> <input required class="form text-box" type="text" name="city" placeholder="Ville.."> </div>
<div class="text-box-country"> <input required class="form text-box" type="text" name="country" placeholder="Pays.."> </div>
</div>
</div>
<div class="payment-options">
<div> <h4> Paiement <h4> </div>
<div> <input class="button" type="submit" value="PayPal" > </div>
<div> <button class="button" id="make-payment"> MAKE PAYMENT </button> </div>
</div>
</form>
</div>
<script type="text/javascript">
var total = '{{order.get_cart_total}}';
var shipping = '{{order.shipping}}';
var form = document.getElementById("form");
form.addEventListener('submit', function(e){
e.preventDefault();
console.log('Form submitted.....');
})
if (user != 'AnonymousUser'){
document.getElementById('customer-basic-info').innerHTML = ''
}
document.getElementById("make-payment").addEventListener('click', function(e){
submitFormData();
})
// Bug avec cette fonction car quand le cart n'est pas remis à zéro. Voir part 4 à 51.25.
function submitFormData(){
console.log('Payment button clicked');
var userFormData = {
'name':null,
'email':null,
'total':total,
};
var shippingInfo = {
'address':null,
'postcode':null,
'city':null,
'country':null,
};
shippingInfo.address = form.address.value;
shippingInfo.city = form.city.value;
shippingInfo.postcode = form.postcode.value;
shippingInfo.country = form.country.value;
if(user == 'AnonymousUser'){
userFormData.name = form.name.value;
userFormData.email = form.email.value;
}
var url = '/process_order/';
fetch(url,{
method:'POST',
headers:{
'Content-Type':'application/json',
'X-CSRFToken':csrftoken,
},
body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo})
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
alert('Transaction completed');
cart = {};
document.cookie = 'cart' + JSON.stringify(cart) + ";domain=;path=/";
window.location.href = "{% url 'products' %}";
})
}
</script>
{% endblock content %}
解决方案
推荐阅读
- alpacajs - 如何创建数据源以从相同形式的数据数组中进行选择？
- vpn - 在 Libreswan（Ipsec 隧道）中使用证书时 IKE 身份验证失败
- javascript - 如何提取一个数组的所有值并将这些值分配给另一个数组
- json - 在 Node-RED 中转换 JSON
- javascript - 在特定 URL 上“托管”文件以进行测试
- r - 按子组和随时间计算变量
- racket - 如何将图形对象列表映射到符号集合？使用`（定义值）`？
- r - 如何在ggplot中将自定义箱线图添加到直方图
- python - 如何用一个新句子测试 XGB 模型？
- reactjs - 由于 Reactjs 中的无效 MIME 类型问题，拒绝执行 JS 块