display total price on order form

la_chariotte/order/templates/order/grouped_order_detail.html

@@ -79,7 +79,7 @@
             {% csrf_token %}
           <td>{{ item.name }}</td>
           <td>{{ item.price }} €</td>
-          <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
+          <td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input>
             {% if item.get_remaining_nb is not null %}
             <span class="is-italic mini-title">
             {% if item.get_remaining_nb == 0 %}Produit épuisé
@@ -88,6 +88,10 @@
             {% endif %}{% endif %}</td>
         </tr>
         {% endfor %}
+        <tr>
+          <td></td><td></td>
+          <td><strong>Total : <span class="total">0</span> €</strong></td>
+        </tr>
       </tbody>
     </table>
 
@@ -104,7 +108,8 @@
             <p>{{ item.price }} €</p>
           </div>
           <div class="card-footer-item">
-            <td><input name="quantity_{{ item.id }}" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}></input></td>
+            <td><input name="quantity_{{ item.id }}" onblur="findTotal()" size="4" type="number" value="0" min="0" {% if item.get_remaining_nb == 0 %}disabled{% endif %}>
+            </input></td>
               {% if item.get_remaining_nb is not null %}
               <span class="is-italic mini-title">
               {% if item.get_remaining_nb == 0 %}Produit épuisé
@@ -115,6 +120,7 @@
         </div>
       </div>
       {% endfor %}
+      <div><strong>Total : <span class="total">0</span> €</strong></div>
     </div>
 
     {% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
@@ -131,7 +137,7 @@
       </div>
       <div class="column">
         <p><label for="phone">Numéro de téléphone :</label>
-        <input id="phone" type="text" placeholder="0601020304" name="phone" value="{{ phone }}" required></p>
+        <input id="phone" type="tel" pattern="[0-9]{10}" placeholder="0601020304" name="phone" value="{{ phone }}" required></p>
         <p><label for="email">Adresse mail : </label>
         <input id="email" type="email" placeholder="exemple@mail.fr" name="email" value="{{ email }}" required></p>
       </div>
@@ -141,9 +147,36 @@
 
     <div class="buttons">
       <button type="submit" value="Order" class="button is-primary">
-        <i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Commander</button>
+        <i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Commander
+      </button>
+      <p>Total : <span class="total">0</span> €</p>
     </div>
   </form>
   {% endif %}
   </div>
 {% endblock %}
+
+<script>
+{% block extra_js %}
+// Compute total price whenever a value in input is modified
+function findTotal(){
+  var inputs = document.getElementsByTagName("input");
+  total_price = 0;
+  for (x = 0 ; x < inputs.length ; x++){
+    input_name = inputs[x].getAttribute("name");
+    if(input_name.indexOf("quantity_")==0){ // get the quantities inputs only
+      item_id = input_name.split("_")[1];
+      prices = {{ prices_dict | safe }};
+      total_price += prices[item_id] * inputs[x].value;
+      console.log(prices[item_id] * inputs[x].value);
+    }
+  }
+  console.log(total_price);
+  console.log(document.getElementsByClassName('total'));
+  
+  [].forEach.call(document.getElementsByClassName('total'), function (el) {
+    el.innerHTML = total_price;
+  })
+}
+{% endblock %}
+</script>

la_chariotte/order/views/grouped_order.py

@@ -1,8 +1,10 @@
 import csv
+import json
 from io import BytesIO
 
 from django import http
 from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
+from django.core.serializers.json import DjangoJSONEncoder
 from django.shortcuts import get_object_or_404
 from django.template.loader import get_template
 from django.urls import reverse, reverse_lazy
@@ -68,10 +70,17 @@ class GroupedOrderDetailView(generic.DetailView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+        # Get remaining quantities
         qty_dict = {}
         for item in self.get_object().item_set.all():
             qty_dict[item.id] = item.get_remaining_nb()
         context["remaining_qty"] = qty_dict
+
+        # Get a dict with prices for the js display of total price of an order
+        prices_dict = {}
+        for item in self.get_object().item_set.all():
+            prices_dict[item.id] = item.price
+        context["prices_dict"] = json.dumps(prices_dict, cls=DjangoJSONEncoder)
         return context