CODEWITHSUNDEEP
djangodjango-modelsbootstrap-4django-viewse-commerce
sammortals
sammortals

Reputation: 131

Navbar For Ecommerce Website Using Django

I am designing eCommerce website based on django in backend. I want to create navbar which will contain menu based on categories of products. I want this Navbar dynamic as whenever new category posted it should automatically appear in menu field. My front end is bootstrap and Html. Please help me with logic. Thank You.

Upvotes: 1

Views: 811

Answers (4)

sammortals
sammortals

Reputation: 131

Thank You All For Your Answers. I have created dynamic navbar as follows First I created context_processor.py file in which I imported ProductModel as follows:

I added above file in settings.py

from products.models import ProductModel
def context_prod(request):
    allCat=[]
    catProd = ProductModel.objects.values("category","id")
    cats = {item["category"] for item in catProd}
    for cat in cats:
        prod = ProductModel.objects.filter(category=cat)
        subcat = prod.values("subcategory","id")
        subcat = {item["subcategory"] for item in subcat}
        allCat.append([prod, subcat])
    context={
        "allCat": allCat
    }
    return(context)

Then in navbar.html I added following HTML code

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            {% for prod, subcat in allCat %}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{ prod.0.category }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    {% for i in subcat %}
                        <a class="dropdown-item" href="#">{{ i }}</a>
                    {% endfor %}
                </div>
            </li>
            {% endfor %}

And Bingo..!! It worked

Upvotes: 0

YosSaL
YosSaL

Reputation: 1027

this is very general by I try to give you some clue to search forward.

first, think of a navbar something like this:

<nav class="navbar">
    <a href="#">product1</a>
    <a href="#">product2</a>
    .
    .
    .
</nav>

you can see a pure sub navbar example in this link or you can use bootstrap if you want.

now let's go back to Django templates, you must have something like base.html template file that your navbar code is there and every other template will inherit the navbar from it, then in your views.py for every view just pass the categories that you have already queried from the database to render function:

def view(request):
    categories = Category.objects.all()
    .
    .
    .
    return render(request, 'some.html', 
        {
            'categories': categories,
            .
            .
            .
        }

this will pass all the categories in your database to the base.html template where you can just put it in a {% for %} template tag to inject to HTML:

<nav class="navbar">
    {% for catg in categories %}
        <a href="#">{{ catg.name }}</a>
    {% endfor %}
</nav>

ok, this is not the definite solution, but I think you got the algorithm.

Upvotes: 1

Pruthvi Barot
Pruthvi Barot

Reputation: 2018

in views.py

def your_view_function(request):
    categories = Category.objects.all()
    return render(request,'your_template.html',{'categories':categories})

in template

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Categories
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          {% for category in categories %}
          <a class="dropdown-item" href="#">{{category.name}}</a>
          {% endfor %}
        </div>
      </li>
     
  </div>
</nav>

Upvotes: 0

Tawsif Riju
Tawsif Riju

Reputation: 40

Use bootstrap.it will help you for mobile friendliness.they have a ready made nice navbar for use that you can modify.just download bootstrap examples,get the code for navbar. design your main/home page as you like.then to stick the nav to other pages,use block content like this:

{% block content %}
   code...
   code...
{% endblock %}

there are lots of tutorials for extending base html page.pick and watch 'em.

Upvotes: 0

Related Questions