In this video 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 shop page.
For that switch to the project and just open ShopComponent.php class file
Inside this file lets create two property one for the sorting and another property for page size
For creating the property just type here

public $sorting;
public $pagesize;

Now lets bind this property to the select control.
So go to the ShopComponent view file and for binding the property just write here


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


Now go to the ShopComponent.php class file and lets add the mount life cycle hook method.

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


Now inside the render method Lets 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 its done so lets check it
So switch to the browser and
Refresh the page. Now first of all check no of products per page.
So lets change the no of products per page.
Lets select this one
And here its not working, alright do one thing go to the base.blade.php layout file and here lets comment chosen.jquery.min.js.

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

now lets check again, so refresh the page now change the no of products per page
And here you can see here 16 products
If I select 21 per page you can see here 21 records. Now 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 Shorting and Products Per Page working on shop page.