Laravel E-Commerce Project - Show Products by Subcategory

In this video, we will learn how to display products by subcategory.

Let's explore how to achieve this. First, we need to add a new column to the Products table. To do this, we will create a migration.

Switch to the command prompt and run the following command:

php artisan make:migration add_subcategory_id_to_products_table --table=products

Now, switch to the project and open the migration file. Go to the database directory, then migration, and open the add_subcategory_id_to_products_table migration file.

Add a new column by writing the following code:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddSubcategoryIdToProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('products', function (Blueprint $table) {
            $table->bigInteger('subcategory_id')->unsigned()->nullable();
            $table->foreign('subcategory_id')->references('id')->on('subcategories')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('products', function (Blueprint $table) {
            $table->dropForeign('products_subcategory_id_foreign');
            $table->dropColumn('subcategory_id');
        });
    }
}

Next, migrate the migration by switching to the command prompt and running the following command:

php artisan migrate

Now, run the application:

php artisan serve

Switch to the project and open the Product model. Create a new function:

public function subCategories() 
{ 
	return $this->belongsTo(Subcategory::class,'subcategory_id'); 
}

Open the web.php file and add an optional parameter to the product-category route:

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

Go to the CategoryComponent.php class file and add a new argument to the mount method. Also, create a new property:

public $scategory_slug;

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

Inside the render method, make the following changes:

public function render()
{
	$category_id = null;
	$category_name = "";
	$filter = "";

	if($this->scategory_slug)
	{
		$scategory = Subcategory::where('slug',$this->scategory_slug)->first();
		$category_id = $scategory->id;
		$category_name = $scategory->name;
		$filter = "sub";

	}
	else{
		$category = Category::where('slug',$this->category_slug)->first();
		$category_id = $category->id;
		$category_name = $category->name;    
		$filter = "";    
	
	}
	
	if($this->sorting=='date')   
	{
		$products = Product::where($filter.'category_id',$category_id)->orderBy('created_at','DESC')->paginate($this->pagesize);  
	}
	else if($this->sorting=="price")
	{
		$products = Product::where($filter.'category_id',$category_id)->orderBy('regular_price','ASC')->paginate($this->pagesize); 
	}
	else if($this->sorting=="price-desc")
	{
		$products = Product::where($filter.'category_id',$category_id)->orderBy('regular_price','DESC')->paginate($this->pagesize); 
	}
	else{
		$products = Product::where($filter.'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");
}

Next, go to the shop-component.blade.php view file and add a link to the subcategory:

<a href="{{route('product.category',['category_slug'=>$category->slug,'scategory_slug'=>$scategory->slug])}}" class="cat-link"><i class="fa fa-caret-right"></i> {{$scategory->name}}</a>

Add the same link to the category-component.blade.php view file inside the subcategories link.

That's it! Let's test the functionality.

Switch to the browser and refresh the page. Click on a category to view its products.

Create some subcategories by logging in as an admin, going to the category page, and clicking on add. Enter the name and select the parent category.

For now, let's set the subcategory ID manually. Go to phpMyAdmin, open the database, and browse the product table. Copy the product name and find it. Set the subcategory ID and save the changes.

Refresh the page to see the products in the subcategory.

By following these steps, you can display products by subcategory.

In the next video, we will learn how to add a subcategory option to the add product and edit product pages in the admin panel.