Laravel 8 E-Commerce - Admin Edit Category

In this video, we will learn about how to edit a category.

Let's see how we can edit a product category. First, we need to create a new Livewire component for editing the category.

Switch to the command prompt and run the command:

php artisan make:livewire admin/AdminEditCategoryComponent

Next, switch to the project and create a route for the AdminEditCategoryComponent. Open the web.php file and add the following route:

Route::get('/admin/category/edit/{category_slug}',AdminEditCategoryComponent::class)->name('admin.editcategory');

Now, open the AdminEditCategoryComponent.php Class File and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsCategory;
use LivewireComponent;
use IlluminateSupportStr;
class AdminEditCategoryComponent extends Component
{
    public $category_slug;
    public $category_id;
    public $name;
    public $slug;
    public function mount($category_slug)
    {
        $this->category_slug = $category_slug;
        $category = Category::where('slug',$category_slug)->first();
        $this->category_id = $category->id;
        $this->name = $category->name;
        $this->slug = $category->slug;
    }
    public function generateslug()
    {
        $this->slug = Str::slug($this->name);
    }
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name' => 'required',
            'slug' => 'required|unique:categories'
        ]);
    }
    public function updateCategory()
    {
        $this->validate([
            'name' => 'required',
            'slug' => 'required|unique:categories'
        ]);
        $category = Category::find($this->category_id);
        $category->name = $this->name;
        $category->slug = $this->slug;
        $category->save();
        session()->flash('message','Category has been updated successfully!');
    }
    public function render()
    {
        return view('livewire.admin.admin-edit-category-component')->layout('layouts.base');
    }
}

Open the admin-category-component.blade.php view file and add the following code:

<div>
    <div class=`container` style=`padding: 30px 0;`>
        <div class=`row`>
            <div class=`col-md-12`>
                <div class=`panel panel-default`>
                    <div class=`panel-heading`>
                        <div class=`row`>
                            <div class=`col-md-6`>
                                Edit Category
                            </div>
                            <div class=`col-md-6`>
                                <a href=`{{route('admin.categories')}}` class=`btn btn-success pull-right`>All Category</a>
                            </div>
                        </div>
                    </div>
                    <div class=`panel-body`>
                        @if(Session::has('message'))
                            <div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
                        @endif
                        <form class=`form-horizontal` wire:submit.prevent=`updateCategory`>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Category Name</label>
                                <div class=`col-md-4`>
                                    <input type=`text` placeholder=`Category Name` class=`form-control input-md` wire:model=`name` wire:keyup=`generateslug` />
                                    @error('name')  <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Category Slug</label>
                                <div class=`col-md-4`>
                                    <input type=`text` placeholder=`Category Slug` class=`form-control input-md` wire:model=`slug` />
                                    @error('slug')  <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`></label>
                                <div class=`col-md-4`>
                                    <button type=`submit` class=`btn btn-primary`>Update</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now, it's done. Let's check it. Switch to the browser and edit any category.

Change the category details and click on submit. You will see the message `Category updated`.

So, in this way, you can update a product category. That's all about editing a category.