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&oacute;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'),
]

Aula 34 – Loja Online – Django – Query e Search Bar

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

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.

Mão a obra 🚀

Os arquivos vão ficar assim então:

src/search/templates/search/snippets/search-form.html (Criado nessa aula)

src/templates/base/navbar.html

src/search/views.py

src/search/templates/search/view.html

src/search/urls.py

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

About The Author

Aula 01 – React – Introdução

Aula 02 – React – Passando dados por props

Related Videos

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook