Click here to Skip to main content
15,672,369 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I'm making a website using Django and Bootstrap but I'm unable to find out the error.

This is Models.py

Python
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,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
Python
from django.shortcuts import render
from .models import Product
from math import ceil
# Create your views here.
from django.http import HttpResponse
def index(request):
    # products= Product.objects.all()
    # n= len(products)
    # nSlides= n//6 + ceil((n/6) - (n//6))
    # params={'no_of_slides':nSlides, 'range':range(1,nSlides), 'product': products}
    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
Python
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
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 %}
  <!--navbar will come here-->
  <!--carousel starts here-->
  {% load static %}

{% for product, range, nSlides in allProds %}
  <div id="carouselExampleIndicators{{forloop.counter}}" class="carousel slide" data-bs-ride="carousel">
    <!--slides buttons starts from here-->
  <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>
     <!--slides buttons ends here-->
    <!--slides inner starts from here-->
      <div class="container" style="padding-top: 20px;">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!--card group starts here-->
      <div class="card-group">
           {% for i in product %}
        <!--card starts from here-->
  <div class="card" style="min-height:500px;  max-width:253.5px;">
    <!--card image-->
    <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>
      <!--card ends here-->
    </div>
  </div>
       </div>
      <div class="carousel-item">

       {% endif %}

       {% endfor %}
</div>


    <!--slides inner ends here-->
  <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>

  <!--carousel ends here-->
{% 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
HTML
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <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;">
<!--  adding navbar-->
<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>
Posted
Comments
Richard MacCutchan 21-Jul-21 6:40am    
Saying, "not working", is the single most useless comment we see on these forums. And just dumping all your code and expecting us to a) work out what the problem is and where it occurs, and b) provide a full solution, is rather rude.

So, please use the Improve question link below your question, and add complete details of the problem and exactly where it occurs.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900