filter with ajax

app/Http/Controllers/ProductController.php

@@ -66,6 +66,7 @@ class ProductController extends Controller
         $page = $request->page ?? 1;
 
         $search = $request->search;
+
         $filter = $request->filter ?? [];
         $sortBy = $request->sort_by ?? 'relevance';
 
@@ -102,14 +103,22 @@ class ProductController extends Controller
             'price_range_end' => $price_range_end,
         ]);
 
+        // Check if there are more products
+        $hasMore = count($products) >= $limit;
+
         // Render product cards HTML
         $productHtml = '';
+        if (count($products) == 0) {
+            $productHtml = '<div class="col-12">';
+            $productHtml .= 'Pencarian tidak ditemukan';
+            $productHtml .= '</div>';
+        } else {
             foreach ($products as $product) {
                 $productHtml .= '<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">';
                 $productHtml .= view('components.home.product-card', ['product' => $product])->render();
                 $productHtml .= '</div>';
             }
-
+        }
 
         // filter
         $filter = $request->filter ?? [];
@@ -123,7 +132,6 @@ class ProductController extends Controller
             }
         }
 
-
         if (isset($filter['gender']) && $filter['gender']) {
             $gender = Gender::find($filter['gender']);
 
@@ -141,13 +149,13 @@ class ProductController extends Controller
             'filters' => $filters,
             'products' => $productHtml,
             'count' => count($products),
-            'has_more' => count($products) >= $limit
+            'has_more' => $hasMore,
+            'current_page' => $page
         ]);
     }
