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

Welcome back to the Laravel E-Commerce Tutorial. In this video, we will learn about product sorting and viewing products per page on the shop page.

Step 1: Create Variables for Size and Order

First, go to the ShopController and inside the index method, pass the Request $request. Create a variable for size and get the size from the query string:

public function index(Request $request)
{        
    $size = $request->query('size')?$request->query('size'):12; 
    $products = Product::orderBy("created_at","DESC")->paginate($size);    
    $categories = Category::orderBy("name","ASC")->get();
    $brands = Brand::orderBy("name","ASC")->get();
    return view('shop',compact("products","size"));
} 

Step 2: Update the Shop View

Go to the shop.blade.php file and find the page size select control. Make changes as follows:

<select class="shop-acs__select form-select w-auto border-0 py-0 order-1 order-md-0" style="margin-right:20px;" aria-label="Page Size" id="pagesize" name="pagesize">
    <option value="12" {{$size=='12'? 'selected':''}}>Show</option>                        
    <option value="24" {{$size=='24'? 'selected':''}}>24</option>
    <option value="48" {{$size=='48'? 'selected':''}}>48</option>
    <option value="102" {{$size=='102'? 'selected':''}}>102</option>
</select>

Step 3: Update the ShopController

Go to the ShopController and inside the index method, remove the fixed page size and add the $size variable. Also, return the size to the view as follows:

public function index(Request $request)
{        
    $size = $request->query('size')?$request->query('size'):12; 
    $products = Product::orderBy("created_at","DESC")->paginate($size);    
    $categories = Category::orderBy("name","ASC")->get();
    $brands = Brand::orderBy("name","ASC")->get();
    return view('shop',compact("products","size"));
} 

Step 4: Add a Form for Filtering

Add a form just before the closing content section directive as follows:

Step 5: Add Script for Handling Page Size Change

Add the push directive and add the name scripts:

@push('scripts')
<script>
    $("#pagesize").on("change",function(){                    
        $("#size").val($("#pagesize option:selected").val());
        $("#frmFilter").submit(); 
    });
</script>
@endpush

Step 6: Create Variables for Order

Now, let's make the sorting dropdown working. Go to the ShopController and create a variable for order:

$order = $request->query('order');

If the query string order has no value, set the default value to the order variable. Then, create two more variables: one for the storing column name and another for the order, either ascending or descending. Also, return this $order variable to the shop view as follows:

public function index(Request $request)
{        
    $size = $request->query('size')?$request->query('size'):12;
    $sorting = $request->query('sorting')?$request->query('sorting'):'default';               

    if($sorting=='date')   
    {
        $products = Product::orderBy('created_at','DESC')->paginate($size);  
    }
    else if($sorting=="price")
    {
        $products = Product::orderBy('regular_price','ASC')->paginate($size); 
    }
    else if($sorting=="price-desc")
    {
        $products = Product::orderBy('regular_price','DESC')->paginate($size); 
    }
    else{
        $products = Product::paginate($size);  
    }           
    $categories = Category::orderBy("name","ASC")->get();
    $brands = Brand::orderBy("name","ASC")->get();
    return view('shop',compact("products","size","sorting"));
}  

Step 7: Update the Shop View for Sorting

Go to the shop.blade.php file and inside the sorting dropdown:

<select class="shop-acs__select form-select w-auto border-0 py-0 order-1 order-md-0" aria-label="Sort Items" id="sorting" name="sorting">                        
    <option value="default" {{$sorting=='default'? 'selected':''}}>Default Sorting</option>                               
    <option value="date" {{$sorting=='date'? 'selected':''}}>Sort by newness</option>
    <option value="price"{{$sorting=='price'? 'selected':''}}>Sort by price: low to high</option>
    <option value="price-desc" {{$sorting=='price-desc'? 'selected':''}}>Sort by price: high to low</option>
</select>

Step 8: Add Hidden Field for Order

Inside the filter form, add one more hidden field:

<input type="hidden" id="order" name="order" value="{{$order}}" /> 

Step 9: Add JavaScript Code for Handling Order Change

Inside the script, add the JavaScript code for handling the change event of the order by select control:

$("#orderby").on("change",function(){                    
    $("#order").val($("#orderby option:selected").val());
    $("#frmFilter").submit(); 
});

Final Step: Check the Sorting

Now, let's check the sorting. Change the value of the select control. Let's select "Sort by newness". You can see that the products are sorted by creation date. Now, if you 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 now, 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 make product sorting and products per page working on the shop page. So, in this way, you can create a layout and implement the HTML template.

That's all about product sorting and products per page for the E-Commerce project.