Implement sorting of products

thecodeholic · Oct 21, 2023 · 2ce5178 · 2ce5178
1 parent 4a08af6
commit 2ce5178
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 16 deletions.
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
@@ -36,14 +36,25 @@ public function view(Product $product)
     private function renderProducts(Builder $query)
     {
         $search = \request()->get('search');
+        $sort = \request()->get('sort', '-updated_at');
+
+        if ($sort) {
+            $sortDirection = 'asc';
+            if ($sort[0] === '-') {
+                $sortDirection = 'desc';
+            }
+            $sortField = preg_replace('/^-?/', '', $sort);
+
+            $query->orderBy($sortField, $sortDirection);
+        }
         $products = $query
             ->where('published', '=', 1)
             ->where(function ($query) use ($search) {
                 /** @var $query \Illuminate\Database\Eloquent\Builder */
                 $query->where('products.title', 'like', "%$search%")
                     ->orWhere('products.description', 'like', "%$search%");
             })
-            ->orderBy('updated_at', 'desc')
+
             ->paginate(5);
 
         return view('product.index', [

diff --git a/resources/views/product/index.blade.php b/resources/views/product/index.blade.php
@@ -7,24 +7,58 @@
 <x-app-layout>
     <x-category-list :category-list="$categoryList" class="-ml-5 -mt-5 -mr-5 px-4"/>
 
-    <div class="p-3 pb-0">
-        <form action="" method="GET">
-            <x-input type="text" name="search" placeholder="Search for the products" value="{{request()->get('search')}}" />
+    <div class="flex gap-2 items-center p-3 pb-0" x-data="{
+            selectedSort: '{{ request()->get('sort', '-updated_at') }}',
+            searchKeyword: '{{ request()->get('search') }}',
+            updateUrl() {
+                const params = new URLSearchParams(window.location.search)
+                if (this.selectedSort && this.selectedSort !== '-updated_at') {
+                    params.set('sort', this.selectedSort)
+                } else {
+                    params.delete('sort')
+                }
+
+                if (this.searchKeyword) {
+                    params.set('search', this.searchKeyword)
+                } else {
+                    params.delete('search')
+                }
+                window.location.href = window.location.origin + window.location.pathname + '?'
+                + params.toString();
+            }
+        }">
+        <form action="" method="GET" class="flex-1" @submit.prevent="updateUrl">
+            <x-input type="text" name="search" placeholder="Search for the products"
+                     x-model="searchKeyword"/>
         </form>
+        <x-input
+            x-model="selectedSort"
+            @change="updateUrl"
+            type="select"
+            name="sort"
+            class="w-full focus:border-purple-600 focus:ring-purple-600 border-gray-300 rounded">
+            <option value="price">Price (ASC)</option>
+            <option value="-price">Price (DESC)</option>
+            <option value="title">Title (ASC)</option>
+            <option value="-title">Title (DESC)</option>
+            <option value="-updated_at">Last Modified at the top</option>
+            <option value="updated_at">Last Modified at the bottom</option>
+        </x-input>
+
     </div>
 
-    <?php if ($products->count() === 0): ?>
-        <div class="text-center text-gray-600 py-16 text-xl">
-            There are no products published
-        </div>
+    <?php if ( $products->count() === 0 ): ?>
+    <div class="text-center text-gray-600 py-16 text-xl">
+        There are no products published
+    </div>
     <?php else: ?>
-        <div
-            class="grid gap-4 grig-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-3"
-        >
-            @foreach($products as $product)
-                <!-- Product Item -->
-                <div
-                    x-data="productItem({{ json_encode([
+    <div
+        class="grid gap-4 grig-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-3"
+    >
+        @foreach($products as $product)
+            <!-- Product Item -->
+            <div
+                x-data="productItem({{ json_encode([
                         'id' => $product->id,
                         'slug' => $product->slug,
                         'image' => $product->image ?: '/img/noimage.png',
@@ -59,6 +93,6 @@ class="object-cover rounded-lg hover:scale-105 hover:rotate-1 transition-transfo
                 <!--/ Product Item -->
             @endforeach
         </div>
-        {{$products->links()}}
+        {{$products->appends(['sort' => request('sort'), 'search' => request('search')])->links()}}
     <?php endif; ?>
 </x-app-layout>