In this video, we will learn how to create product attributes.

Let's start by creating a model and migration for product attributes. Open the command prompt and run the following command:

php artisan make:model ProductAttribute –m

Next, switch to the project and open the migration file. Go to the database directory and open the create_product_attribute_migration file. Add the following column:

public function up()
{
    Schema::create('product_attributes', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

Save the changes and migrate the migration:

php artisan migrate

Create three Livewire components:

php artisan make:livewire admin/AdminAttributesComponent
php artisan make:livewire admin/AdminAddAttributeComponent
php artisan make:livewire admin/AdminEditAttributeComponent

Run the application:

php artisan serve

Open the web.php file and create routes for these components:

Route::get('/admin/attributes',AdminAttributesComponent::class)->name('admin.attributes');
Route::get('/admin/attribute/add',AdminAddAttributeComponent::class)->name('admin.add_attribute');
Route::get('/admin/attribute/edit/{attribute_id}',AdminEditAttributeComponent::class)->name('admin.edit_attribute');

Open each component class file and add the layout. For example, open the AdminAttributesComponent class file and add layout('layouts.base');.

Open the admin-attributes-component.blade.php view file and remove the unnecessary div. Open the admin-category-component.blade.php view file, copy the content, and paste it into the admin-attributes-component.blade.php file. Make the following changes:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
        .sclist{
            list-style: none;
        }
        .sclist li{
            line-height: 33px;
            border-bottom: 1px solid #ccc;
        }
        .slink i{
            font-size:16px;
            margin-left:12px;
        }
    </style>
    <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`>
                                All Attributes
                            </div>
                            <div class=`col-md-6`>
                                <a href=`{{route('admin.add_attribute')}}` class=`btn btn-success pull-right`>Add New</a>
                            </div>
                        </div>
                    </div>
                    <div class=`panel-body`>
                        @if(Session::has('message'))
                            <div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
                        @endif
                        <table class=`table table-striped`>
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Created At</th>                                    
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($pattributes as $pattribute)
                                    <tr>
                                        <td>{{$pattribute->id}}</td>
                                        <td>{{$pattribute->name}}</td>
                                        <td>{{$pattribute->created_at}}</td>                                       
                                        <td>
                                            <a href=`{{route('admin.edit_attribute',['attribute_id'=>$pattribute->id])}}`><i class=`fa fa-edit fa-2x`></i></a>
                                            <a href=`#` onclick=`confirm('Are you sure, You want to delete this category?') || event.stopImmediatePropagation()` wire:click.prevent=`deleteAttribute({{$pattribute->id}})` style=`margin-left:10px; `><i class=`fa fa-times fa-2x text-danger`></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$pattributes->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Open the AdminAttributesComponent class file and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsProductAttribute;
use LivewireComponent;
class AdminAttributesComponent extends Component
{
    public function deleteAttribute($attribute_id)
    {
        $pattribute = ProductAttribute::find($attribute_id);
        $pattribute->delete();
        session()->flash('message','Attribute has been deleted successfully!');
    }
    public function render()
    {
        $pattributes = ProductAttribute::paginate(10);
        return view('livewire.admin.admin-attributes-component',['pattributes'=>$pattributes])->layout('layouts.base');
    }
}

Open the admin-add-attribute-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`>
                                Add New Attribute
                            </div>
                            <div class=`col-md-6`>
                                <a href=`{{route('admin.attributes')}}` class=`btn btn-success pull-right`>All Attribute</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=`storeAttribute`>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Attribute Name</label>
                                <div class=`col-md-4`>
                                    <input type=`text` placeholder=`Attribute Name` class=`form-control input-md` wire:model=`name` />                                    
                                    @error('name')  <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`>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Open the AddAttributeCompoent.php class file and add the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsProductAttribute;
use LivewireComponent;
class AdminAddAttributeComponent extends Component
{
    public $name;
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            `name` => `required`
        ]);
    }
    public function storeAttribute()
    {
        $this->validate([
            `name` => `required`
        ]);
        $pattribute = new ProductAttribute();
        $pattribute->name = $this->name;
        $pattribute->save();
        session()->flash('message','Attribute has been created successfully!');
    }
    public function render()
    {
        return view('livewire.admin.admin-add-attribute-component')->layout('layouts.base');
    }
}

That's it! Let's test the functionality. Switch to the browser and refresh the page. Go to the admin menu and open the attributes section.

Add a new attribute by clicking on the `Add` button. Enter the attribute name, such as `Colour`, and click on submit. The attribute should be added successfully.

Repeat the process to add another attribute, such as `Size`.

View the attributes by clicking on the `Attributes` link. You should see the list of attributes.

Test the edit functionality by clicking on the `Edit` link. Change the attribute name and click on update. The attribute should be updated successfully.

Test the delete functionality by clicking on the `Delete` link. Confirm the deletion and the attribute should be deleted.

By following these steps, you can create product attributes.