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

More videos
   

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

Mostrar Query do usuário

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:

  1. src/search/templates/search/view.html (Iremos criar)

  2. src/search/views.py

  3. src/templates/base/navbar.html

  4. search/urls.py

  5. src/search/templates/search/snippets/search-form.html (Iremos criar)

O que será feito:

  1. Tratar a página que mostra o resultado de uma busca do usuário por um produto no catálogo.

  2. 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'),
]

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

 

(Visited 48 times, 1 visits today)
About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>