Laravel E-Commerce Project

Laravel E-Commerce Project - Add Search on Admin Products Page


Video Thumbnail

In this video, we will learn how to add a search feature to the Admin Products Page.

Let's explore how to achieve this. First, open the AdminProductComponent view file and add an input text field:


<div class=`col-md-4`>
    <input type=`text` class=`form-control` wire:model=`searchTerm` placeholder=`Search...` />
</div>

Next, go to the AdminProductComponent class file and create a new property:


public $searchTerm;

Bind this property to the input text field by adding the following code to the view file: wire:model=`searchTerm`.

Now, go to the class file and add the following code inside the render method:


public function render()
{     
    $search = '%' . $this->searchTerm . '%';     
    $products = Product::where('name','LIKE',$search)
                ->orWhere('stock_status','LIKE',$search)
                ->orWhere('regular_price','LIKE',$search)
                ->orWhere('sale_price','LIKE',$search)
                ->orderBy('id','DESC')->paginate(10);                
    return view('livewire.admin.admin-product-component',['products'=>$products])->layout('layouts.base');
}

That's it! Let's test the functionality. Switch to the browser and refresh the page.

Try searching for a product by name, and you should see the search results. If you enter a price, you should see the products that match that price.

By following these steps, you can add a search feature to the Admin Products Page.

Written by Surfside Media

Senior Full Stack Developer specializing in Web Technologies.