+
     public function index(Request $request)
     {
-       
-
         $productRepository = new ProductRepository;
         $products = [];
 

app/Repositories/Catalog/ProductRepository.php

@@ -6,78 +6,52 @@ use App\Models\DiscountItem;
 use App\Models\Items;
 use App\Models\StoreCategoryMap;
 use Illuminate\Support\Facades\DB;
-use Carbon\Carbon;
+use Illuminate\Support\Facades\Log;
 
 class ProductRepository
 {
     public function getList($params)
     {
-        $event = @$params["event"];
+        $event = @$params['event'];
-        $sort = @$params["sort"];
+        $sort = @$params['sort'];
-        $search = @$params["search"];
+        $search = @$params['search'];
-        $category_id = @$params["category_id"];
+        $category_id = @$params['category_id'];
-        $brand_id = @$params["brand_id"];
+        $brand_id = @$params['brand_id'];
-        $gender_id = @$params["gender_id"];
+        $gender_id = @$params['gender_id'];
-        $limit = @$params["limit"];
+        $limit = @$params['limit'];
 
-        $location_id = @$params["location_id"];
+        $location_id = @$params['location_id'];
-        $is_consignment = @$params["is_consignment"];
+        $is_consignment = @$params['is_consignment'];
-
-        $price_range_start = @$params["price_range_start"];
-        $price_range_end = @$params["price_range_end"];
 
+        $price_range_start = @$params['price_range_start'];
+        $price_range_end = @$params['price_range_end'];
 
         $sorting_ids = [];
-        if ($sort == "price_low_to_high" || $sort == "price_high_to_low"){
-            $sorting_ids = DiscountItem::whereHas('discount', function($query) use ($location_id, $is_consignment) {
-                $query->where('type', 'price')
-                    ->where(function ($query) {
-                        $query->where('valid_at', '<=', now())
-                            ->orWhereNull('valid_at');
-                    })
-                    ->where(function ($query) {
-                        $query->where('expired_at', '>', now())
-                            ->orWhereNull('expired_at');
-                    })
-                    ->where(function ($query) use ($location_id, $is_consignment) {
-                        if (! $is_consignment) {
-                            $query->whereNull('discounts.location_id');
-                        }
 
-                        if ($location_id) {
+        if ($sort == 'price_low_to_high' || $sort == 'price_high_to_low') {
-                            $query->orWhere('discounts.location_id', $location_id);
+            $params_filter = [];
-                        }
+            $params_filter['location_id'] = $location_id;
-                    });
+            $params_filter['sort'] = $sort;
-            })
+            $sorting_ids = collect($this->getProductList($params_filter))->pluck('id')->toArray();
-            ->orderBy('discount_items.price', $sort == "price_low_to_high" ? 'asc' : 'desc')
+
-            ->pluck('item_reference_id')->toArray();
+            // Log::info($sorting_ids);
         }
 
         $where_ids = [];
         if ($price_range_start && $price_range_end) {
-            $where_ids = DiscountItem::whereHas('discount', function($query) use ($location_id, $is_consignment, $price_range_start, $price_range_end) {
+            $params_filter = [];
-                $query->where('type', 'price')
+            $params_filter['location_id'] = $location_id;
-                    ->where(function ($query) {
+            $params_filter['price_range_start'] = $price_range_start;
-                        $query->where('valid_at', '<=', now())
+            $params_filter['price_range_end'] = $price_range_end;
-                            ->orWhereNull('valid_at');
+
-                    })
+            $where_ids = collect($this->getProductList($params_filter))->pluck('id')->toArray();
-                    ->where(function ($query) {
+
-                        $query->where('expired_at', '>', now())
+            if (! empty($sorting_ids) && count($sorting_ids) > 0) {
-                            ->orWhereNull('expired_at');
+                $where_ids = array_values(
-                    })
+                    array_intersect($sorting_ids, $where_ids)
-                    ->where(function ($query) use ($location_id, $is_consignment) {
+                );
-                        if (! $is_consignment) {
-                            $query->whereNull('discounts.location_id');
             }
 
-                        if ($location_id) {
-                            $query->orWhere('discounts.location_id', $location_id);
-                        }
-                    })
-                    ->where('discount_items.price', '>=', $price_range_start)
-                    ->where('discount_items.price', '<=', $price_range_end);
-            })
-            ->pluck('item_reference_id')->toArray();
         }
 
         $builder = Items::select('items.*', 'percent')
@@ -91,32 +65,38 @@ class ProductRepository
                 ( discounts.valid_at is null or discounts.valid_at <= now()) and
                 ( discounts.valid_at is null or discounts.expired_at >= now())
             order by item_id, discounts.created_at desc
-                ) as d"),"d.item_id","=","items.id")
+                ) as d"), 'd.item_id', '=', 'items.id')
             ->when(true, function ($query) use ($event, $sort, $sorting_ids) {
                 if ($event) {
                     $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
 
-                $query->orderBy("percent", "desc");
+                    $query->orderBy('percent', 'desc');
                 } else {
 
-            /* if ($event == "special-offer"){
+                    if (! empty($sorting_ids) && count($sorting_ids) > 0) {
-            $query->orderByRaw("case when brand = 'CHAMELO' then 1 else 2 end ASC ");
-            } */
                         
-            if (!empty($sorting_ids)) {
+                        $caseStatements = [];
-                $ids = implode(',', $sorting_ids);
+                        foreach ($sorting_ids as $index => $id) {
-                $query->orderByRaw("array_position(ARRAY[$ids], items.id)");
+                            $caseStatements[] = "WHEN items.id = {$id} THEN " . ($index + 1);
-            }else if ($sort == "new"){
+                        }
+                        $caseStatements[] = "ELSE 999";
+                        
+                        $query->orderByRaw("
+                            CASE 
+                                " . implode("\n                                ", $caseStatements) . "
+                            END ASC
+                        ");
+
+                    } elseif ($sort == 'new') {
                         $query->orderByRaw("case when category1 in ('CLUBS','CLUB','COMPONENT HEAD') and brand = 'PXG' then 1 else 2 end ASC");
                     } else {
-                $query->orderByRaw("case when d.created_at is not null then 1 else 2 end ASC, random()");
+                        $query->orderByRaw('case when d.created_at is not null then 1 else 2 end ASC, random()');
                     }
 
-            //      $query->orderByRaw("items.created_at desc NULLS LAST");
                 }
 
             })
-            ->where("is_publish", true)
+            ->where('is_publish', true)
             ->when($search, function ($query) use ($search) {
                 $query->where(function ($query) use ($search) {
                     $query->where('number', 'ILIKE', "%$search%")
@@ -132,6 +112,9 @@ class ProductRepository
             })
             ->when($event, function ($query) use ($event) {
                 $query->where('d.event', $event);
+            })
+            ->when($where_ids, function ($query) use ($where_ids) {
+                $query->whereIn('items.id', $where_ids);
             });
 
         if ($category_id) {
@@ -155,10 +138,128 @@ class ProductRepository
             });
         }
 
-      
         return $builder->paginate($limit);
     }
 
+    public function getProductList($params)
+    {
+        $bindings = [];
+
+        // =========================
+        // ORDER BY
+        // =========================
+        $order_by = 'ORDER BY dpr.discount_price ASC NULLS LAST';
+
+        $sort = $params['sort'] ?? null;
+        if ($sort === 'price_high_to_low') {
+            $order_by = 'ORDER BY dpr.discount_price DESC NULLS LAST';
+        } elseif ($sort === 'price_low_to_high') {
+            $order_by = 'ORDER BY dpr.discount_price ASC NULLS LAST';
+        } elseif ($sort === 'new') {
+            $order_by = 'ORDER BY items.created_at DESC NULLS LAST';
+        }
+
+        $location_id = $params['location_id'] ?? null;
+
+        // =========================
+        // WHERE CONDITIONS
+        // =========================
+        $wheres = [];
+
+        $price_range_start = $params['price_range_start'] ?? null;
+        $price_range_end = $params['price_range_end'] ?? null;
+
+        if ($price_range_start !== null && $price_range_end !== null) {
+            $wheres[] = '(dpr.discount_price BETWEEN ? AND ?)';
+            $bindings[] = $price_range_start;
+            $bindings[] = $price_range_end;
+        }
+
+        $whereSql = $wheres
+            ? 'AND '.implode(' AND ', $wheres)
+            : '';
+
+        // =========================
+        // QUERY
+        // =========================
+        $sql = "SELECT
+                items.*,
+                dp.percent,
+                dp.event,
+                dpr.discount_price
+            FROM items
+            LEFT JOIN item_dimension
+                ON item_dimension.no = items.number
+
+            -- =========================
+            -- DISCOUNT PERCENT
+            -- =========================
+            LEFT JOIN (
+                SELECT DISTINCT ON (di.item_reference_id)
+                    di.item_reference_id,
+                    di.percent,
+                    d.created_at,
+                    d.location_id,
+                    CASE
+                        WHEN d.valid_at IS NULL THEN 'special-offer'
+                        ELSE 'limited-sale'
+                    END AS event
+                FROM discount_items di
+                JOIN discounts d ON d.id = di.discount_id
+                WHERE d.type = 'discount'
+                AND (d.valid_at IS NULL OR d.valid_at <= NOW())
+                AND (d.expired_at IS NULL OR d.expired_at >= NOW())
+                AND (
+                        (22 IS NOT NULL AND (d.location_id = 22 OR d.location_id IS NULL))
+                    OR (22 IS NULL AND d.location_id IS NULL)
+                )
+                ORDER BY
+                    di.item_reference_id,
+                    CASE
+                        WHEN d.location_id = 22 THEN 1
+                        ELSE 2
+                    END,
+                    d.created_at DESC
+            ) dp ON dp.item_reference_id = items.id
+
+            -- =========================
+            -- DISCOUNT PRICE
+            -- =========================
+            LEFT JOIN (
+                SELECT DISTINCT ON (di.item_reference_id)
+                    di.item_reference_id,
+                    di.price AS discount_price,
+                    d.created_at,
+                    d.location_id
+                FROM discount_items di
+                JOIN discounts d ON d.id = di.discount_id
+                WHERE d.type = 'price'
+                AND (d.valid_at IS NULL OR d.valid_at <= NOW())
+                AND (d.expired_at IS NULL OR d.expired_at >= NOW())
+                AND (
+                        (22 IS NOT NULL AND (d.location_id = 22 OR d.location_id IS NULL))
+                    OR (22 IS NULL AND d.location_id IS NULL)
+                )
+                ORDER BY
+                    di.item_reference_id,
+                    CASE
+                        WHEN d.location_id = 22 THEN 1
+                        ELSE 2
+                    END,
+                    d.created_at DESC
+            ) dpr ON dpr.item_reference_id = items.id
+
+            WHERE items.is_publish = TRUE
+            AND items.deleted_at IS NULL
+            $whereSql
+            $order_by
+        ";
+
+
+        $select= DB::select($sql, $bindings);
+
+        return $select;
+    }
 
     public function getMinMaxPrice()
     {
@@ -168,13 +269,13 @@ class ProductRepository
         ];
     }
 
-
-
     public function show($slug)
     {
-        $product = Items::where('slug', $slug)->first();
+        $product = Items::where('slug', $slug)
-
+            ->when(is_int($slug), function ($query) use ($slug) {
-
+                return $query->orWhere('id', $slug);
+            })
+            ->first();
 
         if ($product == null) {
             abort(404);

lang/en/catalog_fashion.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+   "title" => "Catalog",
    'categories' => 'Categories',
    'genders'    => 'Genders',
    'price'      => 'Price',

lang/id/catalog_fashion.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+   "title" => "Katalog",
    'categories' => 'Kategori',
    'genders'    => 'Gender',
    'price'      => 'Harga',

resources/views/components/home/product-card.blade.php

@@ -11,7 +11,7 @@
                 aria-label="Add to Wishlist">
                 <i class="ci-heart animate-target"></i>
             </button>
-            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('product.detail', $product->slug ?? '0') }}">
+            <a class="d-flex bg-body-tertiary rounded p-3" href="{{ route('product.detail', $product->slug ?? $product->id ?? '0') }}">
                 <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">
                     <img src="{{ $product->image_url }}" loading="lazy" class="w-100 h-100 object-cover">
                 </div>
@@ -33,7 +33,7 @@
         </div>
         <div class="nav mb-2">
             <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
-                href="{{ route('product.detail', $product->slug ?? '0') }}">
+                href="{{ route('product.detail', $product->slug ?? $product->id ?? '0') }}">
                 <span class="text-truncate">{{ $product->name ?? '' }}</span>
             </a>
         </div>

resources/views/shop/catalog-fashion.blade.php

@@ -1,8 +1,6 @@
 @extends('layouts.landing', ['title' => 'Fashion Store - Catalog'])
 
 @section('content')
-    
-
     <x-layout.header />
 
     <main class="content-wrapper">
@@ -11,13 +9,13 @@
         <nav class="container pt-2 pt-xxl-3 my-3 my-md-4" aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'fashion-v1']) }}">Home</a></li>
