Add dynamic wishlist toggle with real-time heart icon update and data…

app/Http/Controllers/Store/WishlistController.php

@@ -3,7 +3,6 @@
 namespace App\Http\Controllers\Store;
 
 use App\Http\Controllers\Controller;
-use App\Models\Product;
 use App\Models\Wishlist;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -12,9 +11,9 @@ class WishlistController extends Controller
 {
     public function index()
     {
-        $user = Auth::user();
+        $customer = Auth::guard('customer')->user();
 
-        $products = $user->wishlistProducts()
+        $products = $customer->wishlistProducts()
             ->with(['translation', 'thumbnail', 'primaryVariant', 'reviews'])
             ->withCount('reviews')
             ->orderBy('wishlists.created_at', 'desc')
@@ -23,28 +22,29 @@ public function index()
         return view('wishlist.index', compact('products'));
     }
 
-    public function store(Request $request)
+    public function toggle(Request $request)
     {
         $request->validate([
             'product_id' => 'required|exists:products,id',
         ]);
 
-        $customer = auth('customer')->user();
+        $customer = Auth::guard('customer')->user();
 
-        // Check if product already in wishlist
-        $exists = Wishlist::where('customer_id', $customer->id)
+        $wishlist = Wishlist::where('customer_id', $customer->id)
             ->where('product_id', $request->product_id)
-            ->exists();
+            ->first();
 
-        if ($exists) {
-            return response()->json(['message' => 'Already in wishlist'], 200);
+        if ($wishlist) {
+            $wishlist->delete();
+
+            return response()->json(['status' => 'removed', 'message' => 'Removed from favorites']);
         }
 
         Wishlist::create([
             'customer_id' => $customer->id,
             'product_id' => $request->product_id,
         ]);
 
-        return response()->json(['message' => 'Added to wishlist'], 200);
+        return response()->json(['status' => 'added', 'message' => 'Added to favorites']);
     }
 }

app/Models/Customer.php

@@ -36,7 +36,8 @@ public function wishlists()
 
     public function wishlistProducts()
     {
-        return $this->belongsToMany(Product::class, 'wishlists');
+        return $this->belongsToMany(Product::class, 'wishlists', 'customer_id', 'product_id')
+            ->withTimestamps();
     }
 
     public function reviews()

resources/views/themes/xylo/product-detail.blade.php

@@ -53,7 +53,28 @@
                     @endfor
                     <span class="spanstar"> ({{ $product->reviews_count }} {{ __('store.product_detail.customer_reviews') }})</span>
                 </div>
-                <h1 class="sec-heading">{{ $product->translation->name }}</h1>
+                <div class="d-flex align-items-center mb-3">
+                <h1 class="sec-heading mb-0 me-3">{{ $product->translation->name }}</h1>
+
+                @auth('customer')
+                @php
+                    $isFavorite = auth('customer')->user()
+                        ->wishlistProducts()
+                        ->where('product_id', $product->id)
+                        ->exists();
+                @endphp
+                @else
+                    @php
+                        $isFavorite = false; 
+                    @endphp
+                @endauth
+
+                <button id="test-heart" class="border-0 bg-transparent">
+                    <i class="{{ $isFavorite ? 'fa-solid fa-heart text-danger' : 'fa-regular fa-heart text-secondary' }} fs-4"></i>
+                </button>
+
+            </div>
+
                 <h2><span id="currency-symbol">{{ $currency->symbol }}</span><span  id="variant-price" >{{ $product->primaryVariant->converted_price ?? 'N/A' }}</span></h2>
                 <p>{{ $product->translation->short_description }}</p>
 
@@ -206,6 +227,42 @@ class="{{ strtolower($values->first()->attribute->name) === 'color' ? 'color-cir
 @endsection
 
 @section('js')
+    <script>
+    $(document).ready(function() {
+        $('#test-heart').on('click', function() {
+            var button = $(this);          
+            var icon = button.find('i');   
+            var productId = {{ $product->id }}; 
+            $.ajax({
+                url: '{{ route("customer.wishlist.toggle") }}',
+                method: 'POST',
+                data: {
+                    _token: '{{ csrf_token() }}',
+                    product_id: productId
+                },
+                success: function(response) {
+                    if(response.status === 'added') {
+                        icon.removeClass('fa-regular text-secondary')
+                            .addClass('fa-solid text-danger');
+                        toastr.success(response.message || 'Added to favorites ❤️');
+                    } else if(response.status === 'removed') {
+                        icon.removeClass('fa-solid text-danger')
+                            .addClass('fa-regular text-secondary');
+                        toastr.info(response.message || 'Removed from favorites 💔');
+                    }
+                },
+                error: function(xhr) {
+                    if(xhr.status === 401){
+                        toastr.warning('Please login to manage your favorites.');
+                    } else {
+                        toastr.error('Something went wrong.');
+                    }
+                }
+            });
+        });
+    });
+    </script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>  
     <script>
         $(document).ready(function() {

routes/store.php

@@ -64,6 +64,7 @@
 
     // Authenticated routes
     Route::middleware('auth.customer')->group(function () {
+        Route::post('/wishlist/toggle', [WishlistController::class, 'toggle'])->name('wishlist.toggle');
         Route::post('logout', [LoginController::class, 'logout'])->name('logout');
         Route::post('/wishlist', [WishlistController::class, 'store'])->name('wishlist.store');
         Route::get('/wishlist', [WishlistController::class, 'index'])->name('wishlist.index');