In this video we are going to learn about Products By Categories.
So let see how can show products by category.
First of all lets display all categories on this shop page.
For that switch to project
And lets open app\\http\\livewire\\ShopComponent.php class file and inside the render method lets fetch all categories so write here.

$categories = Category::all();  

And also import the Category model on top

use App\\Models\\Category;

Now return the $categories to the view file so write here

return view('livewire.shop-component',['products'=> $products,'categories'=>$categories])->layout(\"layouts.base\");

Alright now open the shop-component.blade.php view file
And inside this file lets find the categories widget and write the following code.

 <div class=\"widget mercado-widget categories-widget\">
	<h2 class=\"widget-title\">All Categories</h2>
	<div class=\"widget-content\">
		<ul class=\"list-category\">
			@foreach ($categories as $category)
			<li class=\"category-item\">
				<a href=\"{{route('product.category',['category_slug'=>$category->slug])}}\" class=\"cate-link\">{{$category->name}}</a>
			</li> 
			@endforeach
		</ul>
	</div>
</div><!-- Categories widget-->

Now lets create a new livewire component for displaying all the products according to the category.
So switch to the command prompt and for creating the new livewire component execute the command.

php artisan make:livewire CategoryComponent

Now switch to the project
And lets create the route for CategoryComponent. So open web.php file and add the following route.
Route::get('/product-category/{category_slug}',CategoryComponent::class)->name('product.category');
Now go the ShopComponent view file and inside this list lets add the href link

<a href=\"{{route('product.category',['category_slug'=>$category->slug])}}\" class=\"cate-link\">{{$category->name}}</a>

Now lets copy all the text from shop.component.blade.php file and paste insdie the category-component.blade.php view file.
Alright, now lets open the ShopComponent.php class file and from here lets copy all the text and paste inside the CategoryComponent.php class file.
Now inside the CategoryComponent.php class file make the following changes.

<?php

namespace App\\Http\\Livewire;

use App\\Models\\Product;
use Livewire\\Component;
use Livewire\\WithPagination;
use Cart;
use App\\Models\\Category;

class CategoryComponent extends Component
{
    public $sorting;
    public $pagesize;
    public $category_slug;

    public function mount($category_slug)
    {
        $this->sorting = \"default\";
        $this->pagesize = 12;
        $this->category_slug = $category_slug;
    }

    public function store($product_id,$product_name,$product_price)
    {
        Cart::add($product_id,$product_name,1,$product_price)->associate('App\\Models\\Product');
        session()->flash('success_message','Item added in Cart');
        return redirect()->route('product.cart');
    }

    use WithPagination;
    public function render()
    {  
        $category = Category::where('slug',$this->category_slug)->first();
        $category_id = $category->id;
        $category_name = $category->name;
        if($this->sorting=='date')   
        {
            $products = Product::where('category_id',$category_id)->orderBy('created_at','DESC')->paginate($this->pagesize);  
        }
        else if($this->sorting==\"price\")
        {
            $products = Product::where('category_id',$category_id)->orderBy('regular_price','ASC')->paginate($this->pagesize); 
        }
        else if($this->sorting==\"price-desc\")
        {
            $products = Product::where('category_id',$category_id)->orderBy('regular_price','DESC')->paginate($this->pagesize); 
        }
        else{
            $products = Product::where('category_id',$category_id)->paginate($this->pagesize);  
        }   
        
        $categories = Category::all();
        
        return view('livewire.category-component',['products'=> $products,'categories'=>$categories,'category_name'=>$category_name])->layout(\"layouts.base\");
    }
}

Now its done so lets check it
So switch to the browser and just refresh the page
Now lets click on any category
And her you can see the all products related to this category
Now check another, So lets click on another category and here are the products of this category.
So in this way you can show Products By Categories.