In this video we are going to learn about Search Products
So let see how can we make working this search box.
So first of all lets create a component for search box
So switch to the command prompt and for creating a livewire component just run the command

php artisan make:livewire HeaderSearchComponent

Now Switch to the project and open base.blade.php layout file
Now inside this layout file lets find the search form and select the search form and cut this.
Now go to the header-search-component.blade.php view file and paste here.

<div class=\"wrap-search center-section\">
    <div class=\"wrap-search-form\">
        <form action=\"{{route('product.search')}}\" id=\"form-search-top\" name=\"form-search-top\">
            <input type=\"text\" name=\"search\" value=\"{{$search}}\" placeholder=\"Search here...\">
            <button form=\"form-search-top\" type=\"submit\"><i class=\"fa fa-search\" aria-hidden=\"true\"></i></button>
            <div class=\"wrap-list-cate\">
                <input type=\"hidden\" name=\"product_cat\" value=\"{{$product_cat}}\" id=\"product-cate\">
                <input type=\"hidden\" name=\"product_cat_id\" value=\"{{$product_cat_id}}\" id=\"product-cate-id\">
                <a href=\"#\" class=\"link-control\">{{str_split($product_cat,12)[0]}}</a>
                <ul class=\"list-cate\">
                    <li class=\"level-0\">All Category</li>
                    @foreach ($categories as $category)
                        <li class=\"level-1\" data-id=\"{{$category->id}}\">{{$category->name}}</li>    
                    @endforeach                    
                </ul>
            </div>
        </form>
    </div>
</div>

Inside the base.blade.php file render the HeaderSearchComponent in place of search form.
For rendering the component add the following code.

@livewire('header-search-component')

Now open HeaderSearchComponent.php Class file and write the following code.

<?php

namespace App\\Http\\Livewire;

use App\\Models\\Category;
use Livewire\\Component;

class HeaderSearchComponent extends Component
{
    public $search;
    public $product_cat;
    public $product_cat_id;

    public function mount()
    {
        $this->product_cat = 'All Category';
        $this->fill(request()->only('search','product_cat','product_cat_id'));
    }

    public function render()
    {
        $categories = Category::all();
        return view('livewire.header-search-component',['categories'=>$categories]);
    }
}

Now lets create one more livewire component for search result.
So go to the command prompt and for creating the livewire component use the command.

php artisan make:livewire SearchComponent

Now switch to the project and lets create the route for the SearchComponent.
For creating the route open web.php file and lets create the route.

Route::get('/search',SearchComponent::class)->name('product.search'); 

Now open SearchComponent.php Class File and write the following code.

<?php

namespace App\\Http\\Livewire;

use App\\Models\\Product;
use Livewire\\Component;
use Livewire\\WithPagination;
use Cart;
use App\\Models\\Category;

class SearchComponent extends Component
{
    public $sorting;
    public $pagesize;
    public $search;
    public $product_cat;
    public $product_cat_id;

    public function mount()
    {
        $this->sorting = \"default\";
        $this->pagesize = 12;
        $this->fill(request()->only('search','product_cat','product_cat_id'));
    }

    public function store($product_id,$product_name,$product_price)
    {
        Cart::add($product_id,$product_name,1,$product_price)->associate('App\\Models\\Product');
        session()->flash('success_message','Item added in Cart');
        return redirect()->route('product.cart');
    }