-                <li class="breadcrumb-item active" aria-current="page">Catalog with sidebar filters</li>
+                <li class="breadcrumb-item active" aria-current="page">{{ __('catalog_fashion.title') }}</li>
             </ol>
         </nav>
 
 
         <!-- Page title -->
-        <h1 class="h3 container pb-3 pb-lg-4">Shop catalog</h1>
+        <h1 class="h3 container pb-3 pb-lg-4">{{ __('catalog_fashion.title') }}</h1>
 
 
         <!-- Products grid + Sidebar with filters -->
@@ -41,9 +39,8 @@
                                 <!-- Genders -->
                                 <div class="accordion-item border-0 pb-1 pb-xl-2">
                                     <h4 class="accordion-header" id="headingGenders">
-                                        <button type="button" class="accordion-button p-0 pb-3"
+                                        <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse"
-                                            data-bs-toggle="collapse" data-bs-target="#genders" aria-expanded="true"
+                                            data-bs-target="#genders" aria-expanded="true" aria-controls="genders">
-                                            aria-controls="genders">
                                             {{ __('catalog_fashion.genders') }}
                                         </button>
                                     </h4>
@@ -61,9 +58,8 @@
                                 <!-- Categories -->
                                 <div class="accordion-item border-0 pb-1 pb-xl-2">
                                     <h4 class="accordion-header" id="headingCategories">
