I'm making a website using Django and Bootstrap but I'm unable to find out the error.
This is Models.py
from django.db import models
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,default="")
price = models.IntegerField(default=0)
desc = models.CharField(max_length=300)
pub_date= models.DateField()
image = models.ImageField(upload_to="shop/images",default="")
def __str__(self):
return self.product_name
This is views.py
from django.shortcuts import render
from .models import Product
from math import ceil
from django.http import HttpResponse
def index(request):
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 // 6 + ceil((n / 6) - (n // 6))
allProds.append([prod,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):
return HttpResponse("We are at contact")
def tracker(request):
return HttpResponse("We are at tracker")
def search(request):
return HttpResponse("We are at search")
def productView(request):
return HttpResponse("We are at product view")
def checkout(request):
return HttpResponse("We are at checkout")
This is urls.py
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path("",views.index, name ="ShopHome"),
path("about/",views.about,name="About us"),
path("contact/",views.contact,name="ContactUs"),
path("tracker/",views.tracker,name="TrackingStatus"),
path("search/",views.search,name="Search"),
path("productView/",views.productView,name="Productview"),
path("checkout/",views.checkout,name="Checkout")
]
This is index.html
{% extends 'shop/basic.html' %}
{% block title%} index.html {% endblock %}
{% block css %}
.carousel-inner{
position: relative;
width: 100%;
overflow: hidden;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
.card-img,
.card-img-top{
max-height:200px;
}
{% endblock %}
{% load static %}
{% block body %}
<!--
<!--
{% load static %}
{% for product, range, nSlides in allProds %}
<div id="carouselExampleIndicators{{forloop.counter}}" class="carousel slide" data-bs-ride="carousel">
<!--
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators{{forloop.counter}}" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
{% for i in range %}
<button type="button" data-bs-target="#carouselExampleIndicators{{forloop.parentloop.counter}}" data-bs-slide-to="1" aria-label="Slide 2"> </button>
{% endfor %}
</div>
<!--
<!--
<div class="container" style="padding-top: 20px;">
<div class="carousel-inner">
<div class="carousel-item active">
<!--
<div class="card-group">
{% for i in product %}
<!--
<div class="card" style="min-height:500px; max-width:253.5px;">
<!--
<img src="/media/{{i.image}}" class="card-img-top" alt="..." style="min-height:250px; max-height:250px;"/>
<div class="card-body">
<h5 class="card-title">{{i.product_name}}</h5>
<p class="card-text">{{i.desc}}</p>
</div>
<div class="card-footer">
<button id="pr{{i.id}}" class="btn btn-primary btn-sm cart">Add to cart</button>
</div>
</div>
{% if forloop.counter|divisibleby:6 and forloop.counter > 0 and not forloop.last %}
</div>
<!--
</div>
</div>
</div>
<div class="carousel-item">
{% endif %}
{% endfor %}
</div>
<!--
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators{{forloop.counter}}" data-bs-slide="prev">
Previous
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators{{forloop.counter}}" data-bs-slide="next">
Next
</button>
</div>
<!--
{% endfor %}
{% endblock %}
{% block js %}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
console.log('working')
if(localStorage.getItem('cart')== null){
var cart = {};
}
else{
cart = JSON.parse(localStorage.getItem('cart'))
document.getElementById('cart').innerHTML = Object.keys(cart).length;
}
$('.cart').click(function(){
console.log('clicked');
var idstr = this.id.toString();
console.log(idstr);
if (cart[idstr] !=undefined){
cart[idstr] = cart[idstr] + 1;
}
else
{
cart[idstr] = 1;
}
console.log(cart);
localStorage.setItem('cart', JSON.stringify(cart));
document.getElementById('cart').innerHTML = Object.keys(cart).length;
});
</script>
{% endblock js%}
What I have tried:
This is basic.html
<!doctype html>
<html lang="en">
<head>
<!--
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>{% block title%} {% endblock %}</title>
</head>
<body style="background-color:grey;">
<!--
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Stockpile</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
More
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Men</a></li>
<li><a class="dropdown-item" href="#">Women</a></li>
<li><a class="dropdown-item" href="#">Girls</a></li>
<li><a class="dropdown-item" href="#">Boys</a></li>
<li><a class="dropdown-item" href="#">Kids</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Accessories</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Home Shopping</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link " href="#" tabindex="-1" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart(<span id="cart">0</span>)</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block body %} {% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
{% block js %} {% endblock js %}
</body>
</html>