У меня есть только одна страница для всех действий и только один URL в urls.py. и в разделе меню есть несколько категорий продуктов питания. как я могу показать продукты, относящиеся только к определенной категории. и для этого предусмотрена система внешнего фильтра. как я могу использовать систему внешнего интерфейса в django. Я хочу, чтобы мой дизайн был таким. Как я могу использовать систему фильтров переднего плана в Django
models.py
class MenuCategory(models.Model):
title = models.CharField(max_length=250)
slug = AutoSlugField(populate_from='title')
active = models.BooleanField(default=True)
featured = models.BooleanField(default=False)
def __str__(self):
return self.title
class Meta:
verbose_name_plural = 'Menu Category'
class Food(models.Model):
name = models.CharField(max_length=250)
price = models.CharField(max_length=100)
detail = models.TextField(blank=True)
category = models.ForeignKey(MenuCategory,on_delete=models.DO_NOTHING)
image = models.ImageField(upload_to='Foods',blank=True)
featured = models.BooleanField(default=False)
active = models.BooleanField(default=True)
date = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
class Meta:
verbose_name_plural = 'Foods'
views.py
def homepage(request):
featured_dishes = Food.objects.filter(featured=True)
menu_categories = MenuCategory.objects.filter(active=True)
foods = Food.objects.filter(active=True)
return render(request,'cafe/base.html',{
'menu_categories':menu_categories,
'featured_dishes':featured_dishes,
'foods':foods,
})
base.html У меня есть одна домашняя страница.
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Special</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
<section class="menu-main common-padding" id="menu">
<div class="container"> <!-- Container .// -->
{% for section in menu_sections %}
{% if forloop.last %}
<div class="section-heading-wrap">
<p class="sub-heading" data-aos="fade-left" data-aos-duration="1000">{{section.section_title}}</p>
<h3 class="main-heading u-margin-bottom-small" data-aos="fade-right" data-aos-duration="1000">{{section.title_info}}</h3>
<p class="section-subtitle text-center normal-content" data-aos="fade-up" data-aos-duration="1000">{{section.section_description}}</p>
</div>
{% endif %}
{% endfor %}
</div> <!-- Container .// -->
<!-- this 'All' have all the active foods but when i move to other categories then how can i show foods to this category only without loading any page within this same section.what i have to do here // -->
<div class="iso-menu">
<ul> <li class="active" data-filter="*">All</li>
{% for category in menu_categories %}
<li data-filter=".{{??}}">{{category.title}}</li>
{% endfor %}
</ul>
</div>
<div class="iso-item" data-aos="zoom-in-up" data-aos-duration="1000">
{% for food in foods %}
{% if food.featured %}
<div class="item dessert dinner"> <!-- Iso-Item .// --> <!-- Alternate .// -->
<div class="menu-card-main">
<div class="menu-card-image recommend">
<a href="/media/{{food.image}}" data-lightbox="menu4" data-title="Smoked Paprika Hum"><img src="/media/{{food.image}}" alt="Dish4"></a>
</div>
<div class="manu-card-content main-box">
<p class="dish-price text-center u-margin-bottom-mini">{{food.price}}</p>
<h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
<p class="dish-detail text-center">{{food.detail}}</p>
</div>
</div>
</div>
{% else %}
<div class="item dinner lunch"> <!-- Iso-Item .// -->
<div class="menu-card-main">
<div class="manu-card-content main-box">
<p class="dish-price text-center u-margin-bottom-mini">{{food.price}}</p>
<h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
<p class="dish-detail text-center">{{food.detail}}</p>
</div>
<div class="menu-card-image">
<a href="/media/{{food.image}}" data-lightbox="menu1" data-title="Grilled American Fillet"><img src="/media/{{food.image}}" alt="Dish1"></a>
</div>
</div>
</div>
{% endif %}
{% endfor %} <!-- Iso-Item .// -->
</div>
</section>