Navbar pour site Web de commerce électronique utilisant Django

Utilisez bootstrap.it vous aidera pour la convivialité mobile. Ils ont une belle barre de navigation prête à l'emploi que vous pouvez modifier. Téléchargez simplement des exemples de bootstrap, obtenez le code pour la barre de navigation. concevez votre page principale / d'accueil comme vous le souhaitez, puis pour coller la navigation à d'autres pages, utilisez le contenu de bloc comme celui-ci:

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

il existe de nombreux tutoriels pour étendre la page html de base. 'em.

dans views.py

<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>

dans le modèle

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

ceci est très général car j'essaye de vous donner quelques indices pour rechercher en avant.

d'abord, pensez à une barre de navigation quelque chose comme ceci:

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

que vous pouvez voir un exemple pur de sous-barre de navigation dans ce lien ou vous pouvez utiliser bootstrap si vous voulez.

revenons maintenant aux modèles Django, vous devez avoir quelque chose comme le fichier modèle base.html que votre code de barre de navigation est là et tous les autres modèles hériteront de la barre de navigation, puis dans vos vues. py pour chaque vue, transmettez simplement les catégories que vous avez déjà interrogées de la base de données à la fonction de rendu:

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

cela passera toutes les catégories de votre base de données au modèle base.html où vous pouvez simplement le mettre dans une balise de modèle {% for%} pour l'injecter en HTML:

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

ok, ce n'est pas la solution définitive, mais je pense que vous avez le algorithme.

Merci à tous pour vos réponses. J'ai créé une barre de navigation dynamique comme suit J'ai d'abord créé le fichier context_processor.py dans lequel j'ai importé ProductModel comme suit:

J'ai ajouté le fichier ci-dessus dans settings.py

    <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 %}

Puis dans navbar.html j'ai ajouté le code HTML suivant code

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)

Et Bingo .. !! Cela a fonctionné