-                                        <button type="button" class="accordion-button p-0 pb-3"
+                                        <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse"
-                                            data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true"
+                                            data-bs-target="#categories" aria-expanded="true" aria-controls="categories">
-                                            aria-controls="categories">
                                             {{ __('catalog_fashion.categories') }}
                                         </button>
                                     </h4>
@@ -82,9 +78,8 @@
                                 <!-- Price -->
                                 <div class="accordion-item border-0 pb-1 pb-xl-2">
                                     <h4 class="accordion-header" id="headingPrice">
-                                        <button type="button" class="accordion-button p-0 pb-3"
+                                        <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse"
-                                            data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="true"
+                                            data-bs-target="#price" aria-expanded="true" aria-controls="price">
-                                            aria-controls="price">
                                             Price
                                         </button>
                                     </h4>
@@ -98,14 +93,14 @@
                                                 <div class="d-flex align-items-center">
                                                     <div class="position-relative w-50">
 
-                                                        <input type="number" class="form-control"
+                                                        <input type="number" class="form-control" min="0"
-                                                            min="0" data-range-slider-min>
+                                                            data-range-slider-min>
                                                     </div>
                                                     <i class="ci-minus text-body-emphasis mx-2"></i>
                                                     <div class="position-relative w-50">
 
-                                                        <input type="number" class="form-control"
+                                                        <input type="number" class="form-control" min="0"
-                                                            min="0" data-range-slider-max>
+                                                            data-range-slider-max>
                                                     </div>
                                                 </div>
                                             </div>
