title: Why does my Javascript cart not reset to zero after payment?
body: <p>I have a js variable called 'cart' which is created in my main page (main.html). As long as a user is adding products in the cart, the variable is updated correctly. In the checkout page (checkout.html), I want to reset the cart value to {}, once the 'make-payment' button is clicked. But is does not work. The cart data is correctly sent to the backend, but the cart value is not reset to zero. Does anyone have an idea ? Thank you so much.</p>
  <h3>main.html</h3>
  <pre><code>&lt;!DOCTYPE html&gt;
  {% load static %}
  &lt;html lang=&quot;en&quot;&gt;
  
      &lt;head&gt;
          
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1&quot;&gt;
      
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot; {%  static 'css/main.css' %}&quot;&gt;
  
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css&quot;&gt;
  
          &lt;title&gt;Titre onglet&lt;/title&gt;
  
          &lt;script type=&quot;text/javascript&quot;&gt;
              var user = '{{request.user}}'
  
              function getToken(name) {
                  let cookieValue = null;
                  if (document.cookie &amp;&amp; document.cookie !== '') {
                      const cookies = document.cookie.split(';');
                      for (let i = 0; i &lt; 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(&quot;;&quot;);
  
                  // Loop through the array elements
                  for(var i = 0; i &lt; cookieArr.length; i++) {
                      var cookiePair = cookieArr[i].split(&quot;=&quot;);
  
                      // 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) + &quot;;domain=;path=/&quot;;
              }
  
              console.log('Cart:', cart);
  
          &lt;/script&gt;
      
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;header&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li id=&quot;logo&quot;&gt; &lt;a href=&quot;#&quot;&gt; Monoi &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a class=&quot;nav-link&quot; href=&quot;{% url 'home' %}&quot;&gt; Accueil &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; La marque &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; La boutique &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a class=&quot;nav-link&quot; href=&quot;{% url 'products' %}&quot;&gt; Tous les produits &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; Contact &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href=&quot;https://www.instagram.com/monoi.paris/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;i class=&quot;fa fa-instagram&quot;&gt;&lt;/i&gt; &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href=&quot;https://www.instagram.com/monoi.paris/&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt; &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href=&quot;{% url 'cart' %}&quot;&gt;&lt;i class=&quot;fa fa-shopping-cart&quot;&gt;&lt;/i&gt; &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;span class=&quot;cart-count&quot; id=&quot;cart-count&quot;&gt; {{cartItems}} &lt;/span&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href=&quot;#&quot;&gt;  &lt;button class=&quot;button&quot; type=&quot;button&quot;&gt;Log In&lt;/button&gt;  &lt;/a&gt; &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
  
          &lt;section class=&quot;container&quot; id=&quot;page-content&quot;&gt;
              {% block content %}
              {% endblock content %}
          &lt;/section&gt;
  
          &lt;footer&gt;
              &lt;div id=&quot;copyright&quot;&gt;
                  &lt;span&gt;© AlexisWeb &lt;/span&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
  
          &lt;script type=&quot;text/javascript&quot; src=&quot;{% static 'js/cart.js' %}&quot;&gt; &lt;/script&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  <h3>checkout.html</h3>
  <pre><code>{% extends 'store/main.html' %}
  {% load static %}
  
  {% block content %}
  
  &lt;div class=&quot;checkout-page&quot;&gt;
      &lt;form id=&quot;form&quot;&gt;
          {% csrf_token %}
          &lt;div class=&quot;order-summary&quot;&gt;
              &lt;div&gt; &lt;a class=&quot;back-to-button button&quot; href=&quot;{% url 'cart' %}&quot;&gt;&amp;#x2190; Back to Cart&lt;/a&gt; &lt;/div&gt;
              &lt;div&gt; &lt;h3&gt; Order Summary &lt;/h3&gt; &lt;/div&gt;
              &lt;div class = &quot;order-summary-list&quot;&gt; 
              {% for item in items %}
              &lt;div class=&quot;order-list&quot;&gt;
                  &lt;div class=&quot;order-table&quot;&gt; &lt;img class=&quot;thumbnail-small&quot; src=&quot;{{item.product.imageURL}}&quot;&gt; &lt;/div&gt;
                  &lt;div class=&quot;order-table&quot;&gt; &lt;h5&gt; // {{item.product.name}} // &lt;/h5&gt;&lt;/div&gt;
                  &lt;div class=&quot;order-table&quot;&gt; &lt;h5&gt; // {{item.product.price|floatformat:2}} € // &lt;/h5&gt; &lt;/div&gt;
                  &lt;div class=&quot;order-table&quot;&gt; &lt;h5&gt; // {{item.quantity}} // &lt;/h5&gt; &lt;/div&gt;
              &lt;/div&gt;
              {% endfor %}
              &lt;/div&gt;
              &lt;div&gt; &lt;h4&gt; Items : {{order.get_cart_items}} &lt;h4&gt; &lt;/div&gt;
              &lt;div&gt; &lt;h4&gt; Total : {{order.get_cart_total|floatformat:2}} € &lt;h4&gt; &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;customer-info&quot;&gt;
              &lt;div id=&quot;customer-basic-info&quot; class=&quot;customer-basic-info&quot;&gt;  
                  &lt;div class=&quot;text-box-name&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Name..&quot;&gt; &lt;/div&gt;
                  &lt;div class=&quot;text-box-email&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;Email..&quot;&gt; &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt; &lt;h4&gt; Shipping information &lt;/h4&gt; &lt;/div&gt;
              &lt;div class=&quot;customer-shipping-info-1&quot;&gt;
                  &lt;div class=&quot;text-box-address&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;text&quot; name=&quot;address&quot; placeholder=&quot;Address..&quot;&gt; &lt;/div&gt;
                  &lt;div class=&quot;text-box-postcode&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;text&quot; name=&quot;postcode&quot; placeholder=&quot;Code postal&quot;&gt; &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;customer-shipping-info-2&quot;&gt;  
                  &lt;div class=&quot;text-box-city&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;text&quot; name=&quot;city&quot; placeholder=&quot;Ville..&quot;&gt; &lt;/div&gt;
                  &lt;div class=&quot;text-box-country&quot;&gt; &lt;input required class=&quot;form text-box&quot; type=&quot;text&quot; name=&quot;country&quot; placeholder=&quot;Pays..&quot;&gt; &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;payment-options&quot;&gt;
              &lt;div&gt; &lt;h4&gt; Paiement &lt;h4&gt; &lt;/div&gt;
              &lt;div&gt; &lt;input class=&quot;button&quot; type=&quot;submit&quot; value=&quot;PayPal&quot; &gt; &lt;/div&gt;
              &lt;div&gt; &lt;button class=&quot;button&quot; id=&quot;make-payment&quot;&gt; MAKE PAYMENT &lt;/button&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  
      var total = '{{order.get_cart_total}}';
      var shipping = '{{order.shipping}}';
      var form = document.getElementById(&quot;form&quot;);
  
      form.addEventListener('submit', function(e){
          e.preventDefault();
          console.log('Form submitted.....');
      })
  
  
      if (user != 'AnonymousUser'){
          document.getElementById('customer-basic-info').innerHTML = ''
      }
  
      document.getElementById(&quot;make-payment&quot;).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 =&gt; response.json())
          .then(data =&gt; {
              console.log('Success:', data);
              alert('Transaction completed');
  
              cart = {};
  
              document.cookie = 'cart' + JSON.stringify(cart) + &quot;;domain=;path=/&quot;;
  
              window.location.href = &quot;{% url 'products' %}&quot;;
          })
  
      }
  
  &lt;/script&gt;
  
  {% endblock content %}
  </code></pre>