In this video we are going to learn about how to Add New Product.
So let see how can we add new Product.
First of all lets create a new livewire component for adding new product.
So switch to the command prompt and for creating the new livewire component run the command.
Now switch to the project and lets create the route for the AdminAddProductComponent.
So open web.php file and inside this admin route group add the route.
Now open the AdminAddProductCompoent.php class File and write the following code.
Now lets open the admin-add-product-component.blade.php view file and write the following code.
For configuring the image directory go inside the config directory then open filesystem.php.
Inside disk array in local set the root path as following.
In last open the Admin ProductCompoenent view file and inside the header add the add product link.
Alright now all done so lets check it.
So switch to the browser and refresh the page.
Now open you can see here the add product link.
Now click on it.
You can see the form.
Now enter the product details.
Now select the product image.
You can see here the select image.
Now click on submit.
And here you see the success message product has been added successfully.
Now go to the all products page and now click on next here you can see the newly added product.
You can also check the product on shop page.
So for that go the shop page here lets change the page size and.
In last you can see the newly created product.
So in this way you can add the product. so that's all about Add New Product.
So let see how can we add new Product.
First of all lets create a new livewire component for adding new product.
So switch to the command prompt and for creating the new livewire component run the command.
php artisan make:livewire admin/AdminAddProductComponent
Now switch to the project and lets create the route for the AdminAddProductComponent.
So open web.php file and inside this admin route group add the route.
Route::get('/admin/product/add',AdminAddProductComponent::class)->name('admin.addproduct');
Now open the AdminAddProductCompoent.php class File and write the following code.
<?php
namespace App\\Http\\Livewire\\Admin;
use App\\Models\\Category;
use App\\Models\\Product;
use Carbon\\Carbon;
use Livewire\\Component;
use Illuminate\\Support\\Str;
use Livewire\\WithFileUploads;
class AdminAddProductComponent 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 $images;
public function mount()
{
$this->stock_status = 'instock';
$this->featured = 0;
}
public function generateSlug()
{
$this->slug = Str::slug($this->name,'-');
}
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required|unique:products',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'image' => 'required|mimes:jpeg,png',
'category_id' => 'required'
]);
}
public function addProduct()
{
$this->validate([
'name' => 'required',
'slug' => 'required|unique:products',
'short_description' => 'required',
'description' => 'required',
'regular_price' => 'required|numeric',
'sale_price' => 'numeric',
'SKU' => 'required',
'stock_status' => 'required',
'quantity' => 'required|numeric',
'image' => 'required|mimes:jpeg,png',
'category_id' => 'required'
]);
$product = new Product();
$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;
$imageName = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('products',$imageName);
$product->image = $imageName;
if($this->images)
{
$imagesname = '';
foreach($this->images 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 created successfully!');
}
public function render()
{
$categories = Category::all();
return view('livewire.admin.admin-add-product-component',['categories'=>$categories])->layout('layouts.base');
}
}
Now lets open the admin-add-product-component.blade.php view file and write 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 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=\"addProduct\">
<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=\"image\" />
@if($image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"120\" />
@endif
@error('image') <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=\"images\" multiple />
@if($images)
@foreach($images as $image)
<img src=\"{{$image->temporaryUrl()}}\" width=\"120\" />
@endforeach
@endif
@error('images') <p class=\"text-danger\">{{$message}}</p> @enderror
</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\">Submit</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
For configuring the image directory go inside the config directory then open filesystem.php.
Inside disk array in local set the root path as following.
'disks' => [
'local' => [
'driver' => 'local',
//'root' => storage_path('app'),
'root' => public_path('assets/images'),
],
In last open the Admin ProductCompoenent view file and inside the header add the add product link.
<div class=\"panel-heading\">
<div class=\"row\">
<div class=\"col-md-6\">
All Products
</div>
<div class=\"col-md-6\">
<a href=\"{{route('admin.addproduct')}}\" class=\"btn btn-success pull-right\">Add New</a>
</div>
</div>
</div>
Alright now all done so lets check it.
So switch to the browser and refresh the page.
Now open you can see here the add product link.
Now click on it.
You can see the form.
Now enter the product details.
Now select the product image.
You can see here the select image.
Now click on submit.
And here you see the success message product has been added successfully.
Now go to the all products page and now click on next here you can see the newly added product.
You can also check the product on shop page.
So for that go the shop page here lets change the page size and.
In last you can see the newly created product.
So in this way you can add the product. so that's all about Add New Product.
