In this tutorial we are going to learn about Product Sorting and View Products Per Page on shop page.
So let see how to make working Product Shorting and Products Per Page on this shop page.
First of all go to the ShopController
And inside the index method lets pass here Request $request
Now create a variable for page and get page value from query string as following


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]);
}


Now go to the shop.blade.php file and here lets find the page size drop down
and make changes in dropdown as following


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


Now add the form here add hidden filed as following


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


Now 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



Now its done And lets check
refresh the page and now change the page size and lets select
24 and here you can see the 24 product
Change the size to 52 and here you can see the products according he page size
Now lets make this sorting dropdown working
For that go to the ShopController
And here lets create variable for order and write the code as following


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]);
}


Now go to the shop.blade.php file and here inside this sorting dropdown write code as following


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


Now inside this filter form add one more hidden filed


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


Now inside this script add the javascript code for handeling the change event of this order by select control so
Add here


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


Now its done so lets check the sorting
So change the value of this select control
Lets select sort by newness
And you can see here 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 product are sorted in high to low price order
So in this way you can make Product Sorting and Products Per Page working on shop page.