"Видеоурок"

Код на Гитхабе

В этом уроке мы собираемся закончить последнюю страницу, которую мы еще не сделали, а именно страницу меню. Мы перечислим все объекты MenuItem, а также предоставим пользователю панель поиска для поиска определенных элементов. Начнем с построения базовой части представления для поиска и представления для меню.

В нашем клиенте/views.py:

class Menu(View):
    def get(self, request, *args, **kwargs):
        menu_items = MenuItem.objects.all()
        context = {
            'menu_items': menu_items,
        }
        return render(request, 'customer/menu.html', context)
class MenuSearch(View):
    pass

Чуть позже мы добавим логику для поиска. Давайте добавим два URL для этих представлений:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),
    path('restaurant/', include('restaurant.urls')),
    path('', Index.as_view(), name='index'),
    path('about/', About.as_view(), name='about'),
    path('menu/', Menu.as_view(), name='menu'),
    path('menu/search/', MenuSearch.as_view(), name='menu-search'),
    path('order/', Order.as_view(), name='order'),
    path('order-confirmation/<int:pk>/',
         OrderConfirmation.as_view(), name='order-confirmation'),
    path('payment-confirmation/', OrderPayConfirmation.as_view(),
         name='payment-confirmation'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

С этим мы можем построить наш menu.html, вот весь файл:

{% extends 'customer/base.html' %}
{% block content %}
<div class="container">
    <div class="row justify-content-center mt-5">
        <div class="col-md-6 col-sm-12 text-center">
            <h1>What's On Our Menu?</h1>
        </div>
    </div>
    <div class="row justify-content-center mt-5">
        <div class="col-md-8 col-sm-12 text-center">
            <!-- Search form -->
            <form method="GET" action="{% url 'menu-search' %}">
                <div class="md-form mt-0 active-cyan-2">
                    <input class="form-control" name="q" type="text" placeholder="Search Our Menu" aria-label="Search" value="{{ request.GET.q }}">
                </div>
            </form>
        </div>
    </div>
    <div class="row justify-content-center mt-5">
        {% for item in menu_items %}
        <div class="col-md-4 col-sm-12 text-center mb-5">
            <img class="rounded" src="{{ item.image.url }}" width="350" height="300"/>
            <h5 class="mt-3">{{ item.name }}</h5>
            <p>Price: {{ item.price }}</p>
            <p>{{ item.description }}</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

В настоящее время, поскольку мы захватили все наши пункты меню, это будет перечислять каждый пункт в базе данных. В нашем html-шаблоне есть строка поиска. Вы увидите, что мы устанавливаем значение имени q на входе и отправляем форму как запрос на получение. Это означает, что все, что мы вводим в строку поиска, будет добавлено к нашему URL-адресу в следующем формате:

...?q=search_query

мы можем получить любое значение q для фильтрации результатов. Далее мы добавим эту логику в представление MenuSearch. Вы также увидите, что URL-адрес для отправки формы, установленный в атрибуте действия, является представлением поиска в меню. Нам нужно перерендерить этот шаблон с отфильтрованными результатами. Вот обновленный вид поиска в меню:

from django.db.models import Q
class MenuSearch(View):
    def get(self, request, *args, **kwargs):
        query = self.request.GET.get("q")
        menu_items = MenuItem.objects.filter(
            Q(name__icontains=query) |
            Q(price__icontains=query) |
            Q(description__icontains=query)
        )
        context = {
            'menu_items': menu_items
        }
        return render(request, 'customer/menu.html', context)

Мы используем Q, чтобы добавить дополнительные фильтры в наш MenuItem.objects.filter(). Мы сопоставляем объект, если поисковый запрос соответствует любой части имени, цены или описания. Мы можем получить поисковый запрос с помощью self.request.GET.get("q"). Затем мы передаем это в контекст нашего шаблона.

Теперь, когда мы что-то ищем, страница меню должна перерисовываться с фильтром для того, что мы искали.

С этими изменениями у нас должна быть рабочая страница меню и рабочая панель поиска на странице меню. На этом мы остановим этот урок. Это все, что я запланировал для этого приложения, так что это, вероятно, будет последним дополнением к нему, если я не найду что-то еще, что было бы хорошим дополнением для него.