Merge pull request #161 from velstorelabs/feature/admin-validation-v2

Add wishlist listing page with product view button and dynamic wishli…

Author: imali2

app/Http/Controllers/Store/WishlistController.php

@@ -19,7 +19,7 @@ public function index()
             ->orderBy('wishlists.created_at', 'desc')
             ->get();
 
-        return view('wishlist.index', compact('products'));
+        return view('themes.xylo.wishlist', compact('products'));
     }
 
     public function toggle(Request $request)

resources/views/themes/xylo/layouts/header.blade.php

@@ -70,7 +70,7 @@
                 </form>
 
                 <!-- Wishlist Icon -->
-                <a href="{{ auth()->check() ? route('customer.wishlist.index') : route('customer.login') }}" class="text-dark homepage-icon">
+                <a href="{{ auth('customer')->check() ? route('customer.wishlist.index') : route('customer.login') }}" class="text-dark homepage-icon">
                     <i class="fa-regular fa-heart"></i>
                 </a>
 

resources/views/themes/xylo/wishlist.blade.php

@@ -1,26 +1,87 @@
 @extends('themes.xylo.layouts.master')
 
 @section('content')
-    <div class="container">
-        <h2>Your Wishlist</h2>
-
-        @if($products->isEmpty())
-            <p>You have no items in your wishlist.</p>
-        @else
-            <div class="row">
-                @foreach($products as $product)
-                    <div class="col-md-3">
-                        <div class="card mb-4">
-                            <img src="{{ $product->thumbnail->url ?? '/images/default.png' }}" class="card-img-top" alt="{{ $product->translation->name ?? 'Product' }}">
-                            <div class="card-body">
-                                <h5 class="card-title">{{ $product->translation->name ?? 'Unnamed Product' }}</h5>
-                                <p class="card-text">Reviews: {{ $product->reviews_count }}</p>
-                                {{-- Add more product info here --}}
+@php $currency = activeCurrency(); @endphp
+
+<div class="container py-5">
+    <h1 class="sec-heading mb-5">My Wishlist</h1>
+
+    @if($products->isEmpty())
+        <div class="alert alert-info">Your wishlist is empty.</div>
+    @else
+        <div class="row">
+            @foreach ($products as $product)
+                <div class="col-md-3 mb-4">
+                    <div class="product-card">
+
+                        <div class="product-img position-relative">
+                            <img src="{{ Storage::url(optional($product->thumbnail)->image_url ?? 'default.jpg') }}"
+                                 alt="{{ $product->translation->name }}" style="object-fit: contain; width: 100%; height: 250px;">
+
+                            <!-- Same wishlist heart like homepage -->
+                            <button class="wishlist-btn border-0 bg-transparent"
+                                    data-product-id="{{ $product->id }}">
+                                <i class="fa-solid fa-heart text-danger"></i>
+                            </button>
+                        </div>
+
+                        <div class="product-info mt-4">
+                            <div class="top-info">
+                                <div class="reviews">
+                                    <i class="fa-solid fa-star"></i> ({{ $product->reviews_count }} Reviews)
+                                </div>
+                            </div>
+
+                            <div class="bottom-info">
+                                <div class="left">
+                                    <h3>
+                                        <a href="{{ route('product.show', $product->slug) }}" class="product-title">
+                                            {{ $product->translation->name }}
+                                        </a>
+                                    </h3>
+
+                                    <p class="price">
+                                        <span class="original {{ optional($product->primaryVariant)->converted_discount_price ? 'has-discount' : '' }}">
+                                            {{ $currency->symbol }}{{ optional($product->primaryVariant)->converted_price ?? 'N/A' }}
+                                        </span>
+
+                                        @if(optional($product->primaryVariant)->converted_discount_price)
+                                            <span class="discount"> 
+                                                {{ $currency->symbol }}{{ $product->primaryVariant->converted_discount_price }}
+                                            </span>
+                                        @endif
+                                    </p>
+                                </div>
+
+                                <!--  Same Add to Cart button -->
+                                <button class="cart-btn" onclick="addToCart({{ $product->id }})">
+                                    <i class="fa fa-shopping-bag"></i>
+                                </button>
                             </div>
                         </div>
+
                     </div>
-                @endforeach
-            </div>
-        @endif
-    </div>
+                </div>
+            @endforeach
+        </div>
+    @endif
+</div>
+@endsection
+
+@section('js')
+<script>
+$(document).on('click', '.wishlist-btn', function () {
+    let button = $(this);
+    let productId = button.data('product-id');
+
+    $.post('{{ route("customer.wishlist.toggle") }}', {
+        _token: '{{ csrf_token() }}',
+        product_id: productId
+    }, function(res) {
+        if (res.status === 'removed') {
+            button.closest('.col-md-3').fadeOut();
+        }
+    });
+});
+</script>
 @endsection