Laravel 10 E-Commerce Project - Product Sorting and Products Per Page

In this tutorial, we will learn about product sorting and viewing products per page on the shop page.

Let's explore how to make product sorting and products per page work on this shop page.

Setting Up the Shop Controller

First, go to the ShopController and inside the index method, let's pass the Request $request.

Now, create a variable for page and get the page value from the query string as follows:

public function index(Request $request)
{       
      $page = $request->query("page");
      $size = $request->query("size");
      if(!$page)
            $page = 1;
      if(!$size)
            $size = 12;      
      $products = Product::paginate($size);
      return view('shop',['products'=>$products,'page'=>$page,'size'=>$size]);
} 

Updating the Shop Blade Template

Now, go to the shop.blade.php file and find the page size dropdown.

Make changes in the dropdown as follows:

<div class="dropdown select-featured">
      <select class="form-select" name="size" id="pagesize">
            <option value="12" {{ $size == 12 ? 'selected':'' }}>12 Products Per Page</option>
            <option value="24" {{ $size == 24 ? 'selected':'' }}>24 Products Per Page</option>
            <option value="52" {{ $size == 52 ? 'selected':'' }}>52 Products Per Page</option>
            <option value="100" {{ $size == 100 ? 'selected':'' }}>100 Products Per Page</option>
      </select>
</div>

Adding a Hidden Field to the Form

Add a form here and add a hidden field as follows:

<form id="frmFilter" method="GET">
    <input type="hidden" name="page" id="page" value="{{$page}}" />
    <input type="hidden" name="size" id="size" value="{{$size}}" />      
</form>

Adding the Push Directive and Scripts

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

Testing the Products Per Page Functionality

It's done! Let's check.

Refresh the page and now change the page size. Let's select 24, and here you can see the 24 products.

Change the size to 52, and here you can see the products according to the page size.

Making the Sorting Dropdown Work

Now, let's make this sorting dropdown work.

For that, go to the ShopController and create a variable for order and write the code as follows:

public function index(Request $request)
{       
      $page = $request->query("page");
      $size = $request->query("size");
      if(!$page)
            $page = 1;
      if(!$size)
            $size = 12;
      $order = $request->query("order");
      if(!$order)
      $order = -1;
      $o_column = "";
      $o_order = "";
      switch($order)
      {
      case 1:
            $o_column = "created_at";
            $o_order = "DESC";
            break;
      case 2:
            $o_column = "created_at";
            $o_order = "ASC";
            break;
      case 3:
            $o_column = "regular_price";
            $o_order = "ASC";
            break;  
      case 4:
            $o_column = "regular_price";
            $o_order = "DESC";
            break;
      default:
            $o_column = "id";
            $o_order = "DESC";

      }    
      $products = Product::orderBy('created_at','DESC')->orderBy($o_column,$o_order)->paginate($size);
      return view('shop',['products'=>$products,'page'=>$page,'size'=>$size, 'order'=>$order]);
}   

Updating the Shop Blade Template for Sorting

Now, go to the shop.blade.php file and inside this sorting dropdown, write code as follows:

<select class="form-select" name="orderby" id="orderby">
      <option value="-1" {{ $order==-1? 'selected':''}}>Default</option>
      <option value="1" {{ $order==1? 'selected':''}}>Date, New To Old</option>
      <option value="2" {{ $order==2? 'selected':''}}>Date, Old To New</option>
      <option value="3" {{ $order==3? 'selected':''}}>Price, Low To High</option>
      <option value="4" {{ $order==4? 'selected':''}}>Price, High To Low</option>
</select>

Adding a Hidden Field to the Filter Form

Inside this filter form, add one more hidden field:

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

Adding JavaScript Code for Handling the Change Event

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

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

Testing the Sorting Functionality

Now, it's done! Let's check the sorting.

Change the value of this select control. Let's select sort by newness.

And you can see here that products are sorted by creation date.

Now, if I select the sort by price low to high, you can see products are sorted according to their price low to high order.

And now, select sort by price high to low, and you can see the products are sorted in high to low price order.

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