    use WithPagination;
    public function render()
    {  
        if($this->sorting=='date')   
        {
            $products = Product::where('name','like','%'.$this->search .'%')->where('category_id','like','%'.$this->product_cat_id.'%')->orderBy('created_at','DESC')->paginate($this->pagesize);  
        }
        else if($this->sorting==\"price\")
        {
            $products = Product::where('name','like','%'.$this->search .'%')->where('category_id','like','%'.$this->product_cat_id.'%')->orderBy('regular_price','ASC')->paginate($this->pagesize); 
        }
        else if($this->sorting==\"price-desc\")
        {
            $products = Product::where('name','like','%'.$this->search .'%')->where('category_id','like','%'.$this->product_cat_id.'%')->orderBy('regular_price','DESC')->paginate($this->pagesize); 
        }
        else{
            $products = Product::where('name','like','%'.$this->search .'%')->where('category_id','like','%'.$this->product_cat_id.'%')->paginate($this->pagesize);  
        }   
        
        $categories = Category::all();
        
        return view('livewire.search-component',['products'=> $products,'categories'=>$categories])->layout(\"layouts.base\");
    }
}

Now go to the search-component.blade.php view file and add following code.

<main id=\"main\" class=\"main-site left-sidebar\">
    <div class=\"container\">
        <div class=\"wrap-breadcrumb\">
            <ul>
                <li class=\"item-link\"><a href=\"#\" class=\"link\">home</a></li>
                <li class=\"item-link\"><span>Digital & Electronics</span></li>
            </ul>
        </div>
        <div class=\"row\">
            <div class=\"col-lg-9 col-md-8 col-sm-8 col-xs-12 main-content-area\">
                <div class=\"banner-shop\">
                    <a href=\"#\" class=\"banner-link\">
                        <figure><img src=\"{{ asset('assets/images/shop-banner.jpg') }}\" alt=\"\"></figure>
                    </a>
                </div>
                <div class=\"wrap-shop-control\">
                    <h1 class=\"shop-title\">Digital & Electronics</h1>
                    <div class=\"wrap-right\">
                        <div class=\"sort-item orderby \">
                            <select name=\"orderby\" class=\"use-chosen\" wire:model=\"sorting\">
                                <option value=\"default\" selected=\"selected\">Default sorting</option>                               
                                <option value=\"date\">Sort by newness</option>
                                <option value=\"price\">Sort by price: low to high</option>
                                <option value=\"price-desc\">Sort by price: high to low</option>
                            </select>
                        </div>

                        <div class=\"sort-item product-per-page\">
                            <select name=\"post-per-page\" class=\"use-chosen\" wire:model=\"pagesize\" >
                                <option value=\"12\" selected=\"selected\">12 per page</option>
                                <option value=\"16\">16 per page</option>
                                <option value=\"18\">18 per page</option>
                                <option value=\"21\">21 per page</option>
                                <option value=\"24\">24 per page</option>
                                <option value=\"30\">30 per page</option>
                                <option value=\"32\">32 per page</option>
                            </select>
                        </div>

                        <div class=\"change-display-mode\">
                            <a href=\"#\" class=\"grid-mode display-mode active\"><i class=\"fa fa-th\"></i>Grid</a>
                            <a href=\"list.html\" class=\"list-mode display-mode\"><i class=\"fa fa-th-list\"></i>List</a>
                        </div>
                    </div>

                </div><!--end wrap shop control-->
                @if($products->count()>0)
                <div class=\"row\">

                    <ul class=\"product-list grid-products equal-container\">
                        @foreach ($products as $product)
                        <li class=\"col-lg-4 col-md-6 col-sm-6 col-xs-6 \">
                            <div class=\"product product-style-3 equal-elem \">
                                <div class=\"product-thumnail\">
                                    <a href=\"{{route('product.details',['slug'=>$product->slug])}}\" title=\"{{$product->name}}\">
                                        <figure><img src=\"{{ asset('assets/images/products') }}/{{$product->image}}\" alt=\"{{$product->name}}\"></figure>
                                    </a>
                                </div>
                                <div class=\"product-info\">
                                    <a href=\"{{route('product.details',['slug'=>$product->slug])}}\" class=\"product-name\"><span>{{$product->name}}</span></a>
                                    <div class=\"wrap-price\"><span class=\"product-price\">${{$product->regular_price}}</span></div>
                                    <a href=\"#\" class=\"btn add-to-cart\" wire:click.prevent=\"store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})\">Add To Cart</a>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @else
                    <p style=\"padding-top:30px;\">No Products</p>
                @endif
                <div class=\"wrap-pagination-info\">
                    {{$products->links()}}
                    {{-- <ul class=\"page-numbers\">
                        <li><span class=\"page-number-item current\" >1</span></li>
                        <li><a class=\"page-number-item\" href=\"#\" >2</a></li>
                        <li><a class=\"page-number-item\" href=\"#\" >3</a></li>
                        <li><a class=\"page-number-item next-link\" href=\"#\" >Next</a></li>
                    </ul>
                    <p class=\"result-count\">Showing 1-8 of 12 result</p> --}}
                </div>
            </div><!--end main products area-->

            <div class=\"col-lg-3 col-md-4 col-sm-4 col-xs-12 sitebar\">
                <div class=\"widget mercado-widget categories-widget\">
                    <h2 class=\"widget-title\">All Categories</h2>
                    <div class=\"widget-content\">
                        <ul class=\"list-category\">
                            @foreach ($categories as $category)
                            <li class=\"category-item\">
                                <a href=\"{{route('product.category',['category_slug'=>$category->slug])}}\" class=\"cate-link\">{{$category->name}}</a>
                            </li> 
                            @endforeach
                        </ul>
                    </div>
                </div><!-- Categories widget-->

                <div class=\"widget mercado-widget filter-widget brand-widget\">
                    <h2 class=\"widget-title\">Brand</h2>
                    <div class=\"widget-content\">
                        <ul class=\"list-style vertical-list list-limited\" data-show=\"6\">
                            <li class=\"list-item\"><a class=\"filter-link active\" href=\"#\">Fashion Clothings</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Laptop Batteries</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Printer & Ink</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">CPUs & Prosecsors</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Sound & Speaker</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Shop Smartphone & Tablets</a></li>
                            <li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Printer & Ink</a></li>
                            <li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">CPUs & Prosecsors</a></li>
                            <li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Sound & Speaker</a></li>
                            <li class=\"list-item default-hiden\"><a class=\"filter-link \" href=\"#\">Shop Smartphone & Tablets</a></li>
                            <li class=\"list-item\"><a data-label='Show less<i class=\"fa fa-angle-up\" aria-hidden=\"true\"></i>' class=\"btn-control control-show-more\" href=\"#\">Show more<i class=\"fa fa-angle-down\" aria-hidden=\"true\"></i></a></li>
                        </ul>
                    </div>
                </div><!-- brand widget-->

                <div class=\"widget mercado-widget filter-widget price-filter\">
                    <h2 class=\"widget-title\">Price</h2>
                    <div class=\"widget-content\">
                        <div id=\"slider-range\"></div>
                        <p>
                            <label for=\"amount\">Price:</label>
                            <input type=\"text\" id=\"amount\" readonly>
                            <button class=\"filter-submit\">Filter</button>
                        </p>
                    </div>
                </div><!-- Price-->

                <div class=\"widget mercado-widget filter-widget\">
                    <h2 class=\"widget-title\">Color</h2>
                    <div class=\"widget-content\">
                        <ul class=\"list-style vertical-list has-count-index\">
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Red <span>(217)</span></a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Yellow <span>(179)</span></a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Black <span>(79)</span></a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Blue <span>(283)</span></a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Grey <span>(116)</span></a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">Pink <span>(29)</span></a></li>
                        </ul>
                    </div>
                </div><!-- Color -->

                <div class=\"widget mercado-widget filter-widget\">
                    <h2 class=\"widget-title\">Size</h2>
                    <div class=\"widget-content\">
                        <ul class=\"list-style inline-round \">
                            <li class=\"list-item\"><a class=\"filter-link active\" href=\"#\">s</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">M</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">l</a></li>
                            <li class=\"list-item\"><a class=\"filter-link \" href=\"#\">xl</a></li>
                        </ul>
                        <div class=\"widget-banner\">
                            <figure><img src=\"{{ asset('assets/images/size-banner-widget.jpg') }}\" width=\"270\" height=\"331\" alt=\"\"></figure>
                        </div>
                    </div>
                </div><!-- Size -->

                <div class=\"widget mercado-widget widget-product\">
                    <h2 class=\"widget-title\">Popular Products</h2>
                    <div class=\"widget-content\">
                        <ul class=\"products\">
                            <li class=\"product-item\">
                                <div class=\"product product-widget-style\">
                                    <div class=\"thumbnnail\">
                                        <a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
                                            <figure><img src=\"{{ asset('assets/images/products/digital_01.jpg') }}\" alt=\"\"></figure>
                                        </a>
                                    </div>
                                    <div class=\"product-info\">
                                        <a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
                                        <div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
                                    </div>
                                </div>
                            </li>

                            <li class=\"product-item\">
                                <div class=\"product product-widget-style\">
                                    <div class=\"thumbnnail\">
                                        <a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
                                            <figure><img src=\"{{ asset('assets/images/products/digital_17.jpg') }}\" alt=\"\"></figure>
                                        </a>
                                    </div>
                                    <div class=\"product-info\">
                                        <a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
                                        <div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
                                    </div>
                                </div>
                            </li>

                            <li class=\"product-item\">
                                <div class=\"product product-widget-style\">
                                    <div class=\"thumbnnail\">
                                        <a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
                                            <figure><img src=\"{{ asset('assets/images/products/digital_18.jpg') }}\" alt=\"\"></figure>
                                        </a>
                                    </div>
                                    <div class=\"product-info\">
                                        <a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
                                        <div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
                                    </div>
                                </div>
                            </li>

                            <li class=\"product-item\">
                                <div class=\"product product-widget-style\">
                                    <div class=\"thumbnnail\">
                                        <a href=\"detail.html\" title=\"Radiant-360 R6 Wireless Omnidirectional Speaker [White]\">
                                            <figure><img src=\"{{ asset('assets/images/products/digital_20.jpg') }}\" alt=\"\"></figure>
                                        </a>
                                    </div>
                                    <div class=\"product-info\">
                                        <a href=\"#\" class=\"product-name\"><span>Radiant-360 R6 Wireless Omnidirectional Speaker...</span></a>
                                        <div class=\"wrap-price\"><span class=\"product-price\">$168.00</span></div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div><!-- brand widget-->

            </div><!--end sitebar-->

        </div><!--end row-->

    </div><!--end container-->
</main>

Now Lets check it.
Sow switch to browser and refresh the page.
Now lets search the product.
In this search box lets enter any text let say en.
Now click on search, here you can see the searching result.
You can also filter search according to the product category.
Lets click on category and select any category.
Now enter any search text here, now click on search you can see the products from this category.
So in this way you can create search products in laravel 8 ecommerce.