Aula 34 – Loja Online – Django – Query e Search Bar
Aula 34 – Loja Online – Django – Query do usuário no Search bar

Mostrar Query do usuário
Voltar para página principal do blog
Todas as aulas desse curso
Aula 33 Aula 35
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:
Hostinger
Digital Ocean
One.com
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:
https://github.com/toticavalcanti/django_ecommerce/tree/display_user_query
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:
http://127.0.0.1:8000/search
É isso pessoal, nos vemos na próxima!
Aula 33 Aula 35
Todas as aulas desse curso
Voltar para página principal do blog
Código final da aula:
https://github.com/toticavalcanti/django_ecommerce/tree/display_user_query
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:
Hostinger
Digital Ocean
One.com
Obrigado, até a próxima e bons estudos. 😉