Laravel 8 E-Commerce - Admin Edit Product
In this video, we will learn about how to edit a product.
Let's see how we can edit a product. First, we need to create a new Livewire component.
Switch to the command prompt and run the command:
php artisan make:livewire admin/AdminEditProductComponent
Next, we need to create a route for this component. Open the web.php file and, inside the admin route group, add the route:
Route::get('/admin/product/edit/{product_slug}',AdminEditProductComponent::class)->name('admin.editproduct');
Now, open the AdminEditProductComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Category;
use App\Models\Product;
use Livewire\Component;
use Illuminate\Support\Str;
use Carbon\Carbon;
use Livewire\WithFileUploads;
class AdminEditProductComponent extends Component
{
use WithFileUploads;
public $name;
public $slug;
public $short_description;
public $description;
public $regular_price;
public $sale_price;
public $SKU;
public $stock_status;
public $featured;
public $quantity;
public $image;
public $category_id;
public $newimage;
public $product_id;
public $images;
public $newimages;
public function mount($product_slug)
{
$product = Product::where('slug',$product_slug)->first();
$this->name = $product->name;
$this->slug = $product->slug;
$this->short_description = $product->short_description;
$this->description = $product->description;
$this->regular_price = $product->regular_price;
$this->sale_price = $product->sale_price;
$this->SKU = $product->SKU;
$this->stock_status = $product->stock_status;
$this->featured = $product->featured;
$this->quantity = $product->quantity;
$this->image = $product->image;
$this->images = explode(",",$product->images);
$this->category_id = $product->category_id;
$this->product_id = $product->id;
}
public function generateSlug()
{
$this->slug = Str::slug($this->name,'-');
}
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'category_id' => 'required'
]);
if($this->newimage)
{
$this->validateOnly($fields,[
'newimage' => 'required|mimes:jpeg,png'
]);
}
}
public function updateProduct()
{
$this->validate([
'name' => 'required',
'slug' => 'required',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'category_id' => 'required'
]);
if($this->newimage)
{
$this->validate([
'newimage' => 'required|mimes:jpeg,png'
]);
}
$product = Product::find($this->product_id);
$product->name = $this->name;
$product->slug = $this->slug;
$product->short_description = $this->short_description;
$product->description = $this->description;
$product->regular_price = $this->regular_price;
$product->sale_price = $this->sale_price;
$product->SKU = $this->SKU;
$product->stock_status = $this->stock_status;
$product->featured = $this->featured;
$product->quantity = $this->quantity;
if($this->newimage)
{
unlink('assets/images/products'.'/'.$product->image);
$imageName = Carbon::now()->timestamp. '.' . $this->newimage->extension();
$this->newimage->storeAs('products',$imageName);
$product->image = $imageName;
}
if($this->newimages)
{
if($product->images)
{
$images = explode(",",$product->images);
foreach($images as $image)
{
if($image)
{
unlink('assets/images/products'.'/'.$image);
}
}
}
$imagesname ='';
foreach($this->newimages as $key=>$image)
{
$imgName = Carbon::now()->timestamp . $key . '.' . $image->extension();
$image->storeAs('products',$imgName);
$imagesname = $imagesname . ',' . $imgName;
}
$product->images = $imagesname;
}
$product->category_id = $this->category_id;
$product->save();
session()->flash('message','Product has been updated successfully!');
}
public function render()
{
$categories = Category::all();
return view('livewire.admin.admin-edit-product-component',['categories'=>$categories])->layout('layouts.base');
}
}
Go to the admin-add-product-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 Product
</div>
<div class="col-md-6">
<a href="{{route('admin.products')}}" class="btn btn-success pull-right">All Products</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" enctype="multipart/form-data" wire:submit.prevent="updateProduct">
<div class="form-group">
<label class="col-md-4 control-label">Product Name</label>
<div class="col-md-4">
<input type="text" placeholder="Product 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">Product Slug</label>
<div class="col-md-4">
<input type="text" placeholder="Product 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">Short Description</label>
<div class="col-md-4" wire:ignore>
<textarea class="form-control" id="short_description" placeholder="Short Description" wire:model="short_description"></textarea>
@error('short_description') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Description</label>
<div class="col-md-4" wire:ignore>
<textarea class="form-control" id="description" placeholder="Description" wire:model="description"></textarea>
@error('description') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Regular Price</label>
<div class="col-md-4">
<input type="text" placeholder="Regular Price" class="form-control input-md" wire:model="regular_price"/>
@error('regular_price') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Sale Price</label>
<div class="col-md-4">
<input type="text" placeholder="Sale Price" class="form-control input-md" wire:model="sale_price" />
@error('sale_price') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">SKU</label>
<div class="col-md-4">
<input type="text" placeholder="SKU" class="form-control input-md" wire:model="SKU" />
@error('SKU') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Stock</label>
<div class="col-md-4">
<select class="form-control" wire:model="stock_status">
<option value="instock">InStock</option>
<option value="outofstock">Out of Stock</option>
</select>
@error('stock_status') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Featured</label>
<div class="col-md-4">
<select class="form-control" wire:model="featured">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Quantity</label>
<div class="col-md-4">
<input type="text" placeholder="Quantity" class="form-control input-md" wire:model="quantity"/>
@error('quantity') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Product Image</label>
<div class="col-md-4">
<input type="file" class="input-file" wire:model="newimage" />
@if($newimage)
<img src="{{$newimage->temporaryUrl()}}" width="120" />
@else
<img src="{{asset('assets/images/products')}}/{{$image}}" width="120" />
@endif
@error('newimage') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Product Gallery</label>
<div class="col-md-4">
<input type="file" class="input-file" wire:model="newimages" multiple />
@if($newimages)
@foreach($newimages as $newimage)
@if($newimage)
<img src="{{$newimage->temporaryUrl()}}" width="120" />
@endif
@endforeach
@else
@foreach($images as $image)
@if($image)
<img src="{{asset('assets/images/products')}}/{{$image}}" width="120" />
@endif
@endforeach
@endif
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Category</label>
<div class="col-md-4">
<select class="form-control" wire:model="category_id">
<option value="">Select Category</option>
@foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
@endforeach
</select>
@error('category_id') <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>
@push('scripts')
<script>
$(function(){
tinymce.init({
selector:'#short_description',
setup:function(editor){
editor.on('Change',function(e){
tinyMCE.triggerSave();
var sd_data = $('#short_description').val();
@this.set('short_description',sd_data);
});
}
});
tinymce.init({
selector:'#description',
setup:function(editor){
editor.on('Change',function(e){
tinyMCE.triggerSave();
var d_data = $('#description').val();
@this.set('description',d_data);
});
}
});
});
</script>
@endpush
Open the admin-product-component.blade.php view file and, inside the table, add the edit link:
<a href="{{route('admin.editproduct',['product_slug'=>$product->slug])}}"><i class="fa fa-edit fa-2x text-info"></i></a>
Now, everything is set up. Let's check it. Switch to the browser and refresh the page.
You can see the edit link. Click on this edit link, and you will see the edit page. Make any changes to the product, such as changing the price, category, and image.
Click on update, and you will see a message indicating that the product has been updated. Go to the products page, and you will see the updated product.
So, in this way, you can edit a product.
