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

Ícone do carrinho no menu

Voltar para página principal do blog

Todas as aulas desse curso

Aula 47               Aula 49

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

https://digitalinnovation.one/

Participe de comunidades de desenvolvedores:

• https://impulser.me/

• https://developers.google.com/community/gdg

• https://comunidades.tech/

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no https://github.com/toticavalcanti.

Código final da aula:

https://github.com/toticavalcanti

Toti:

https://www.youtube.com/channel/UCUEtjLuDpcOvR3mIUr-viOA

Backing track / Play-along:

https://www.youtube.com/channel/UCT3TryVMqTqYBjf5g5WAHfA

Código Fluente

https://www.youtube.com/channel/UCgn-O-88XBAwdG9gUWkkb0w

Putz!

https://www.youtube.com/channel/UCZXop2-CECwyFYmHbhnAkAw

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"/>

{% 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>