1. Update ShopController for Pagination and Sorting

The `index` function in `ShopController.php` is updated to accept the `size` (products per page) and `orderby` (sorting preference) parameters from the request query string. It defaults to 12 products per page and sorting by Newness (`orderby=1`).

`ShopController.php` - `index` function

public function index(Request $request)
{        
    // 1. Products Per Page Logic (Default: 12)
    $size = $request->query("size") ? $request->query("size") : 12; 
    
    // 2. Product Sorting Logic (Default: 1 - Sort by Newness)
    $order = $request->query("orderby") ? $request->query("orderby") : 1;
    switch($order)
    {
        case 1:
            $o_column = "created_at";
            $o_order = "DESC"; // Sort by Newness (Newest First)
            break;
        case 2:
            $o_column = "created_at";
            $o_order = "ASC"; // Sort by Oldest First
            break;
        case 3:
            $o_column = "regular_price";
            $o_order = "ASC"; // Sort by Price Low to High
            break;
        case 4:
            $o_column = "regular_price";
            $o_order = "DESC"; // Sort by Price High to Low
            break;
        default:
            $o_column = "id";
            $o_order = "DESC";
    }
    // Fetch and paginate products using the selected sorting and size
    $products = Product::orderBy($o_column, $o_order)->paginate($size);    
    
    // Pass products, selected size, and selected order to the view
    return view("shop",compact("products", "size", "order"));
} 

2. Update `shop.blade.php` for Dropdowns and Form Submission

The shop page view needs a hidden form to submit the filtering parameters via the `GET` method, which allows the user to refresh the product list without losing their selection.

Products Per Page Dropdown (inside the main filtering form)

Update the pagesize dropdown to reflect the current selection:

<!-- Assuming the entire shop filter area is wrapped in a form with id="frmfilter" and method="GET" -->
<form method="GET" id="frmfilter">
    <div class="shop-sort">
        <!-- Products Per Page Dropdown -->
        <select name="size" class="nice-select" id="pagesize">
            <option value="12" @if($size == 12) selected @endif>12</option>
            <option value="18" @if($size == 18) selected @endif>18</option>
            <option value="24" @if($size == 24) selected @endif>24</option>
        </select>
    </div>
</form>

Product Sorting Dropdown (inside the main filtering form)

Add the sorting dropdown options and check the current value using the `$order` variable:

<!-- Inside the same form with id="frmfilter" -->
<div class="shop-sort">
    <select name="orderby" id="orderby" class="nice-select">
        <option value="1" @if($order == 1) selected @endif>Sort by Newness</option>
        <option value="2" @if($order == 2) selected @endif>Sort by Oldest</option>
        <option value="3" @if($order == 3) selected @endif>Sort by Price Low to High</option>
        <option value="4" @if($order == 4) selected @endif>Sort by Price High to Low</option>
    </select>
</div>

JavaScript for Auto-Submission

Add JavaScript to automatically submit the form whenever the user changes an option in either dropdown.

@push("scripts")
<script>
    // Auto-submit form when products per page changes
    $("#pagesize").on("change", function(){
        $("#frmfilter").submit();
    });
    // Auto-submit form when sorting order changes
    $("#orderby").on("change", function(){
        // Note: The "orderby" parameter is submitted directly via the "name" attribute of the select tag.
        $("#frmfilter").submit();
    });
</script>
@endpush