@@ -396,11 +391,10 @@
                                 </div> --}}
 
                                 <!-- Status -->
-                                <div class="accordion-item border-0">
+                                {{-- <div class="accordion-item border-0">
                                     <h4 class="accordion-header" id="headingStatus">
-                                        <button type="button" class="accordion-button p-0 pb-3"
+                                        <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse"
-                                            data-bs-toggle="collapse" data-bs-target="#status" aria-expanded="true"
+                                            data-bs-target="#status" aria-expanded="true" aria-controls="status">
-                                            aria-controls="status">
                                             Status
                                         </button>
                                     </h4>
@@ -427,7 +421,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                </div>
+                                </div> --}}
                             </div>
                         </div>
                     </div>
@@ -439,7 +433,8 @@
 
                     <!-- Sorting -->
                     <div class="d-sm-flex align-items-center justify-content-between mt-n2 mb-3 mb-sm-4">
-                        <div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold" id="product-count">Loading...</span>
+                        <div class="fs-sm text-body-emphasis text-nowrap">Found <span class="fw-semibold"
+                                id="product-count">Loading...</span>
                             items
                         </div>
                         <div class="d-flex align-items-center text-nowrap">
@@ -453,11 +448,19 @@
                     }
                   }'
                                     onchange="window.location.href='{{ route('product.index') }}?sort_by='+this.value+'&{{ http_build_query(request()->except('sort_by')) }}'">
