Aula 21 – Loja Online – Django – Navbar com Bootstrap

Aula 21 – Loja Online – Django – Navbar com Bootstrap

Django Navbar com Bootstrap

Django Navbar com Bootstrap

Voltar para página principal do blog

Todas as aulas desse curso

Aula 20                  Aula 22

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

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/navbar

Django navbar

Atualização do Navbar

Agora é hora de atualizar nosso HTML django_ecommerce/templates/base/navbar.html.

Iremos usar o componente navbar do:

https://getbootstrap.com/docs/4.3/components/navbar/

E colar abaixo do que tem lá atualmente que é o:


<h1>{{ nome_da_marca }}</h1>

Ficando assim o nosso django_ecommerce/templates/base/navbar.html


<h1>{{ nome_da_marca }}</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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 active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Agora vamos modificar ele, eliminando o que tá em vermelho no código acima: o dropdown menu, o class nav-item e o {{ nome_da_marca }} que tá logo no início do código, já que iremos tratar o nome_da_marca através do if else que irá pegar o nome da marca se tiver sido definido em nome_da_marca, e senão, pega um nome padrão.

As alterações estão em laranja no código abaixo.

django_ecommerce/templates/base/navbar.html


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">{% 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 active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contatos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Produtos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Registrar-se</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Agora vamos colocar os links das nossas páginas.

django_ecommerce/templates/base/navbar.html


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="{% url 'home' %}">{% 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 active">
        <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'contact' %}">Contato</a>
      </li>
      <liclass="nav-item">
        <a class="nav-link" href="{% url 'products:list' %}">Produtos</a>
      </li>
      <li class="nav-item"> 
        <a class="nav-link" href="{% url 'login' %}">Login</a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="{% url 'register' %}">Registrar-se</a> 
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Agora acesse: 127.0.0.1:8000/products/

Não funcionou 🙁

Precisamos usar os atalhos para a URLs e pegar a URL via propriedade name, como vimos na aula passada.

Para funcionar, vamos colocar a propriedade name para cada página em:

django_ecommerce/e_commerce/urls.py


from django.conf import settings
from django.conf.urls.static import static

from django.contrib import admin
from django.urls import path, include

from .views import (home_page, 
                    about_page, 
                    contact_page, 
                    login_page, 
                    register_page
)

urlpatterns = [
    path('', home_page, name='home'),
    path('about/', about_page, name='about'),
    path('contact/', contact_page, name='contact'),
    path('login/', login_page, name='login'),
    path('register/', register_page, name='register'),
    path('products/', include("products.urls", namespace="products")),
    path('admin/', admin.site.urls),
]

if settings.DEBUG:
    urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Agora acesse: 127.0.0.1:8000/products/

E agora? Funcionou? 🙁

Ainda não!

Erro:

Reverse for ‘list’ not found. ‘list’ is not a valid view function or pattern name.

Vamos corrigir isso, para isso, abra o arquivo django_ecommerce/products/urls.py e nele coloque o que tá em laranja.


from django.urls import path

app_name = "products"

from .views import (
                        ProductListView, 
                        ProductDetailSlugView,
                    )
urlpatterns = [
    path('', ProductListView.as_view(), name='list'),
    path('/', ProductDetailSlugView.as_view(), name='detail')
]

Agora acesse: 127.0.0.1:8000/products/

Agora sim 🙂

Melhorando a navegabilidade

Precisamos deixar clara a navegação, o Navbar precisa mostrar qual a opção está selecionada.

Vamos fazer isso utilizando o if request.path… para cada url das páginas no HTML do Navbar.

Vamos aproveitar a oportunidade e utilizar variáveis para os: {% url ‘…’ %} criando logo no início do código as linhas:

{% url ‘home’ as home_url %}
{% url ‘contact’ as contact_url %}
{% url ‘products:list’ as products_list_url %}
{% url ‘login’ as login_url %}
{% url ‘register’ as register_url %}

Então vamos lá, modifique o django_ecommerce/templates/base/navbar.html colocando tudo que tá em laranja no código abaixo.

django_ecommerce/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 'register' as register_url %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="{{ home_url }}">{% 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="{{ login_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 %}
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Agora acesse: 127.0.0.1:8000/products/

Acesse em aba anônima também e veja que aparece a opção de registrar-se e login.

É isso, nos vemos na próxima aula.

Aula 20                  Aula 22

Todas as aulas desse curso

Voltar para página principal do blog

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/reverse_url

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

 

About The Author
-

2 Comentários

  • Roni
    Reply

    Parabéns, omitas aulas até aqui tudo funcionando sem erros, aguardando as proximas

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>