Laravel E-Commerce Project - Create Product Attributes
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.