Laravel E-Commerce Project - Add Subcategory On Edit and Add Product Page

In this video, we will learn how to add a subcategory on the add and edit product pages.

Let's explore how to achieve this. First, switch to the project and open the AddProductComponent class file. Create a new property:

public $scategory_id; 

Inside the addProduct method, add the following code:

if($this->scategory_id) 
{ 
	$product->subcategory_id = $this->scategory_id; 
}

Inside the render method, fetch the subcategories according to the selected category:

public function render()
{
	$categories = Category::all();
	$scategories = Subcategory::where('category_id',$this->category_id)->get();
	return view('livewire.admin.admin-add-product-component',['categories'=>$categories,'scategories'=>$scategories])->layout('layouts.base');
}

Go to the add-product-component.blade.php view file and add a select control for subcategories after the category select control:

<div class=`form-group`>
	<label class=`col-md-4 control-label`>Sub Category</label>
	<div class=`col-md-4`>
		<select class=`form-control` wire:model=`scategory_id`>
			<option value=`0`>Select Category</option>
			@foreach ($scategories as $scategory)
				<option value=`{{$scategory->id}}`>{{$scategory->name}}</option>
			@endforeach                                        
		</select>
		@error('scategory_id')  <p class=`text-danger`>{{$message}}</p> @enderror  
	</div>
</div>

Go back to the AddProductComponent.php class file and create a new function:

public function changeSubcategory()
{
	$this->scategory_id = 0;
}

Call this function on the change event in the category select control:

<div class=`form-group`>
	<label class=`col-md-4 control-label`>Category</label>
	<div class=`col-md-4`>
		<select class=`form-control` wire:model=`category_id` wire:change=`changeSubcategory`>
			<option value=``>Select Category</option>
			@foreach ($categories as $category)
				<option value=`{{$category->id}}`>{{$category->name}}</option>
			@endforeach                                        
		</select>
		@error('category_id')  <p class=`text-danger`>{{$message}}</p> @enderror  
	</div>
</div>

Now, let's test the functionality. Switch to the browser and refresh the page. Add a new product by filling in the details, selecting a category, and setting a subcategory. Click submit and see the `product added` message.

Go to the shop page and click on the subcategory to see the newly created product.

Next, let's add a subcategory on the edit product page. Switch to the project and open the EditProduct component view file. Add a select control for subcategories:

<div class=`form-group`>
	<label class=`col-md-4 control-label`>Sub Category</label>
	<div class=`col-md-4`>
		<select class=`form-control` wire:model=`scategory_id`>
			<option value=`0`>Select Category</option>
			@foreach ($scategories as $scategory)
				<option value=`{{$scategory->id}}`>{{$scategory->name}}</option>
			@endforeach                                        
		</select>
		@error('scategory_id')  <p class=`text-danger`>{{$message}}</p> @enderror  
	</div>
</div>

Go to the EditProduct component class file and create a new property:

public $scategory_id; 

Inside the mount method, write the following code:

	$this->scategory_id = $product->subcategory_id; 

Inside the updateProduct method, add an if condition:

If($this->scategory_id) 
{ 
	$product->subcategory_id = $this->scategory_id; 
}

Create a new function:

public function changeSubcategory()
{
	$this->scategory_id = 0;
}

Call this function on the change event in the category select control:

<div class=`form-group`>
	<label class=`col-md-4 control-label`>Category</label>
	<div class=`col-md-4`>
		<select class=`form-control` wire:model=`category_id` wire:change=`changeSubcategory`>
			<option value=``>Select Category</option>
			@foreach ($categories as $category)
				<option value=`{{$category->id}}`>{{$category->name}}</option>
			@endforeach                                        
		</select>
		@error('category_id')  <p class=`text-danger`>{{$message}}</p> @enderror  
	</div>
</div>

Inside the render method, fetch the subcategories according to the selected category:

public function render()
{
	$categories = Category::all();
	$scategories = Subcategory::where('category_id',$this->category_id)->get();
	return view('livewire.admin.admin-edit-product-component',['categories'=>$categories,'scategories'=>$scategories])->layout('layouts.base');
}

Now, let's test the functionality. Switch to the browser and refresh the page. Edit any product, change the category, and set a subcategory. Click submit and see the `product has been updated` message.

Check the subcategory to see the updated product.

By following these steps, you can add a subcategory on the add and edit product pages.