Used AJAX for the add to cart.

Author: Mz-scripter

core/templates/core/index.html

@@ -19,38 +19,33 @@
             <h2 class="text-lg font-bold text-[#050a30] truncate">{{ item.name }}</h2>
             <div class="flex justify-between items-center mt-3">
                 <!-- Add to Cart Button -->
-                 <button class="px-4 py-2 bg-[#cae8ff] text-[#050a30] font-semibold rounded-md hover:bg-[#b6e0ff] focus:outline-none">
-                    <a href="{% url 'add_to_cart' item.id %}">
-                        Add to Cart
-                    </a>
+                 <button class="add-to-cart-btn px-4 py-2 bg-[#cae8ff] text-[#050a30] font-semibold rounded-md hover:bg-[#b6e0ff] focus:outline-none" data-item-id="{{ item.id }}">
+                    Add to Cart
                  </button>
 
                  <!-- Add Wishlist Button -->
                 {% if request.user.is_authenticated %}
-                {% if item.id not in user_wishlist %}
-                <a href="{% url 'toggle_wishlist' item.id %}">
                     <button
-                        class="px-2 py-2 bg-[#050a30] text-white rounded-full hover:bg-blue-600 focus:outline-none"
-                        title="Add to Wishlist">
+                        class="add-to-wishlist-btn px-2 py-2 bg-[#050a30] text-white rounded-full hover:bg-blue-600 focus:outline-none"
+                        title="{% if item.id in user_wishlist %}Remove from Wishlist{% else %}Add to Wishlist{% endif %}"
+                        data-item-id="{{ item.id }}">
 
+                        {% if item.id in user_wishlist %}
+                            <!-- Filled heart if already in wishlist -->
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="#f00" viewBox="0 0 24 24" stroke="currentColor">
+                                <path d="M12.1 21.35c-.33.11-.71.11-1.04 0C7.07 19.75 2 15.42 2 10.34A6.34 6.34 0 016.34 4c2.09 0 4.22 1.03 5.66 2.55C13.44 5.03 15.57 4 17.66 4A6.34 6.34 0 0122 10.34c0 5.08-5.07 9.41-8.94 10.99z"></path>
+                            </svg>
+                        {% else %}
+                            <!-- Empty heart if not in wishlist -->
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z" />
                             </svg>
+                        {% endif %}
                     </button>
-                </a>
-                {% else %}
-                <a href="{% url 'toggle_wishlist' item.id %}">
-                    <button
-                        class="px-2 py-2 bg-[#050a30] text-white rounded-full hover:bg-blue-600 focus:outline-none"
-                        title="Remove from Wishlist">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="#f00" viewBox="0 0 24 24" stroke="currentColor">
-                                <path d="M12.1 21.35c-.33.11-.71.11-1.04 0C7.07 19.75 2 15.42 2 10.34A6.34 6.34 0 016.34 4c2.09 0 4.22 1.03 5.66 2.55C13.44 5.03 15.57 4 17.66 4A6.34 6.34 0 0122 10.34c0 5.08-5.07 9.41-8.94 10.99z"></path>
-                            </svg>
-                    </button>
-                </a>
-                {% endif %}
+                    {% else %}
                 {% endif %}
+
             </div>
          </div>
      </div>

core/templates/core/main.html

@@ -9,6 +9,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{% static 'css/tailwind_output.css' %}">
     <link rel="icon" type="image/jpg" href="{% static 'images/logo.png' %}">
+
+    <meta name="csrf-token" content="{{ csrf_token }}">
+
     <title>Convenience Delivered, Every Time | QuickDash</title>
 </head>
 <body class="bg-[#cae8ff] text-black relative">
@@ -80,13 +83,15 @@
 
                 <a href="{% url 'profile' %}" class="hidden lg:block px-4 py-2 text-gray-700 hover:scale-105 hover:shadow-md cursor-pointer transition-all duration-200 ease-in-out">Profile</a>
                 {% if request.user.is_authenticated %}
-                <a href="{% url 'logout' %}" class="hidden lg:block px-4 py-2 text-gray-700 hover:scale-105 hover:shadow-md cursor-pointer transition-all duration-200 ease-in-out">Logout</a>
+                <a href="{% url 'logout' %}" class="block px-4 py-2 text-gray-700 hover:scale-105 hover:shadow-md cursor-pointer transition-all duration-200 ease-in-out">Logout</a>
 
                 {% else %}
