Aula 48 - Loja Online - Django - Ícone do Carrinho no Menu

Nessa aula a gente vai colocar um ícone de carrinho, para que a gente possa acessar ele pelo menu e também para que o usuário possa ver quantos itens diferentes ele colocou no carrinho. Para fazer isso, abra o e_commerce/templates/base/navbar.html e faça as alterações para que o arquivo fique como o mostrado abaixo. Por hora vamos só comentar o dropdown, e colocar o Carrinho acima do dropdown e a url do cart.

e_commerce/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 %}
{% url 'cart:home' as cart_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 {% if request.path == cart_url %} active {% endif %}">
          <a class="nav-link" href="{{ cart_url }}">Carrinho</a>
        </li>
        <!-- <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>

Com o servidor executando acesse http://127.0.0.1:8000/

Veja que agora aparece o Carrinho no menu.

Vamos colocar a quantidade de itens também.

Então, no método cart_update() do e_commerce/carts/views.py vamos inserir a seguinte linha: request.session['cart_items'] = cart_obj.products.count() Com o count, podemo saber quantos itens existe no carrinho.

e_commerce/carts/views.py


from django.shortcuts import render, redirect

from products.models import Product
from .models import Cart

def cart_home(request):
    cart_obj, new_obj  = Cart.objects.new_or_get(request)
    return render(request, "carts/home.html", {"cart": cart_obj})

def cart_update(request):
    print(request.POST)
    product_id = request.POST.get('product_id')
    if product_id is not None:
        try:
            product_obj = Product.objects.get(id = product_id)
        except Product.DoesNotExist:
            print("Mostrar mensagem ao usuário, esse produto acabou!")
            return redirect("cart:home")
        cart_obj, new_obj = Cart.objects.new_or_get(request) 
        if product_obj in cart_obj.products.all(): 
            cart_obj.products.remove(product_obj) 
        else: 
            cart_obj.products.add(product_obj)
        request.session['cart_items'] = cart_obj.products.count()
    return redirect("cart:home")

Agora vamos colocar essa informação ao lado do Carrinho no menu do site com:

{{ request.session.cart_items }}

e_commerce/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 %}
{% url 'cart:home' as cart_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 {% if request.path == cart_url %} active {% endif %}">
          <a class="nav-link" href="{{ cart_url }}">{{ request.session.cart_items }} Carrinho</a>
        </li>
        <!-- <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>

Agora acesse http://127.0.0.1:8000/

Agora temos a quantidade de itens sendo mostrada também.

Ícone do Font Awesome

Para deixar mais bonitinho, ao invés do nome Carrinho no menu, vamos colocar um ícone de carrinho. Iremos usar o Font Awesome Para pegar o link do cdn do Font Awesome acesse: https://www.bootstrapcdn.com/fontawesome/ Copie o link do cdn e cole no e_commerce/templates/base/css.html

e_commerce/templates/base/css.html

{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

Agora no search do Font Awesome digite Cart. Irá aparecer diversas opções, eu vou escolher shopping-cart, daí pe só copiar o ícone: <i class="fas fa-shopping-cart"></i> E substituir pela palavra Carrinho no menu, veja logo abaixo em azul.

e_commerce/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 %}
{% url 'cart:home' as cart_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 {% if request.path == cart_url %} active {% endif %}">
          <a class="nav-link" href="{{ cart_url }}">
            {{ request.session.cart_items }}<i class="fa fa-shopping-cart"></i>
          </a>
        </li>
        <!-- <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>

Aula 48 - Loja Online - Django - Ícone do Carrinho no Menu

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 https://github.com/toticavalcanti.

Código final da aula:

Toti:

Backing track / Play-along:

Código Fluente

Putz!