Image Not Showing and Up Issue Solved and Items are now visible in Tabular Form

ecommerce/settings.py

@@ -125,6 +125,6 @@
     os.path.join(BASE_DIR, 'static')
 ]
 
-MEDIA_URL = 'static/image/'
+MEDIA_URL = '/images/'
 
-MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
+MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

static/ecommerce/css/main.css

@@ -0,0 +1,99 @@
+body{
+	background-color: hsl(0, 0%, 98%);
+}
+
+h1,h2,h3,h4,h5,h6{
+	color:hsl(0, 0%, 30%);
+}
+
+.box-element{
+	box-shadow:hsl(0, 0%, 80%) 0 0 16px;
+	background-color: #fff;
+	border-radius: 4px;
+	padding: 10px;
+}
+
+.thumbnail{
+	width: 100%;
+	height: 200px;
+	-webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
+    -moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
+    box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
+}
+
+.product{
+	border-radius: 0 0 4px 4px;
+}
+
+.bg-dark{
+	background-color: #4f868c!important;
+}
+
+#cart-icon{
+	width:25px;
+	display: inline-block;
+	margin-left: 15px;
+}
+
+#cart-total{
+	display: block;
+	text-align: center;
+	color:#fff;
+	background-color: red;
+	width: 20px;
+	height: 25px;
+	border-radius: 50%;
+	font-size: 14px;
+}
+
+.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12{
+	margin-top: 10px;
+}
+
+.btn{
+	border-radius: 0;
+}
+
+.row-image{
+	width: 100px;
+}
+
+.form-field{
+	width:250px;
+	display: inline-block;
+	padding: 5px;
+}
+
+.cart-row{
+	display: flex;
+    align-items: flex-stretch;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ececec;
+
+}
+
+.quantity{
+	display: inline-block;
+	font-weight: 700;
+	padding-right:10px;
+
+
+}
+
+.chg-quantity{
+	width: 12px;
+	cursor: pointer;
+	display: block;
+	margin-top: 5px;
+	transition:.1s;
+}
+
+.chg-quantity:hover{
+	opacity: .6;
+}
+
+
+.hidden{
+	display: none!important;
+}

static/ecommerce/js/cart.js

@@ -0,0 +1,63 @@
+var updateBtns = document.getElementsByClassName('update-cart')
+
+for (i = 0; i < updateBtns.length; i++) {
+	updateBtns[i].addEventListener('click', function(){
+		var productId = this.dataset.product
+		var action = this.dataset.action
+		console.log('productId:', productId, 'Action:', action)
+		console.log('USER:', user)
+
+		if (user == 'AnonymousUser'){
+			addCookieItem(productId, action)
+		}else{
+			updateUserOrder(productId, action)
+		}
+	})
+}
+
+function updateUserOrder(productId, action){
+	console.log('User is authenticated, sending data...')
+
+		var url = '/update_item/'
+
+		fetch(url, {
+			method:'POST',
+			headers:{
+				'Content-Type':'application/json',
+				'X-CSRFToken':csrftoken,
+			}, 
+			body:JSON.stringify({'productId':productId, 'action':action})
+		})
+		.then((response) => {
+		   return response.json();
+		})
+		.then((data) => {
+		    location.reload()
+		});
+}
+
+function addCookieItem(productId, action){
+	console.log('User is not authenticated')
+
+	if (action == 'add'){
+		if (cart[productId] == undefined){
+		cart[productId] = {'quantity':1}
+
+		}else{
+			cart[productId]['quantity'] += 1
+		}
+	}
+
+	if (action == 'remove'){
+		cart[productId]['quantity'] -= 1
+
+		if (cart[productId]['quantity'] <= 0){
+			console.log('Item should be deleted')
+			delete cart[productId];
+		}
+	}
+	console.log('CART:', cart)
+	document.cookie ='cart=' + JSON.stringify(cart) + ";domain=;path=/"
+
+	location.reload()
+}

store/templates/store/cart.html

@@ -31,11 +31,11 @@
 					<div><strong>Total</strong></div>
 				</div>
 				{% for item in items %}
-				<div>
-					<div><img class="row-image" src="{{item.product.imageURL}}"></div>
-					<div><p>{{item.product.name}}</p></div>
-					<div><p>${{item.product.price|floatformat:2}}</p></div>
-					<div>
+				<div class="cart-row">
+					<div style="flex:1"><img class="row-image" src="{{item.product.imageURL}}"></div>
+					<div  style="flex:2"><p>{{item.product.name}}</p></div>
+					<div style="flex:2"><p>${{item.product.price|floatformat:2}}</p></div>
+					<div  style="flex:1">
 						<p >{{item.quantity}}</p>
 						<div>
 							<img data-action="add" class="chg-quantity update-cart" src="{% static  'images/arrow-up.png' %}">

store/templates/store/store.html

@@ -9,7 +9,7 @@
 				<h6><strong>{{product.name}}</strong></h6>
 				<hr>
 
-				<button class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
+				<button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
 
 				<a class="btn btn-outline-success" href="#">View</a>
 				<h4 style="display: inline-block; float: right"><strong>${{product.price}}</strong></h4>

store/urls.py

@@ -1,5 +1,5 @@
 from django.urls import path
-
+from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from . import views
 
 urlpatterns = [
@@ -10,4 +10,5 @@
 	path('update_item/', views.updateItem, name="update_item"),
 	path('process_order/', views.processOrder, name="process_order"),
 
-]
+]
+urlpatterns += staticfiles_urlpatterns()