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

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

Í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:

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

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>

Agora acesse http://127.0.0.1:8000/

Por essa aula é só, nos vemos na próxima. 🙂

Voltar para página principal do blog

Todas as aulas desse curso

Aula 47              Aula 49

Código final da aula:

https://github.com/toticavalcanti

Outros canais

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

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

É isso, ficamos por aqui \o/ e até a próxima 😉

 

 

About The Author
-
Previous

Aula 13 – React – Componentes – Classes – Custom Hooks

Next

Aula 14 – React – Card Grid – Listando os Users

Related Videos

Aula 33 – Loja Online – Django – Search view

Aula 38 – Loja Online – Django – Pesquisa por modelo relacionado

Aula 26 – Loja Online – Django – Tutorial Bootstrap – Linhas e Colunas

Aula 26 – Loja Online – Django – Tutorial Bootstrap – Linhas e Colunas

Aula 78 – Loja Online – Segurança e Organização dos Javascripts

Aula 78 – Loja Online – Segurança e Organização dos Javascripts

Aula 08 – Loja Virtual – Ecommerce – Django – CBVs (Class Based Views) versus FBVs (Function Based Views)

Aula 08 – Loja Virtual – Ecommerce – Django – List View – CBVs – FBVs

Thumb do vídeo

Aula 83 – Loja Online – Adicionando Campo Obrigatório

thumb

Aula 81 – Loja Online – Gerenciador do Modelo User

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>