In this video we are going to learn about Create Product Attributes.
So let see how can we Create Product Attributes.
First of all lets create a model and migration for product attributes.
In command prompt and run the command
Now switch to the project and lets open the migration
So just go inside the database directory and then open the migration.
From here lets open create_product_attribute_migration and here add the column
Now save this and lets migrate this migration
Now lets create three livewire component
Now run the application
Now go to the web.php file and lets create the routes for these components.
Now lets open the these component class file one by one add the layout
So go inside the app directory then open AdminAttributesComponent Class
file add layout('layouts.base');
Now go to the admin-attributes-component.blade.php view file and here lets remove this div
Now lets open admin-category-component.blade.php view file
And from here lets copy all the text and paste inside the this view file.
Now lets make some changes as following.
Now go to the AdminAttributesComponent class file and add the following code
Now lets open the admin-add-attribute-component.blade.php view file and add the following code.
Now open the AddAttributeCompoent.php class file and add the following code
Now all done, so lets check so switch to the browser and refresh the page.
Now go to the admin menu and lets open the attributes
and now lets add a new attribute so click here
Now enter the attribute name Colour and click on submit
Attribute added, now add one more attribute so write here Size
Now lets see the attributes so click here
And you can see there the attributes, now lets check the edit so click here, now change the name
Suitable For now click on update and you can attribute updated
Now lets check this delete link so click here
Now click on ok and you can see here the attribute has been deleted.
So in this way you can Create Product Attributes.
So let see how can we Create Product Attributes.
First of all lets create a model and migration for product attributes.
In command prompt and run the command
php artisan make:model ProductAttribute –m
Now switch to the project and lets open the migration
So just go inside the database directory and then open the migration.
From here lets open create_product_attribute_migration and here add the column
public function up()
{
Schema::create('product_attributes', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
Now save this and lets migrate this migration
php artisan migrate
Now lets create three livewire component
php artisan make:livewire admin/AdminAttributesComponent
php artisan make:livewire admin/AdminAddAttributeComponent
php artisan make:livewire admin/AdminEditAttributeComponent
Now run the application
php artisan serve
Now go to the web.php file and lets create the 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');
Now lets open the these component class file one by one add the layout
So go inside the app directory then open AdminAttributesComponent Class
file add layout('layouts.base');
Now go to the admin-attributes-component.blade.php view file and here lets remove this div
Now lets open admin-category-component.blade.php view file
And from here lets copy all the text and paste inside the this view file.
Now lets make some changes as following.
<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="containern" 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>
Now go to the AdminAttributesComponent class file and add the following code
<?php
namespace App\Http\Livewire\Admin;
use App\Models\ProductAttribute;
use Livewire\Component;
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');
}
}
Now lets open the admin-add-attribute-component.blade.php view file and add the following code.
<div>
<div class="containern" 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>
Now open the AddAttributeCompoent.php class file and add the following code
<?php
namespace App\Http\Livewire\Admin;
use App\Models\ProductAttribute;
use Livewire\Component;
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');
}
}
Now all done, so lets check so switch to the browser and refresh the page.
Now go to the admin menu and lets open the attributes
and now lets add a new attribute so click here
Now enter the attribute name Colour and click on submit
Attribute added, now add one more attribute so write here Size
Now lets see the attributes so click here
And you can see there the attributes, now lets check the edit so click here, now change the name
Suitable For now click on update and you can attribute updated
Now lets check this delete link so click here
Now click on ok and you can see here the attribute has been deleted.
So in this way you can Create Product Attributes.
