Laravel 8 E-Commerce - Product Sorting and Products Per Page

In this video, we will learn about implementing product sorting and displaying products per page on the shop page.

Let's see how to make product sorting and products per page work on the shop page. For that, switch to the project and open the ShopComponent.php class file.

Inside this file, let's create two properties: one for sorting and another for page size. To create the properties, simply type:

public $sorting;
public $pagesize;

Now, let's bind these properties to the select control. Go to the ShopComponent view file and bind the properties by writing:

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

Next, go to the ShopComponent.php class file and add the mount life cycle hook method:

public function mount()
{
	$this->sorting = "default";
	$this->pagesize = 12;                 
}

Now, inside the render method, let's add the following code:

public function render()
    {  
        if($this->sorting=='date')   
        {
            $products = Product::orderBy('created_at','DESC')->paginate($this->pagesize);  
        }
        else if($this->sorting=="price")
        {
            $products = Product::orderBy('regular_price','ASC')->paginate($this->pagesize); 
        }
        else if($this->sorting=="price-desc")
        {
            $products = Product::orderBy('regular_price','DESC')->paginate($this->pagesize); 
        }
        else{
            $products = Product::paginate($this->pagesize);  
        }
        return view('livewire.shop-component',['products'=> $products])->layout("layouts.base");
    }

Now, it's done. Let's check it. Switch to the browser and refresh the page. First, check the number of products per page.

Let's change the number of products per page. Select this option:

Initially, it may not work. To fix this, go to the base.blade.php layout file and comment out the chosen.jquery.min.js line:

{{-- <script src="{{ asset('assets/js/chosen.jquery.min.js') }}"></script> --}}

Now, let's check again. Refresh the page and change the number of products per page:

You can see that the products are now displayed according to the selected page size. If I select 21 per page, you can see 21 records.

Now, let's check the sorting. Change the value of this select control. Let's select "Sort by newness" and you can see that the products are sorted by creation date.

If I select "Sort by price low to high", you can see that the products are sorted according to their price in low to high order.

And if I select "Sort by price high to low", you can see that the products are sorted in high to low price order.

So, in this way, you can implement product sorting and products per page on the shop page.