Aula 21 – Loja Online – 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. 😉