6 & 7 - Refresh Cart Ajax Part 2 & 3

src/carts/templates/carts/home.html

@@ -15,7 +15,7 @@ <h1>Cart</h1>
   </thead>
   <tbody class='cart-body'>
     {% for product in cart.products.all %}
-    <tr>
+    <tr class='cart-product'>
       <th scope="row">{{ forloop.counter }}</th>
       <td><a href='{{ product.get_absolute_url }}'>{{ product.title }}</a> 
 
@@ -27,11 +27,11 @@ <h1>Cart</h1>
     {% endfor %}
     <tr>
       <td colspan="2"></td>
-      <td><b>Subtotal</b> {{ cart.subtotal }}</td>
+      <td><b>Subtotal</b> $<span class='cart-subtotal'>{{ cart.subtotal }}</span></td>
     </tr>
     <tr>
       <td colspan="2"></td>
-      <td><b>Total</b> {{ cart.total }}</td>
+      <td><b>Total</b> $<span class='cart-total'>{{ cart.total }}</span></td>
     </tr>
     <tr>
       <td colspan="2"></td>

src/carts/views.py

@@ -13,6 +13,18 @@
 from products.models import Product
 from .models import Cart
 
+
+def cart_detail_api_view(request):
+    cart_obj, new_obj = Cart.objects.new_or_get(request)
+    products = [{"name": x.name, "price": x.price} for x in cart_obj.products.all()] # [<object>, <object>, <object>]
+    # products_list = []
+    # for x in cart_obj.products.all():
+    #     products_list.append(
+    #             {"name": x.name, "price": x.price}
+    #         )
+    cart_data  = {"products": products, "subtotal": cart_obj.subtotal, "total": cart_obj.total}
+    return JsonResponse(cart_data)
+
 def cart_home(request):
     cart_obj, new_obj = Cart.objects.new_or_get(request)
     return render(request, "carts/home.html", {"cart": cart_obj})

src/ecommerce/urls.py

@@ -25,6 +25,8 @@
 
 from accounts.views import login_page, register_page, guest_register_view
 from addresses.views import checkout_address_create_view, checkout_address_reuse_view
+from carts.views import cart_detail_api_view
+
 from .views import home_page, about_page, contact_page
 
 urlpatterns = [
@@ -36,6 +38,7 @@
     url(r'^checkout/address/reuse/$', checkout_address_reuse_view, name='checkout_address_reuse'),
     url(r'^register/guest/$', guest_register_view, name='guest_register'),
     url(r'^logout/$', LogoutView.as_view(), name='logout'),
+    url(r'^api/cart/$', cart_detail_api_view, name='api-cart'),
     url(r'^cart/', include("carts.urls", namespace='cart')),
     url(r'^register/$', register_page, name='register'),
     url(r'^bootstrap/$', TemplateView.as_view(template_name='bootstrap/example.html')),

src/templates/base.html

@@ -63,8 +63,9 @@
               console.log("in current cart")
               var cartTable = $(".cart-table")
               var cartBody = cartTable.find(".cart-body")
-              cartBody.html("<h1>Changed</h1>")
-
+              //cartBody.html("<h1>Changed</h1>")
+              var productRows = cartBody.find(".cart-product")
+              var currentUrl = window.location.href
 
               var refreshCartUrl = '/api/cart/'
               var refreshCartMethod = "GET";
@@ -73,8 +74,24 @@
                 url: refreshCartUrl,
                 method: refreshCartMethod,
                 data: data,
-                sucess: function(data){
+                success: function(data){
                   console.log("success")
+                  console.log(data)
+                  if (data.products.length > 0){
+                      productRows.html(" ")
+                      i = 1
+                      $.each(data.products, function(index, value){
+                        console.log(value)
+                          cartBody.prepend("<tr><th scope=\"row\">" + i + "</th><td>" + value.name + "</td><td>" + value.price + "</td></tr>")
+                          i ++
+                      })
+
+                      cartBody.find(".cart-subtotal").text(data.subtotal)
+                      cartBody.find(".cart-total").text(data.total)
+                  } else {
+                    window.location.href = currentUrl
+                  }
+
                 },
                 error: function(errorData){
                   console.log("error")