Aula 34 - Loja Online - Django - Query do usuário no Search bar
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Esse é o link do código fluente no Pinterest
Meus links de afiliados:
Melhore seu NETWORKING
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no GITHUB.
Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB
Código final da aula:
Query / Search Bar
Vamos mexer em
5 arquivos,
2 deles vamos criar ainda:
-
src/search/templates/search/view.html (Iremos criar)
-
src/search/views.py
-
src/templates/base/navbar.html
-
search/urls.py
-
src/search/templates/search/snippets/search-form.html (Iremos criar)
O que será feito:
-
Tratar a página que mostra o resultado de uma busca do usuário por um produto no catálogo.
-
Formatar a search bar, transformando ela em um código reutilizável, já que temos duas search.
Primeira coisa, vamos criar uma pasta chamada
templates, dentro de
src/search.
Dentro dela crie as subpastas
search/snippets/ e nela crie o arquivo
search-form.html.
O código do
search-form.html é basicamente o mesmo código do form que tá no
templates/base/navbar.html.
Eu copiei, colei e fiz algumas modificações, mas, para simplificar para vocês, logo aí abaixo, tem o código já com essas modificações.
E no
templates/base/navbar.html, substitua o código do
form, pelo
form criado em
search-form.html com:
{% include 'search/snippets/search-form.html' %}
Mão a obra 🚀
Os arquivos vão ficar assim então:
src/search/templates/search/snippets/search-form.html (Criado nessa aula)
<form method='GET' action='{% url "search:query" %}' class="form my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search" name='q' aria-label="Search" value='{{ request.GET.q }}'>
<span class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</span>
</div>
</form>
src/templates/base/navbar.html
{% url 'home' as home_url %}
{% url 'contact' as contact_url %}
{% url 'products:list' as products_list_url %}
{% url 'login' as login_url %}
{% url 'logout' as logout_url %}
{% url 'register' as register_url %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
<div class='container'>
<a class="navbar-brand" href="{{ home_url }}">
<img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
{% if nome_da_marca %}
{{ nome_da_marca }}
{% else %} Código Fluente eCommerce
{% endif %}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% if request.path == home_url %} active {% endif %}">
<a class="nav-link" href="{{ home_url }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item {% if request.path == contact_url %} active {% endif %}">
<a class="nav-link" href="{{ contact_url }}">Contato</a>
</li>
<li class="nav-item {% if request.path == products_list_url %} active {% endif %}">
<a class="nav-link" href="{{ products_list_url }}">Produtos</a>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item {% if request.path == login_url %} active {% endif %}">
<a class="nav-link" href="{{ logout_url }}">Logout</a>
</li>
{% else %}
<li class="nav-item {% if request.path == login_url %} active {% endif %}">
<a class="nav-link" href="{{ login_url }}">Login</a>
</li>
<li class="nav-item {% if request.path == register %} active {% endif %}">
<a class="nav-link" href="{{ register_url }}">Registrar-se</a>
</li>
{% endif %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
{% include 'search/snippets/search-form.html' %}
</div>
</div><!--fim container-->
</nav>
src/search/views.py
from django.shortcuts import render
from django.views.generic import ListView
from products.models import Product
class SearchProductView(ListView):
template_name = "search/view.html"
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
query = self.request.GET.get('q')
context['query'] = query
#SearchQuery.objects.create(query=query)
return context
def get_queryset(self, *args, **kargs):
request = self.request
print('Solicitação', request)
result = request.GET
print('Resultado: ', result)
query = result.get('q', None) # method['q']
print('Consulta', query)
if query is not None:
return Product.objects.filter(title__contains = query)
return Product.objects.featured()
src/search/templates/search/view.html
{% extends "base.html" %}
{% block content %}
<div class='row mb-3'>
{% if query %}
<div class='col 12'>
Resultado para <b>{{ query }}</b>
<hr />
</div>
{% else %}
<div class='col-12 col-md-8 mx-auto py-5'>
{% include 'search/snippets/search-form.html' %}
</div>
<div class='col-12'>
<hr>
</div>
{% endif %}
</div>
<div class='row'>
{% for obj in object_list %}
<div class='col'>
{% include 'products/snippets/card.html' with instance=obj %}
{% if forloop.counter|divisibleby:3 %}
</div><!--close the row--></div><!--close the col--><div class='row'><div class='col-12'><hr/></div>
{% elif forloop.counter|divisibleby:2 %}
</div><!--close the row--></div><!--close the col--><div class='row'><div class='col-12'><hr/></div>
{% else %}
</div>
{% endif%}
{% endfor%}
</div>
{% endblock content %}
src/search/urls.py
from django.urls import path
app_name = "search"
from .views import (
SearchProductView,
)
urlpatterns = [
path('', SearchProductView.as_view(), name='query'),
]
Veja o resultado:
É isso pessoal, nos vemos na próxima!
Código final da aula:
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
