Implementando as funcionalidades da pagina basket

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/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!');
-        }
-    });
 });