fix scroll up when adding to cart

shop/templates/shop/product_item.html

@@ -9,7 +9,7 @@
         {% else %}
         <div class="no-image">No Image Available</div>
         {% endif %}
-        <form method="post" action="{% url 'shop:add_to_cart' product.id %}" class="add-to-cart-form">
+        <form method="post" action="{% url 'shop:add_to_cart' product.id %}" class="add-to-cart-form" id="cart-form-{{ product.id }}">
             {% csrf_token %}
             <div class="options-container">
                 <div class="option-element product-title">
@@ -71,7 +71,7 @@
                 </div>
                 <div class="option-element total-price form-group"><span id="total-price-{{ product.id }}">{{ product.price }}</span> €</div>
             </div>
-            <button type="submit" class="add-to-cart-button">Ajouter au panier</button>
+            <button type="button" class="add-to-cart-button" onclick="addToCartAjax('{{ product.id }}')">Ajouter au panier</button>
         </form>
     </div>
 </div>
@@ -140,4 +140,76 @@ function selectColor(productId, colorId, colorName, element) {
     }
 }
 
+function addToCartAjax(productId) {
+    // Get the form
+    const form = document.getElementById(`cart-form-${productId}`);
+    const formData = new FormData(form);
+
+    // Add CSRF token
+    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = 'add-to-cart-notification';
+    notification.style.position = 'fixed';
+    notification.style.bottom = '20px';
+    notification.style.right = '20px';
+    notification.style.padding = '20px';
+    notification.style.backgroundColor = '#90ee90';
+    notification.style.color = '#707070';
+    notification.style.borderRadius = '12px';
+    notification.style.zIndex = '9999';
+    notification.style.opacity = '0';
+    notification.style.transition = 'opacity 0.3s';
+
+    // Send AJAX request
+    fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-CSRFToken': csrftoken,
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Show success message
+        notification.textContent = data.message;
+        document.body.appendChild(notification);
+
+        // Update cart total in the navigation
+        const cartTotalElements = document.querySelectorAll('.confirm-nav-button');
+        cartTotalElements.forEach(element => {
+            element.textContent = `Voir mon panier (${data.cart_total} €)`;
+        });
+
+        // Show notification
+        setTimeout(() => { notification.style.opacity = '1'; }, 100);
+
+        // Hide notification after 3 seconds
+        setTimeout(() => {
+            notification.style.opacity = '0';
+            setTimeout(() => {
+                document.body.removeChild(notification);
+            }, 300); // Wait for fade-out animation
+        }, 3000);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        notification.textContent = "Erreur lors de l'ajout au panier";
+        notification.style.backgroundColor = '#F44336';
+        document.body.appendChild(notification);
+
+        // Show notification
+        setTimeout(() => { notification.style.opacity = '1'; }, 100);
+
+        // Hide notification after 3 seconds
+        setTimeout(() => {
+            notification.style.opacity = '0';
+            setTimeout(() => {
+                document.body.removeChild(notification);
+            }, 300); // Wait for fade-out animation
+        }, 3000);
+    });
+}
 </script>

shop/views.py

@@ -123,8 +123,21 @@ def add_to_cart_view(request, product_id):
     size_id = request.POST.get('size')
 
     cart_item = cart.add_to_cart(request, product_id, quantity, color_id, size_id)
-    messages.success(request, f'{cart_item.quantity} x {product.title} added to your cart')
+    message = f'{cart_item.quantity} x {product.title} dans le panier',
+
+    # Check if this is an AJAX request
+    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+        cart_items = cart.get_cart_items(request)
+        total = cart.get_cart_total(request)
+        return JsonResponse({
+            'success': True,
+            'message': message,
+            'cart_total': total,
+            'cart_count': cart_items.count()
+        })
 
+    # For non-AJAX requests, fall back to the original behavior
+    messages.success(request, message)
     return redirect('shop:product_list')
 
 def update_cart_view(request, product_id):