-                <a href="{% url 'login' %}" class="hidden lg:block px-4 py-2 text-gray-700 hover:scale-105 hover:shadow-md cursor-pointer transition-all duration-200 ease-in-out">Login</a>
+                <a href="{% url 'login' %}" class="block px-4 py-2 text-gray-700 hover:scale-105 hover:shadow-md cursor-pointer transition-all duration-200 ease-in-out">Login</a>
                 {% endif %}
             </div>
         </div>
+
+        
      </header>
 
      <!-- Floating Contact Icon -->
@@ -104,7 +109,7 @@
         <a href="{% url 'cart' %}" class="flex flex-col items-center space-y-1 relative">
             <img src="{% static 'images/cart.svg' %}" alt="Cart" class="h-6 w-6">
             {% if request.user.is_authenticated %}
-            <span class="absolute -top-3.5 left-4 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ total_items }}</span>
+            <span id="cart-count" class="absolute -top-3.5 left-4 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ total_items }}</span>
             {% endif %}
             <span class="text-xs">Cart</span>
         </a>
@@ -127,6 +132,8 @@
 
 
 </body>
+<script src="{% static 'js/cart.js' %}"></script>
+<script src="{% static 'js/wishlist.js' %}"></script>
 <script>
     const searchBar = document.getElementById("search-bar");
 

core/views.py

@@ -14,7 +14,7 @@ def homePage(request):
     items = Item.objects.filter(
         Q(name__icontains=query) |
         Q(description__icontains=query)
-    )
+    ).order_by('-date_added')
 
 
     if restaurant_filter:

db.sqlite3

@@ -3,7 +3,8 @@
 
 
 urlpatterns = [
-    path('add-to-cart/<int:item_id>/', views.add_to_cart, name='add_to_cart'),
+    path('ajax/add-to-cart', views.ajax_add_to_cart, name='ajax_add_to_cart'),
+
     path('cart/', views.cartPage, name='cart'),
 
     path('cart/remove/<int:item_id>/', views.remove_from_cart, name='remove_from_cart'),
@@ -15,7 +16,8 @@
     path('add-restaurant/', views.add_restaurant, name='add_restaurant'),
 
     path('wishlist/', views.wishlist, name='wishlist'),
-    path('wishlist/toggle/<int:item_id>/', views.toggle_wishlist, name='toggle_wishlist'),
+
+    path('ajax/add-to-wishlist/', views.ajax_add_to_wishlist, name='ajax_add_to_wishlist'),
 
     path('checkout/', views.checkout, name='checkout'),
 

orders/urls.py

@@ -11,15 +11,24 @@
 from django.db.models import Sum
 
 
-
 @login_required(login_url='login')
-def add_to_cart(request, item_id):
-    item = get_object_or_404(Item, id=item_id)
-    cart_item, created = CartItem.objects.get_or_create(user=request.user, item=item)
-    if not created:
-        cart_item.quantity += 1
-    cart_item.save()
-    return redirect('home')
+def ajax_add_to_cart(request):
+    if request.method == 'POST':
+        item_id = request.POST.get('item_id')
+        item = get_object_or_404(Item, id=item_id)
+
+        # Get or create the cart item
+        cart_item, created = CartItem.objects.get_or_create(user=request.user, item=item)
+
+        if not created:
+            cart_item.quantity += 1
+            cart_item.save()
+
+        # Get updated cart total
+        total_items = sum(item.quantity for item in CartItem.objects.filter(user=request.user))
+
+        return JsonResponse({'status': 'success', 'total_items': total_items})
+    return JsonResponse({'status': 'error', 'message': 'Invalid Request'})
 
 @login_required(login_url='login')
 def cartPage(request):
@@ -109,6 +118,25 @@ def wishlist(request):
     wishlist_items = WishListItem.objects.filter(user=request.user).select_related('item')
     return render(request, 'orders/wishlist.html', {'wishlist_items': wishlist_items})
 
+@login_required(login_url='login')
+def ajax_add_to_wishlist(request):
+    if request.method == 'POST':
+        item_id = request.POST.get('item_id')
+        item = get_object_or_404(Item, id=item_id)
+
+        # Check if the item is already in the wishlist
+        wishlist_item, created = WishListItem.objects.get_or_create(user=request.user, item=item)
+
+        if not created:
+            wishlist_item.delete()
+            status = 'removed'
+        else:
+            wishlist_item.save()
+            status = 'added'
+        
+        return JsonResponse({'status': status})
+    return JsonResponse({'status': 'error', 'message': 'Invalid Request'})
+
 @login_required(login_url='login')
 def checkout(request):
     cart_items = get_user_cart(request.user)

orders/views.py

@@ -0,0 +1,3 @@
+@tailwind base
+@tailwind components
+@tailwind utilities