-                                    <option value="relevance" {{ request('sort_by') == 'relevance' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_relevance') }}</option>
+                                    <option value="relevance" {{ request('sort_by') == 'relevance' ? 'selected' : '' }}>
-                                    <option value="popularity" {{ request('sort_by') == 'popularity' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_popularity') }}</option>
+                                        {{ __('catalog_fashion.sort_relevance') }}</option>
-                                    <option value="price_low_to_high" {{ request('sort_by') == 'price_low_to_high' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_low_to_high') }}</option>
+                                    <option value="popularity" {{ request('sort_by') == 'popularity' ? 'selected' : '' }}>
-                                    <option value="price_high_to_low" {{ request('sort_by') == 'price_high_to_low' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_price_high_to_low') }}</option>
+                                        {{ __('catalog_fashion.sort_popularity') }}</option>
-                                    <option value="new" {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>{{ __('catalog_fashion.sort_newest_arrivals') }}</option>
+                                    <option value="price_low_to_high"
+                                        {{ request('sort_by') == 'price_low_to_high' ? 'selected' : '' }}>
+                                        {{ __('catalog_fashion.sort_price_low_to_high') }}</option>
+                                    <option value="price_high_to_low"
+                                        {{ request('sort_by') == 'price_high_to_low' ? 'selected' : '' }}>
+                                        {{ __('catalog_fashion.sort_price_high_to_low') }}</option>
+                                    <option value="new"
+                                        {{ request('sort_by') == 'newest_arrivals' ? 'selected' : '' }}>
+                                        {{ __('catalog_fashion.sort_newest_arrivals') }}</option>
                                 </select>
                             </div>
                         </div>
@@ -468,7 +471,7 @@
                     </div>
                     {{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
                             <div
-                                class="position-relative bg-body-tertiary text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
+                                class="position-relative  text-center rounded-4 p-4 p-sm-5 py-md-4 py-xl-5">
                                 <p class="fs-xs text-body-secondary mb-1">Sweatshirts</p>
                                 <h2 class="h4 mb-4">Colors for your mood</h2>
                                 <div class="swiper user-select-none mb-4"
@@ -510,10 +513,10 @@
                 </div>
 
                 <!-- Show more button -->
-                    <a href="{{ route('product.index', array_merge(request()->except('page'), ['page' => 1])) }}" type="button" class="btn btn-lg btn-outline-secondary w-100">
+                <button type="button" class="btn btn-lg btn-outline-secondary w-100" id="show-more-btn">
                     Show more
                     <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>
-                    </a>
+                </button>
             </div>
             </div>
         </section>
@@ -595,7 +598,59 @@
         Filters
     </button>
 
+
+
+    <style>
+        .shimmer-wrapper {
+            overflow: hidden;
+        }
+
+        .shimmer {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .shimmer::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg,
+                    rgba(255, 255, 255, 0) 0%,
+                    rgba(255, 255, 255, 0.3) 50%,
+                    rgba(255, 255, 255, 0) 100%);
+            animation: shimmer 1.5s infinite;
+        }
+
+        @keyframes shimmer {
+            0% {
+                transform: translateX(-100%);
+            }
+
+            100% {
+                transform: translateX(100%);
+            }
+        }
+
+        .shimmer-line {
+            background-color: rgba(0, 0, 0, 0.1);
+            border-radius: 4px;
+        }
+
+        .shimmer-content {
+            position: relative;
+            overflow: hidden;
+        }
+    </style>
+@endsection
+
+@section('scripts')
     <script>
+        // Loading state lock
+        let isLoading = false;
+
         document.addEventListener('DOMContentLoaded', function() {
             loadGenders();
             loadCategories();
@@ -606,7 +661,9 @@
             if (sortSelect) {
                 sortSelect.removeAttribute('onchange');
                 sortSelect.addEventListener('change', function() {
-                loadProducts({ sort_by: this.value });
+                    loadProducts({
+                        sort_by: this.value
+                    });
                 });
             }
 
@@ -614,6 +671,55 @@
             const priceInputs = document.querySelectorAll('[data-range-slider-min], [data-range-slider-max]');
             priceInputs.forEach(input => {
                 input.addEventListener('change', function() {
+                    debouncePriceSlider(function() {
+                        const minVal = document.querySelector('[data-range-slider-min]').value;
+                        const maxVal = document.querySelector('[data-range-slider-max]').value;
+                        loadProducts({
+                            price_range_start: minVal || null,
+                            price_range_end: maxVal || null
+                        });
+                    });
+                });
+            });
+            
+
+            
+            // Debounce function for price slider
+            let priceSliderTimeout;
+            function debouncePriceSlider(callback, delay = 300) {
+                clearTimeout(priceSliderTimeout);
+                priceSliderTimeout = setTimeout(callback, delay);
+            }
+            
+            // Handle range slider UI changes
+            const rangeSliderUI = document.querySelector('.range-slider-ui');
+            if (rangeSliderUI) {
+                // Use MutationObserver to detect slider changes
+                const observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                            debouncePriceSlider(function() {
+                                const minVal = document.querySelector('[data-range-slider-min]').value;
+                                const maxVal = document.querySelector('[data-range-slider-max]').value;
+                                loadProducts({
+                                    price_range_start: minVal || null,
+                                    price_range_end: maxVal || null
+                                });
+                            });
+                        }
+                    });
+                });
+                
+                observer.observe(rangeSliderUI, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['style', 'class']
+                });
+                
+                // Also handle mouseup/touchend events on the slider
+                rangeSliderUI.addEventListener('mouseup', function() {
+                    debouncePriceSlider(function() {
                         const minVal = document.querySelector('[data-range-slider-min]').value;
                         const maxVal = document.querySelector('[data-range-slider-max]').value;
                         loadProducts({
@@ -623,42 +729,135 @@
                     });
                 });
                 
+                rangeSliderUI.addEventListener('touchend', function() {
+                    debouncePriceSlider(function() {
+                        const minVal = document.querySelector('[data-range-slider-min]').value;
+                        const maxVal = document.querySelector('[data-range-slider-max]').value;
+                        loadProducts({
+                            price_range_start: minVal || null,
+                            price_range_end: maxVal || null
+                        });
+                    });
+                });
+            }
+
             // Attach initial filter event listeners
             attachFilterEventListeners();
+
+            // Handle show more button
+            const showMoreBtn = document.getElementById('show-more-btn');
+            if (showMoreBtn) {
+                showMoreBtn.addEventListener('click', function() {
+                    loadMoreProducts();
                 });
+            }
+        });
+
+        function loadMoreProducts() {
+            const container = document.getElementById('products-container');
+            const showMoreBtn = document.getElementById('show-more-btn');
+
+            // Get current page from URL or default to 2 (next page)
+            const urlParams = new URLSearchParams(window.location.search);
+            const currentPage = parseInt(urlParams.get('page')) || 1;
+            const nextPage = currentPage + 1;
+
+            // Show loading state
+            showMoreBtn.innerHTML =
+                '<div class="spinner-border spinner-border-sm me-2" role="status"><span class="visually-hidden">Loading...</span></div> Loading...';
+            showMoreBtn.disabled = true;
+
+            // Set page parameter and load products
+            urlParams.set('page', nextPage);
+
+            fetch(`{{ route('product.ajax') }}?${urlParams.toString()}`, {
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'Accept': 'application/json'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Append new products to existing container
+                        const tempDiv = document.createElement('div');
+                        tempDiv.innerHTML = data.products;
+
+                        // Append each new product
+                        while (tempDiv.firstChild) {
+                            container.appendChild(tempDiv.firstChild);
+                        }
+
+                        // Update show more button
+                        if (data.has_more) {
+                            showMoreBtn.innerHTML = 'Show more <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>';
+                            showMoreBtn.disabled = false;
+                        } else {
+                            showMoreBtn.style.display = 'none';
+                        }
+
+                        // Update URL
+                        window.history.pushState({
+                            path: window.location.pathname + '?' + urlParams.toString()
+                        }, '', window.location.pathname + '?' + urlParams.toString());
+                    } else {
+                        showMoreBtn.innerHTML = 'Show more <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>';
+                        showMoreBtn.disabled = false;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading more products:', error);
+                    showMoreBtn.innerHTML = 'Show more <i class="ci-chevron-down fs-xl ms-2 me-n1"></i>';
+                    showMoreBtn.disabled = false;
+                });
+        }
 
         function removeFilter(filterKey) {
             const urlParams = new URLSearchParams(window.location.search);
             urlParams.delete(`filter[${filterKey}]`);
 
-        // Convert URLSearchParams to object for loadProducts
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        const params = {};
+            history.replaceState(null, '', newUrl);
-        for (const [key, value] of urlParams.entries()) {
+
-            params[key] = value;
+            // remove button
+            const button = document.querySelector(`.remove-filter[data-filter-key="${filterKey}"]`);
+            if (button) {
+                button.remove();
             }
 
-        loadProducts(params);
+            loadGenders();
+            loadCategories();
+
+            loadProducts(Object.fromEntries(urlParams.entries()));
         }
 
         function clearAllFilters() {
             const urlParams = new URLSearchParams(window.location.search);
 
-        // Remove all filter parameters
+            // Collect all filter keys first
+            const filterKeys = [];
             for (const [key] of urlParams.entries()) {
                 if (key.startsWith('filter[')) {
-                urlParams.delete(key);
+                    filterKeys.push(key);
                 }
             }
 
-        // Keep non-filter parameters
+            // Delete all filter keys
-        const params = {};
+            filterKeys.forEach(key => urlParams.delete(key));
-        for (const [key, value] of urlParams.entries()) {
-            if (!key.startsWith('filter[')) {
-                params[key] = value;
-            }
-        }
 
-        loadProducts(params);
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+            history.replaceState(null, '', newUrl);
+
+            // remove all button
+            const buttons = document.querySelectorAll('.remove-filter');
+            buttons.forEach(button => {
+                button.remove();
+            });
+
+            loadGenders();
+            loadCategories();
+
+            loadProducts(Object.fromEntries(urlParams.entries()));
         }
 
         function loadGenders() {
@@ -686,14 +885,17 @@
                                 this.classList.add('active', 'text-primary');
 
                                 const genderId = this.getAttribute('data-gender-id');
-                        loadProducts({ 'filter[gender]': genderId });
+                                loadProducts({
+                                    'filter[gender]': genderId
+                                });
                             });
                         });
                     }
                 })
                 .catch(error => {
                     console.error('Error loading genders:', error);
-            document.getElementById('genders-list').innerHTML = '<li class="nav-item mb-1"><span class="text-danger">Error loading genders</span></li>';
+                    document.getElementById('genders-list').innerHTML =
+                        '<li class="nav-item mb-1"><span class="text-danger">Error loading genders</span></li>';
                 });
         }
 
