Estilização no popup e Funcionalidade para a página do carrinho

app/loja/templates/base.html

@@ -30,7 +30,7 @@
                 </lord-icon>
             </a>
             <div id="user-popup" class="popup hidden" data-is-superuser="{{ user.is_superuser }}">
-                <p>Olá, {{ user.first_name }}</p>
+                <p>Olá, {{ user.username }}</p>
                 <a id="edit-profile-link" href="#">Perfil</a><br>
                 <a href="{% url 'logout' %}">Logout</a>
             </div>

app/loja/templates/basket.html

@@ -1,68 +1,51 @@
 {% extends 'base.html' %}
-    
+
 {% load static %}
-
+
+{% csrf_token %}
+
 {% block extra_css %}
     <link rel="stylesheet" href="{% static 'css/basket.css' %}">
 {% endblock %}
 
 {% block content %}
 <div class="container">
-
     <!-- Itens Selecionados -->
     <div class="items">
-        <h1 class="items-title">Carrinho de Compras</h1> <!-- Mover o título para dentro da div items -->
+        <h1 class="items-title">Carrinho de Compras</h1>
 
         <h2>Itens Selecionados</h2>
 
         <div class="item-header">
             <span>Imagem</span>
             <span>Bolo</span>
-            <span>Descrição</span> <!-- Nova coluna para descrição -->
+            <span>Descrição</span>
             <span>Quantidade</span>
             <span>Tamanho</span>
             <span>Preço</span>
         </div>
-
-        <div class="item">
-            <img class="bolo-cenoura-img" src="https://i.pinimg.com/736x/86/36/05/863605eadbfc00ef756820c8ab473f60.jpg" alt="Bolo de Cenoura com Chocolate">
-            <div class="item-details">
-                <span class="item-name">Bolo de Cenoura</span>
-                <span class="item-description">Delicioso bolo de cenoura com cobertura de chocolate.</span> <!-- Descrição do item -->
-                <span class="item-quantity">2</span>
-                <span class="item-size">Médio</span>
-                <span class="item-price">R$ 30,00</span>
-            </div>
-        </div>
-
-        <div class="item">
-            <img src="https://i.pinimg.com/564x/89/6d/3f/896d3f64085d7bc6535ef13c10fbdcaf.jpg" alt="Morango dos Deuses">
-            <div class="item-details">
-                <span class="item-name">Morango dos Deuses</span>
-                <span class="item-description">Bolo de morango fresco com creme de baunilha.</span> <!-- Descrição do item -->
-                <span class="item-quantity">1</span>
-                <span class="item-size">Grande</span>
-                <span class="item-price">R$ 70,00</span>
-            </div>
-        </div>
 
-    <!-- Resumo da Compra -->
-    <div class="summary">
-        <h2>Resumo do Pedido</h2>
-        <div class="summary-item">
-            <span class="item-name">Total de Itens:</span>
-            <span class="item-value" id="total-itens">3</span>
-        </div>
+        <!-- Os itens do carrinho serão injetados aqui pelo JavaScript -->
+        <div id="carrinho-itens"></div>
+
+        <!-- Resumo da Compra -->
+        <div class="summary">
+            <h2>Resumo do Pedido</h2>
+            <div class="summary-item">
+                <span class="item-name">Total de Itens:</span>
+                <span class="item-value" id="total-itens">0</span>
+            </div>
 
-        <div class="summary-item">
-            <span class="item-name total">Total:</span>
-            <span class="item-value total" id="total">R$ 110,00</span>
+            <div class="summary-item">
+                <span class="item-name total">Total:</span>
+                <span class="item-value total" id="total">R$ 0,00</span>
+            </div>
+            <button id="finalizar-compra" class="checkout-btn">Finalizar Pedido</button>
         </div>
-        <button class="checkout-btn">Finalizar Pedido</button>
     </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
-
+    <script src="{% static 'js/basket.js' %}"></script>
 {% endblock %}

app/loja/templates/catalogo.html

@@ -49,7 +49,7 @@ <h3>Tamanhos:</h3>
     </div>
 </aside>
    <!-- Conteúdo do Catálogo -->
-   <div id="catalogo">
+<div id="catalogo">
     <section class="categoria">
         <div class="card-container">
             <div class="card-row">
@@ -77,7 +77,9 @@ <h3>{{ bolo.sabor }}</h3>
        <h2>Carrinho de Compras</h2>
        <div id="carrinho-itens"></div>
        <p>Total: <span id="total">R$ 0,00</span></p>
-       <button id="finalizar-compra">Finalizar Compra</button>
+       <a href="{% url 'basket' %}" style="text-decoration: none;">
+        <button id="finalizar-compra">Visualizar Carrinho</button>
+       </a>
    </aside>
 </div>
 {% endblock %}

app/loja/views.py

@@ -88,7 +88,17 @@ def adicionar_ao_carrinho(request):
 @login_required
 def obter_carrinho(request):
     profile = Profile.objects.get(user=request.user)
