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 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');
}
}
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 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');
}
}
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.
