Laravel 8 E-Commerce - Products By Categories

In this video, we will learn about displaying products by categories.

Let's see how we can show products by category. First, we need to display all categories on the shop page.

To do this, switch to the project and open the ShopComponent.php class file, located in the app/http/livewire directory. Inside the render method, let's fetch all categories by writing:


$categories = Category::all();

Also, import the Category model at the top of the file:


use App\Models\Category;

Now, return the $categories to the view file by writing:


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

Next, open the shop-component.blade.php view file and find the categories widget. 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, let's create a new Livewire component for displaying all products according to the category. Switch to the command prompt and execute the command:


php artisan make:livewire CategoryComponent

Switch back to the project and create a route for the CategoryComponent. Open the web.php file and add the following route:

Route::get('/product.category/{category_slug}', CategoryComponent::class)->name('product.category');

Now, go to the ShopComponent view file and add the href link:


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

Copy all the text from the shop-component.blade.php file and paste it into the category-component.blade.php view file.

Next, open the ShopComponent.php class file and copy all the text. Paste it into the CategoryComponent.php class file.

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");
    }
}