-    carrinho = profile.listar_carrinho()
+    carrinho = []
+    for item in profile.listar_carrinho():
+        bolo = Bolo.objects.get(id=item['bolo_id'])
+        carrinho.append({
+            'bolo_nome': bolo.sabor,
+            'descricao': bolo.descricao,
+            'imagem_url': bolo.imagem_url,
+            'tamanho': item['tamanho'],
+            'preco': item['preco'],
+            'quantidade': item['quantidade']
+        })
     total = profile.obter_valor_total()
     return JsonResponse({'carrinho': carrinho, 'total': str(total)})
 

app/static/css/base.css

@@ -170,12 +170,22 @@ header {
 #user-popup {
 	position: absolute; /* Posiciona o popup em relação ao ícone */
     top: 100%; /* Coloca o popup imediatamente abaixo do ícone */
-    left: 0; /* Alinha o popup à esquerda do ícone */
-    margin-top: 5px; /* Espaçamento entre o ícone e o popup */
+    left: 50%; /* Alinha o popup à esquerda do ícone */
+    margin-top: 16px; /* Espaçamento entre o ícone e o popup */
     display: none; /* Inicialmente escondido */
     background-color: white; /* Cor de fundo do popup */
     border: 1px solid #ccc; /* Borda do popup */
-    padding: 10px; /* Espaçamento interno do popup */
+    padding: 15px; /* Espaçamento interno do popup */
     box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Sombra para dar destaque */
     z-index: 1000; /* Garante que o popup esteja acima de outros elementos */
+	border-radius: 5px;
+}
+
+#user-popup * {
+	text-decoration: none;
+	font-size: 16px;
+}
+
+#edit-profile-link{
+	margin-bottom: 10px;
 }

app/static/js/basket.js

@@ -0,0 +1,76 @@
+document.addEventListener('DOMContentLoaded', function () {
+    function atualizarCarrinho() {
+        fetch('/obter_carrinho/')
+            .then(response => response.json())
+            .then(data => {
+                const carrinhoItens = document.getElementById('carrinho-itens');
+                const totalElem = document.getElementById('total');
+                const totalItensElem = document.getElementById('total-itens');
+                const total = parseFloat(data.total);
+
+                carrinhoItens.innerHTML = '';
+                let totalItens = 0;
+
+                data.carrinho.forEach(item => {
+                    const bolo = document.createElement('div');
+                    bolo.classList.add('item');
+
+                    bolo.innerHTML = `
+                        <img src="${item.imagem_url}" alt="${item.bolo_nome}">
+                        <div class="item-details">
+                            <span class="item-name">${item.bolo_nome}</span>
+                            <span class="item-description">${item.descricao}</span>
+                            <span class="item-quantity">${item.quantidade}</span>
+                            <span class="item-size">${item.tamanho}</span>
+                            <span class="item-price">R$ ${item.preco.toFixed(2)}</span>
+                        </div>
+                    `;
+
+                    carrinhoItens.appendChild(bolo);
+                    totalItens += item.quantidade;
+                });
+
+                totalElem.textContent = `R$ ${total.toFixed(2)}`;
+                totalItensElem.textContent = totalItens;
+            })
+            .catch(error => console.error('Erro ao carregar o carrinho:', error));
+    }
+
+    // Atualiza o carrinho quando a página é carregada
+    atualizarCarrinho();
+
+    // Função para finalizar o pedido
+    const finalizarCompraBtn = document.getElementById('finalizar-compra');
+    finalizarCompraBtn.addEventListener('click', function () {
+        fetch('/finalizar_compra/', {
+            method: 'POST',
+            headers: {
+                'X-CSRFToken': getCSRFToken(),  // Função para obter o CSRF token
+                'Content-Type': 'application/json'
+            },
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert('Pedido finalizado com sucesso!');
+                window.location.reload();  // Recarrega a página
+            } else {
+                alert('Erro ao finalizar o pedido.');
+            }
+        })
+        .catch(error => console.error('Erro ao finalizar o pedido:', error));
+    });
+
+    // Função para obter o CSRF token
+    function getCSRFToken() {
+        let csrfToken = null;
+        const cookies = document.cookie.split(';');
+        cookies.forEach(cookie => {
+            const [name, value] = cookie.trim().split('=');
+            if (name === 'csrftoken') {
+                csrfToken = value;
+            }
+        });
+        return csrfToken;
+    }
+});

app/static/js/catalogo.js

@@ -78,29 +78,4 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         });
     });
-
-    // Finalizar compra
-    const finalizarCompraBtn = document.getElementById('finalizar-compra');
-    finalizarCompraBtn.addEventListener('click', function () {
-        const totalElem = document.getElementById('total');
-        const carrinhoItens = document.getElementById('carrinho-itens');
-
-        if (parseFloat(totalElem.textContent.replace('R$ ', '')) > 0) {
-            alert('Compra finalizada!');
-            fetch('/finalizar_compra/', {
-                method: 'POST',
-                headers: {
-                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
-                }
-            }).then(() => {
-                // Limpa o conteúdo do carrinho na interface
-                carrinhoItens.innerHTML = '';
-                totalElem.textContent = 'R$ 0,00';
-            }).catch(error => {
-                console.error('Erro ao limpar o carrinho:', error);
-            });
-        } else {
-            alert('O carrinho está vazio!');
-        }
-    });
 });