In this video we are going to learn about Add Subcategory On Add and Edit Product Page.
So lets see how can we Add Subcategory On Add and Edit Product Page.
Switch to the project lets open the AddProductComponent class file and here lets create a property.

public $scategory_id;


Now inside the addProduct method add the following code.

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


Now inside the render method lets fetch the subcategories according the 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');
}


Now go to the add-product-component.blade.php view file.
Inside this file after category select control lets add the the select control for sub category.

<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>

Now go to the AddProductComponent.php class file and create a funciton here like following.


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


Now call this function from here on change event in category select control so write the as following.

<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 its done so lets check this.
So switch to the browser and refresh the page.
Now lets add a new product.
So write here.
Product name and all details.
Now select the category.
and also set here the subcategory.
Now click and submit and here you see the message product added.
Now go to shop page an lets click on this sub category.
and here you see the newly created product.
Alright, now lets add subcategory on edit product page.
So switch to project and lets open the EditProduct component view file and here lets add the 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>


Now go to the Edit Product Component class file and lets create a property here.

public $scategory_id;


Now inside the mount method here just write.


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


Now inside the updateProduct method here add the if condition.

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


Now here lets create a function as following.

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

Now call this function from here on change event in category select control so write the as following.

<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 go to the class file inside the render method.
Lets fetch the subcategories according to the selected category so write the following code.

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 its done so lets check it.
Switch to the browser and refresh the page.
Now edit any product and lest change the category and set subcategory.
Now click on submit.
Product has been updated.
Now lets check so from this category lets open the subcategory.
and here you can see the product.
So in this way you can Add Subcategory On Add and Edit Product Page.