@@ -717,28 +919,52 @@
                             link.addEventListener('click', function(e) {
                                 e.preventDefault();
                                 // Remove active class from all category links
-                        categoryLinks.forEach(c => c.classList.remove('active', 'text-primary'));
+                                categoryLinks.forEach(c => c.classList.remove('active',
+                                'text-primary'));
                                 // Add active class to clicked link
                                 this.classList.add('active', 'text-primary');
 
                                 const categoryId = this.getAttribute('data-category-id');
-                        loadProducts({ 'filter[category]': categoryId });
+                                loadProducts({
+                                    'filter[category]': categoryId
+                                });
                             });
                         });
                     }
                 })
                 .catch(error => {
                     console.error('Error loading categories:', error);
-            document.getElementById('categories-list').innerHTML = '<li class="nav-item mb-1"><span class="text-danger">Error loading categories</span></li>';
+                    document.getElementById('categories-list').innerHTML =
+                        '<li class="nav-item mb-1"><span class="text-danger">Error loading categories</span></li>';
                 });
         }
 
         function loadProducts(params = {}) {
+            // Prevent multiple simultaneous calls
+            if (isLoading) {
+                return;
+            }
+            
+            isLoading = true;
+            
             const container = document.getElementById('products-container');
             const countElement = document.getElementById('product-count');
 
+            const shimmerItem = `<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
+                <div class="shimmer-wrapper">
+                    <div class="shimmer">
+                        <div class="shimmer-content rounded">
+                            <div class="shimmer-line shimmer-image rounded mb-3" style="height: 0; padding-bottom: 100%; position: relative;">
+                                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); border-radius: 4px;"></div>
+                            </div>
+                            <div class="shimmer-line shimmer-title rounded mb-2" style="height: 20px; width: 80%;"></div>
+                            <div class="shimmer-line shimmer-price rounded" style="height: 16px; width: 60%;"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
             // Show loading state
-        container.innerHTML = '<div class="col-12 text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+            container.innerHTML = shimmerItem.repeat(12);
             countElement.textContent = 'Loading...';
 
             // Get current URL parameters
@@ -769,7 +995,9 @@
 
                         // Update URL without page reload
                         const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
-                window.history.pushState({ path: newUrl }, '', newUrl);
+                        window.history.pushState({
+                            path: newUrl
+                        }, '', newUrl);
                     } else {
                         container.innerHTML = '<div class="col-12 text-center py-5 text-danger">Error loading products</div>';
                         countElement.textContent = '0';
@@ -779,6 +1007,9 @@
                     console.error('Error:', error);
                     container.innerHTML = '<div class="col-12 text-center py-5 text-danger">Error loading products</div>';
                     countElement.textContent = '0';
+                })
+                .finally(() => {
+                    isLoading = false;
                 });
         }
 
@@ -853,6 +1084,3 @@
         }
     </script>
 @endsection
-
-@section('scripts')
-@endsection