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.