In this video, we will learn about how to add a new product.

Let's see how we can add a new product. First, we need to create a new Livewire component for adding a new product.

Switch to the command prompt and run the command:

php artisan make:livewire admin/AdminAddProductComponent

Next, switch to the project and create a route for the AdminAddProductComponent. Open the web.php file and, inside the admin route group, add the route:

Route::get('/admin/product/add',AdminAddProductComponent::class)->name('admin.addproduct');

Now, open the AdminAddProductComponent.php class file and write the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsCategory;
use AppModelsProduct;
use CarbonCarbon;
use LivewireComponent;
use IlluminateSupportStr;
use LivewireWithFileUploads;
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');
    }
}

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

To configure the image directory, go to the config directory and open the filesystem.php file. Inside the disk array, set the root path as follows:

 'disks' => [
        'local' => [
            'driver' => 'local',
            //'root' => storage_path('app'),            
            'root' => public_path('assets/images'),
        ],

Finally, open the Admin ProductComponent view file and add the `Add Product` link to the header:

<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>

Now, everything is set up. Let's check it. Switch to the browser and refresh the page.

You can see the `Add Product` link. Click on it, and you will see the form. Enter the product details, select the product image, and click on submit.

You will see a success message indicating that the product has been added successfully. Go to the `All Products` page, and you will see the newly added product. You can also check the product on the shop page.

So, in this way, you can add a new product. That's all about adding a new product.