Laravel 10 E-Commerce Project - Pagination Customization

In this video, we will learn about pagination customization.

Let's explore how to customize the pagination.

Creating a New Pagination Folder

To customize the pagination, go to the views directory and create a new folder called pagination.

Inside the pagination directory, create a file called default.blade.php.

Customizing the Pagination

Now, go to the shop.blade.php file and copy the pagination nav.

Paste it inside the default.blade.php file and make the following changes:

@if($paginator->hasPages())
    <nav class="page-section">
        <ul class="pagination">
            @if($paginator->onFirstPage())
                <li class="page-item disabled">
                    <a class="page-link" href="javascript:void(0)" aria-label="Previous"
                        style="color:#6c757d;">
                        <span aria-hidden="true">
                            <i class="fas fa-chevron-left"></i>
                        </span>
                    </a>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{$paginator->previousPageUrl()}}" aria-label="Previous">
                        <span aria-hidden="true">
                            <i class="fas fa-chevron-left"></i>
                        </span>
                    </a>
                </li>
            @endif
            
            
            @foreach ($elements as $element)
                @if(is_string($element))
                    <li class="page-item disabled">
                        <a class="page-link" href="javascript:void(0)">{{$element}}</a>
                    </li>
                @endif

                @if(is_array($element))
                    @foreach ($element as $page=>$url)
                        @if($page == $paginator->currentPage())
                            <li class="page-item active">
                                <a class="page-link" href="javascript:void(0)">{{$page}}</a>
                            </li>
                        @else
                            <li class="page-item">
                                <a class="page-link" href="{{$url}}">{{$page}}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach
            


            @if($paginator->hasMorePages())
                <li class="page-item">
                    <a href="{{$paginator->nextPageUrl()}}" class="page-link" aria-label="Next">
                        <span aria-hidden="true">
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </a>
                </li>
            @else
                <li class="page-item disabled">
                    <a href="javascript:void(0)" class="page-link" aria-label="Next" style="color:#6c757d;">
                        <span aria-hidden="true">
                            <i class="fas fa-chevron-right"></i>
                        </span>
                    </a>
                </li>
            @endif
        </ul>
    </nav>
@endif

Now, go to the shop.blade.php file and change the pagination link as follows:

{{$products->links("pagination.default")}}

Let's check the result. Go to the browser and refresh the page.

Here, you can see the pagination as per our template.

In this way, you can customize the pagination according to the template.