I want to add all the items in the cart to the checkout page, I’m using Django.
But all the cart items are stored in localStorage.
I want to use a loop my code so far:-
{% extends 'shop/basic.html' %}
{% block title%} Checkout - My Awesome Cart{% endblock %}
{% block css %}
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr #total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
{% endblock css %}
{% block body %}
<div class="container">
<div class="col my-4">
<h2>Step 1 - My Awesome Cart Express Checkout - Review Your Cart Items</h2>
<div class="my-4">
<ul class="list-group" id="items">
</ul>
<div class="invoice-box">
<table id='checkoutPricesTable' cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png"
style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: <span class='badge badge-primary badge-pill' id='currentDate'></span>
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item ">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr id="total">
<td></td>
<td>
Total: <span id='totalPrice'></span>
</td>
</tr>
</table>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mt-3">
<li class="breadcrumb-item active" aria-current="page">Your Cart Total Is <b>Rs.<span
id="totalPriceMessage"></b> </span>Enter your details below & place your order. Thanks
for
using My Awesome Cart!</li>
</ol>
</nav>
</div>
</div>
<div class="col my-4">
<h2>Step 2 - Enter Address & Other Details:</h2>
<form method='POST' action='/checkout/'>
<input type="hidden" name='itemsJson' id='itemsJson'>
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputname">Name</label>
<input type="name" class="form-control" name='name' id="name" placeholder="Name">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">email</label>
<input type="email" class="form-control" name='email' id="Email4" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" name='Address 1' id="address" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address line 2</label>
<input type="text" class="form-control" name='Address2' id="address2"
placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" name='city' id="City">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<input type="text" class="form-control" name='state' placeholder="Enter State">
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" name='zip_code' id="Zip">
</div>
</div>
<div class="form-group">
<label for="inputZip">Phone Number</label>
<input type="tel" class="form-control" name='phone' id="phone">
</div>
<button type="submit" class="btn btn-primary">Place Order</button>
</form>
</div>
</div>
{% endblock %}
{% block js %}
<script>
console.log('cart')
console.log(localStorage.getItem('cart'))
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
console.log("No bug else")
console.log(`This is the dollar cart `, cart);
}
console.log(cart);
var sum = 0;
var totalPrice = 0;
if ($.isEmptyObject(cart)) {
//if object is empty
mystr = `<p>Your cart is empty, please add some items to your cart before checking out!</p>`
$('#items').append(mystr);
} else {
for (item in cart) {
let name = cart[item][1];
let qty = cart[item][0];
let itemPrice = cart[item][2];
sum = sum + qty;
totalPrice = totalPrice + qty * itemPrice
mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
${name}
<span class="badge badge-primary badge-pill">${qty}</span>
</li>`
$('#items').append(mystr);
}
}
let elem = document.createElement("p");
elem.innerHTML = '';
// Set the inner html of the p element just for testing. You'll be using a tr element instead let me show u:-
/*
<tr class="item ">
<td>
Element name here
</td>
<td>
Element price here
</td>
</tr>
*/
let i = 0;
// Don't forget this loop, you took a lot of time to make it
for (item in cart) {
// Insert the html here.
// In the loop
// console.log(item);
// console.log("pr items")
console.log(cart[`pr${i + 1}`])
// console.log(cart['pr1'])
// qty, name, price
elem.innerHTML += `
// Here's the problem......
<tr class="item ">
<td>
${cart['pr'+i+1][1]}
</td>
<td>
${cart['pr'+i+1][2]}
</td>
</tr>
`
i++;
}
// Insert it
const target = document.querySelector('#total');
target.before(elem);
// https://attacomsian.com/blog/javascript-insert-element-before#:~:text=In%20vanilla%20JavaScript%2C%20you%20can,existing%20element%20in%20the%20document.&text=Our%20goal%20is%20to%20add,above%20element%20in%20the%20DOM.
document.getElementById("totalPrice").innerHTML = totalPrice;
document.getElementById("totalPriceMessage").innerHTML = totalPrice;
document.getElementById('cart').innerHTML = sum;
let today = new Date();
let date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
let dateTime = date + ' ' + time;
console.log(dateTime);
document.getElementById('currentDate').innerHTML = dateTime;
{% if thank %}
$('#itemsJson').val(JSON.stringify(cart));
localStorage.clear();
alert("Thanks for order. Your order id is {{id}}. Use the order id {{id}} to track your order.")
document.location = '/tracker/';
{% endif %}
</script>
{% endblock %}
My index.html file:-
{% extends 'shop/basic.html' %}
{% block title%} MyAwesomeCart - Best Ecommerce Website{% endblock %}
{% block css %}
.col-md-3
{
display: inline-block;
margin-left:-4px;
}
.carousel-indicators .active {
background-color: blue;
}
.col-md-3 img{
width: 170px;
height: 200px;
}
body .carousel-indicator li{
background-color: blue;
}
body .carousel-indicators{
bottom: -40px;
}
.carousel-indicators li {
background-color: #7270fc;
}
body .carousel-control-prev-icon,
body .carousel-control-next-icon{
background-color: blue;
}
.carousel-control-prev,
.carousel-control-next{
top: auto;
bottom: auto;
padding-top: 222px;
}
body .no-padding{
padding-left: 0,
padding-right: 0;
}
{% endblock %}
{% block body %}
{% load static %}
<div class="container">
<!--Slideshow starts here -->
{% for product, range, nSlides in allProds %}
<h5 class="my-4">Flash Sale On {{product.0.category}} - Recommended Items</h5>
<div class="row">
<div id="demo{{forloop.counter}}" class="col carousel slide my-3" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo{{forloop.counter}}" data-slide-to="0" class="active"></li>
{% for i in range %}
<li data-target="#demo{{forloop.parentloop.counter}}" data-slide-to="{{i}}"></li>
{% endfor %}
</ul>
<div class="container carousel-inner no-padding">
<div class="carousel-item active">
{% for i in product %}
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="card align-items-center" style="width: 18rem;">
<img src='/media/{{i.image}}' class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" id="namepr{{i.id}}">{{i.product_name}}</h5>
<p class="card-text">{{i.desc|slice:"0:53"}}...</p>
<h6 class="card-title" >Price: <span id="pricepr{{i.id}}">{{i.price}}</span></h6>
<span id="divpr{{i.id}}" class="divpr">
<button id="pr{{i.id}}" class="btn btn-primary cart">Add To Cart</button>
</span>
<a href="/shop/productview/{{i.id}}"><button id="qv{{i.id}}" class="btn btn-primary cart">QuickView</button></a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
</div>
</div>
<!-- left and right controls for the slide -->
<a class="carousel-control-prev" href="#demo{{forloop.counter}}" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo{{forloop.counter}}" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
{% endfor %}
</div>
{% endblock %}
{% block js %}
<script>
// Find out the cart items from localStorage
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
updateCart(cart);
}
// If the add to cart button is clicked, add/increment the item
//$('.cart').click(function() {
$('.divpr').on('click', 'button.cart', function(){
var idstr = this.id.toString();
if (cart[idstr] != undefined) {
qty = cart[idstr][0] + 1;
} else {
qty = 1;
name = document.getElementById('name'+idstr).innerHTML;
price = document.getElementById('price'+idstr).innerHTML;
cart[idstr] = [qty, name, parseInt(price)];
console.log(price);
}
updateCart(cart);
});
//Add Popover to cart
$('#popcart').popover();
updatePopover(cart);
function updatePopover(cart) {
console.log('We are inside updatePopover');
var popStr = "";
popStr = popStr + "<h5> Cart for your items in my shopping cart </h5><div class='mx-2 my-2'>";
var i = 1;
for (var item in cart) {
popStr = popStr + "<b>" + i + "</b>. ";
popStr = popStr + document.getElementById('name' + item).innerHTML.slice(0, 19) + "... Qty: " + cart[item][0] + '<br>';
i = i + 1;
}
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' onclick='clearCart()' id ='clearCart'>Clear Cart</button> "
console.log(popStr);
document.getElementById('popcart').setAttribute('data-content', popStr);
$('#popcart').popover('show');
}
function clearCart() {
cart = JSON.parse(localStorage.getItem('cart'));
for (var item in cart) {
document.getElementById('div' + item).innerHTML = '<button id="' + item + '" class="btn btn-primary cart">Add To Cart</button>'
}
localStorage.clear();
cart = {};
updateCart(cart);
}
function updateCart(cart) {
var sum = 0;
for (var item in cart) {
sum = sum + cart[item][0];
document.getElementById('div' + item).innerHTML = "<button id='minus" + item + "' class='btn btn-primary minus'>-</button> <span id='val" + item + "''>" + cart[item][0] + "</span> <button id='plus" + item + "' class='btn btn-primary plus'> + </button>";
}
localStorage.setItem('cart', JSON.stringify(cart));
document.getElementById('cart').innerHTML = sum;
console.log(cart);
updatePopover(cart);
}
// If plus or minus button is clicked, change the cart as well as the display value
$('.divpr').on("click", "button.minus", function() {
a = this.id.slice(7, );
cart['pr' + a][0] = cart['pr' + a][0] - 1;
cart['pr' + a][0] = Math.max(0, cart['pr' + a][0]);
if (cart['pr' + a][0] == 0){
document.getElementById('divpr' + a).innerHTML = '<button id="pr'+a+'" class="btn btn-primary cart">Add to Cart</button>';
delete cart['pr'+a];
}
else{
document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
}
updateCart(cart);
});
$('.divpr').on("click", "button.plus", function() {
a = this.id.slice(6, );
cart['pr' + a][0] = cart['pr' + a][0] + 1;
document.getElementById('valpr' + a).innerHTML = cart['pr' + a][0];
updateCart(cart);
});
</script>
{% endblock %}
My views.py :-
from django.http import HttpResponse
from django.shortcuts import render
from .models import Product, Contact, Orders, OrderUpdate
from math import ceil
import json
# Create your views here.
def index(request):
# products = Product.objects.all()
# print(products)
# n = len(products)
# nSlides = n//4 + ceil((n/4)-(n//4))
allProds = []
catprods = Product.objects.values('category', 'id')
cats = {item['category'] for item in catprods}
for cat in cats:
prod = Product.objects.filter(category=cat)
n = len(prod)
nSlides = n // 4 + ceil((n / 4) - (n // 4))
allProds.append([prod, range(1, nSlides), nSlides])
# params = {'no_of_slides':nSlides, 'range': range(1,nSlides),'product': products}
# allProds = [[products, range(1, nSlides), nSlides],
# [products, range(1, nSlides), nSlides]]
params = {'allProds': allProds}
return render(request, 'shop/index.html', params)
def about(request):
return render(request, 'shop/about.html')
def contact(request):
if request.method == "POST":
name = request.POST.get('name', '')
email = request.POST.get('email', '')
phone = request.POST.get('phone', '')
desc = request.POST.get('desc', '')
contact = Contact(name=name, email=email, phone=phone, desc=desc)
contact.save()
return render(request, 'shop/contact.html')
def tracker(request):
if request.method == "POST":
orderId = request.POST.get('orderId', '')
email = request.POST.get('email', '')
try:
order = Orders.objects.filter(order_id=orderId, email=email)
if len(order) > 0:
update = OrderUpdate.objects.filter(order_id=orderId)
updates = []
for item in update:
updates.append(
{'text': item.update_desc, 'time': item.timestamp})
response = json.dumps(updates, default=str)
return HttpResponse(response)
else:
return HttpResponse('{}')
except Exception as e:
return HttpResponse('{}')
return render(request, 'shop/tracker.html')
def search(request):
return render(request, 'shop/search.html')
def productView(request, id):
# Fetch the product using the id
product = Product.objects.filter(id=id)
return render(request, 'shop/productView.html', {'product': product[0]})
def checkout(request):
if request.method == "POST":
items_json = request.POST.get('itemsJson', '')
name = request.POST.get('name', '')
email = request.POST.get('email', '')
address = request.POST.get('address1', '') + \
" " + request.POST.get('address2', '')
city = request.POST.get('city', '')
state = request.POST.get('state', '')
zip_code = request.POST.get('zip_code', '')
phone = request.POST.get('phone', '')
order = Orders(items_json=items_json, name=name, email=email, address=address, city=city,
state=state, zip_code=zip_code, phone=phone)
order.save()
update = OrderUpdate(order_id=order.order_id, update_desc="The order has been placed")
update.save()
thank = True
id = order.order_id
return render(request, 'shop/checkout.html', {'thank': thank, 'id': id})
return render(request, 'shop/checkout.html')
My base template, ie:- basic.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>{% block title%} {% endblock %}</title>
<style>
{% block css %} {% endblock %}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/shop">My Awesome Cart</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/tracker">Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>
</ul>
<form method='get' action='/shop/search/' class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button type="button" class="btn btn-secondary mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Cart(<span id="cart">0</span>)
</button>
</div>
</nav>
{% block body %} {% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
{% block js %} {% endblock %}
</body>
</html>
My tracker.html, you might need it too…
{% extends 'shop/basic.html' %}
{% block title%} My Awesome Cart Tracker{% endblock %}
{% block body %}
<div class="container">
<div class="col my-4">
<h2>Enter your Order Id and email address to track your order</h2>
<form method="post" action="#" id="trackerForm">{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputname">Order Id</label>
<input type="text" class="form-control" id="orderId" name="orderId" placeholder="Order Id">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="email">
</div>
<button type="submit" class="btn btn-primary">Track Order</button>
</div>
</div>
<div class="col my-4">
<h2>Your Order Status</h2>
<div class="my-4">
<ul class="list-group" id="items">
Enter your order Id and email and click Track Order to find details about your order!
</ul>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$('#trackerForm').submit(function(event) {
$('#items').empty();
var formData = {
'orderId': $('input[name=orderId]').val(),
'email': $('input[name=email]').val(),
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
};
$.ajax({
type: 'POST',
url: '/shop/tracker/',
data: formData,
encode: true
})
.done(function(data) {
console.log(data)
updates = JSON.parse(data);
if (updates.length > 0 & updates != {}) {
for (i = 0; i < updates.length; i++) {
let text = updates[i]['text'];
let time = updates[i]['time'];
mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
${text}
<span class="badge badge-primary badge-pill">${time}</span>
</li>`
$('#items').append(mystr);
}
} else {
mystr = `<li class="list-group-item d-flex justify-content-between align-items-center">
Sorry, We are not able to fetch this order id and email. Make sure to type correct order Id and email</li>`
$('#items').append(mystr);
}
});
event.preventDefault();
});
</script>
{% endblock %}
My models.py file :-
from django.db import models
# Create your models here.
class Product(models.Model):
product_id = models.AutoField
product_name = models.CharField(max_length=50)
category = models.CharField(
max_length=50,
default='')
subcategory = models.CharField(max_length=50)
price = models.IntegerField(default=0)
image = models.ImageField(upload_to='shop/images', default='')
desc = models.CharField(max_length=300)
pub_date = models.DateField()
def __str__(self):
return self.product_name
class Contact(models.Model):
message_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=50)
email = models.CharField(max_length=70, default="")
phone = models.CharField(max_length=70, default="")
desc = models.CharField(max_length=500, default="")
def __str__(self):
return self.name
class Orders(models.Model):
order_id= models.AutoField(primary_key=True)
items_json= models.CharField(max_length=5000)
name=models.CharField(max_length=90)
email=models.CharField(max_length=111)
address=models.CharField(max_length=111)
city=models.CharField(max_length=111)
state=models.CharField(max_length=111)
zip_code=models.CharField(max_length=111)
phone = models.IntegerField()
def __str__(self):
return self.name
class OrderUpdate(models.Model):
update_id = models.AutoField(primary_key=True)
order_id = models.IntegerField(default='')
update_desc = models.CharField(max_length=5000)
timestamp = models.DateField(auto_now_add=True)
def __str__(self):
return self.update_desc[:7] + '...'
My urls.py file :-
"""mac URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
# from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('shop/', include('shop.urls')),
path('blog/', include('blog.urls')),
path('', include('shop.urls')),
# path('', views.home, name='Home')
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I think this much info if enough