Implement rendering categories on frontend and filter products by categories

Author: thecodeholic

app/Http/Controllers/ProductController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Category;
 use App\Models\Product;
 use Illuminate\Http\Request;
 
@@ -18,6 +19,23 @@ public function index()
         ]);
     }
 
+    public function byCategory(Category $category)
+    {
+        $categories = Category::getAllChildrenByParent($category);
+
+        $products = Product::query()
+            ->select('products.*')
+            ->join('product_categories AS pc', 'pc.product_id', 'products.id')
+            ->where('published', '=', 1)
+            ->whereIn('pc.category_id', array_map(fn($c) => $c->id, $categories))
+            ->orderBy('updated_at', 'desc')
+            ->paginate(5);
+
+        return view('product.index', [
+            'products' => $products
+        ]);
+    }
+
     public function view(Product $product)
     {
         return view('product.view', ['product' => $product]);

app/Models/Category.php

@@ -39,6 +39,15 @@ public static function getActiveAsTree($resourceClassName = null)
         return self::buildCategoryTree($categories, null, $resourceClassName);
     }
 
+    public static function getAllChildrenByParent(Category $category)
+    {
+        $categories = Category::where('active', true)->orderBy('parent_id')->get();
+        $result[] = $category;
+        self::getCategoriesArray($categories, $category->id, $result);
+
+        return $result;
+    }
+
     private static function buildCategoryTree($categories, $parentId = null, $resourceClassName = null)
     {
         $categoryTree = [];
@@ -55,4 +64,14 @@ private static function buildCategoryTree($categories, $parentId = null, $resour
 
         return $categoryTree;
     }
+
+    private static function getCategoriesArray($categories, $parentId, &$result)
+    {
+        foreach ($categories as $category) {
+            if ($category->parent_id === $parentId) {
+                $result[] = $category;
+                self::getCategoriesArray($categories, $category->id, $result);
+            }
+        }
+    }
 }

resources/css/app.css

@@ -85,3 +85,12 @@ body {
 .table-sm > thead > tr > th {
   padding: 0.25rem;
 }
+
+.category-list > .category-item:hover > .category-list {
+  display: flex;
+}
+
+.category-list > .category-item > .category-list > .category-item > .category-list {
+  left: 100%;
+  top: 0;
+}

resources/views/components/category-list.blade.php

@@ -0,0 +1,14 @@
+@props(['categoryList'])
+
+<div {{ $attributes->merge(['class' => 'category-list flex text-white bg-slate-700']) }}>
+    @if (!empty($categoryList))
+        @foreach($categoryList as $category)
+            <div class="category-item relative">
+                <a href="{{ route('byCategory', $category) }}" class="cursor-pointer block py-3 px-6 hover:bg-black/10">
+                    {{$category->name}}
+                </a>
+                <x-category-list class="absolute left-0 top-[100%] z-50 hidden flex-col" :category-list="$category->children"/>
+            </div>
+        @endforeach
+    @endif
+</div>

resources/views/product/index.blade.php

@@ -1,8 +1,11 @@
 <?php
 /** @var \Illuminate\Database\Eloquent\Collection $products */
+$categoryList = \App\Models\Category::getActiveAsTree();
+
 ?>
 
 <x-app-layout>
+    <x-category-list :category-list="$categoryList" class="-ml-5 -mt-5 -mr-5 px-4"/>
     <?php if ($products->count() === 0): ?>
         <div class="text-center text-gray-600 py-16 text-xl">
             There are no products published

routes/web.php

@@ -20,6 +20,7 @@
 
 Route::middleware(['guestOrVerified'])->group(function () {
     Route::get('/', [ProductController::class, 'index'])->name('home');
+    Route::get('/category/{category:slug}', [ProductController::class, 'byCategory'])->name('byCategory');
     Route::get('/product/{product:slug}', [ProductController::class, 'view'])->name('product.view');
 
     Route::prefix('/cart')->name('cart.')->group(function () {