In this video we are going to learn about how to Edit Product.
So let see how can we edit the product.
So first of all lets create the new livewire component.
So switch to the command prompt and for creating the livewire component run the command.
Now lets create the route for this component.
For that open the web.php file and inside the admin route group add the route.
Now open the AdminEditProductComponent.php Class File and lets add the the following code.
Now go to admin-add-product-component.blade.php View File and add the following code.
Now open the admin-product-component.blade.php view file and inside the table add the edit link.
Now all done so lets check it.
So switch to browser and refresh the page.
Now you can see here the edit link.
Now click on this edit link.
And here you can see the edit page.
Now lets change any thing in this product.
Lets change the price, category and image.
Now click on update.
And here you can see the product has been updated message.
Lets go to the products page.
Here you can see updated product.
So in this way you can update product.
So let see how can we edit the product.
So first of all lets create the new livewire component.
So switch to the command prompt and for creating the livewire component run the command.
php artisan make:livewire admin/AdminEditProductComponent
Now lets create the route for this component.
For that 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 lets add the 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');
}
}
Now go to 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
Now 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 all done so lets check it.
So switch to browser and refresh the page.
Now you can see here the edit link.
Now click on this edit link.
And here you can see the edit page.
Now lets change any thing in this product.
Lets change the price, category and image.
Now click on update.
And here you can see the product has been updated message.
Lets go to the products page.
Here you can see updated product.
So in this way you can update product.
