Laravel 8 E-Commerce - Search Products
In this video, we will learn about implementing a search feature for products.
Let's see how we can make this search box work. First, we need to create a component for the search box.
To do this, switch to the command prompt and run the command:
php artisan make:livewire HeaderSearchComponent
Now, switch to the project and open the base.blade.php layout file. Find the search form, select it, and cut it.
Next, go to the header-search-component.blade.php view file and paste the search form 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 the search form by adding the following code:
@livewire('header-search-component')
Now, open the 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]);
}
}
Next, let's create another Livewire component for the search results. Go to the command prompt and run the command:
php artisan make:livewire SearchComponent
Switch back to the project and create a route for the SearchComponent. Open the web.php file and add the following route:
Route::get('/search',SearchComponent::class)->name('product.search');
Now, open the 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");
}
}
Go to the search-component.blade.php view file and add the 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, let's check it. Switch to the browser and refresh the page.
Enter any text in the search box, for example, "en". Click on search, and you can see the search results.
You can also filter the search by product category. Click on the category and select any category.
Enter any search text, and click on search. You can see the products from the selected category.
So, in this way, you can create a search feature for products in Laravel 8 e-commerce.
