How to implement Infinite scroll plugin to auto load more data on page scroll from database?

I have a Laravel Blade View I am displaying about 280 products from database using code below.

@if (get_setting('best_selling') == 1)
    <section class="mb-4">
        <div class="container">
            <div class="px-2 py-4 px-md-4 py-md-3 bg-white shadow-sm rounded">
                <div class="d-flex mb-3 align-items-baseline border-bottom">
                    <h3 class="h5 fw-700 mb-0">
                        <span class="border-bottom border-primary border-width-2 pb-3 d-inline-block">{{ translate('Just For You') }}</span>
                    <a href="../search" class="ml-auto mr-0 btn btn-primary btn-sm shadow-md">{{ translate('View More') }}</a>
                <div class="row row-cols-xxl-7 row-cols-xl-6 row-cols-lg-5 row-cols-md-3 row-cols-2 gutters-10">
                    @foreach (filter_products(AppProduct::where('published', 1)->orderBy('id', 'desc'))->limit(280)->get() as $key => $product)
                            @include('frontend.partials.product_box_1',['product' => $product])

Code of the partial: frontend.partials.product_box_1
<div class="aiz-card-box border border-light rounded hov-shadow-md mt-1 mb-2 has-transition bg-white">
    <div class="position-relative">
        <a href="{{ route('product', $product->slug) }}" class="d-block">
                class="img-fit lazyload mx-auto h-140px h-md-210px"
                src="{{ static_asset('assets/img/placeholder.jpg') }}"
                data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                alt="{{  $product->getTranslation('name')  }}"
                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
        <div class="absolute-top-right aiz-p-hov-icon">
            <a href="javascript:void(0)" onclick="addToWishList({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to wishlist') }}" data-placement="left">
                <i class="la la-heart-o"></i>
            <a href="javascript:void(0)" onclick="addToCompare({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to compare') }}" data-placement="left">
                <i class="las la-sync"></i>
            <a href="javascript:void(0)" onclick="showAddToCartModal({{ $product->id }})" data-toggle="tooltip" data-title="{{ translate('Add to cart') }}" data-placement="left">
                <i class="las la-shopping-cart"></i>
    <div class="p-md-3 p-2 text-left">
        <div class="fs-15">
            @if(home_base_price($product) != home_discounted_base_price($product))
                <del class="fw-600 opacity-50 mr-1">{{ home_base_price($product) }}</del>
            <span class="fw-700 text-primary">{{ home_discounted_base_price($product) }}</span>
        <div class="rating rating-sm mt-1">
            {{ renderStarRating($product->rating) }}
        <h3 class="fw-600 fs-13 text-truncate-2 lh-1-4 mb-0 h-35px">
            <a href="{{ route('product', $product->slug) }}" class="d-block text-reset">{{  $product->getTranslation('name')  }}</a>
        @if (addon_is_activated('club_point'))
            <div class="rounded px-2 mt-2 bg-soft-primary border-soft-primary border">
                {{ translate('Club Point') }}:
                <span class="fw-700 float-right">{{ $product->earn_point }}</span>

Output Of the code

I want to implement Infinite Scroll plugin because my products takes too much time to load from database. It is very inconvenient for the end user so I want to make the interaction more interactive and user-friendly. Any help would be highly appreciated.


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is a very simple solution just follow below steps.

  1. Include plugin script in your blade
    <script src="[email protected]/dist/infinite-scroll.pkgd.min.js"></script>
  2. Replace below code under <input type="hidden" name="max_price" value="">

     <div class="article-feed row gutters-5 row-cols-xxl-4 row-cols-xl-4 row-cols-lg-4 row-cols-md-3 row-cols-2">@foreach ($products as $key => $product)
     <article class="article">
     @include('frontend.partials.product_box_1',['product' => $product])
     <div class="aiz-pagination aiz-pagination-center mt-4">
     {{ $products->appends(request()->input())->links() }}
     <!-- status elements -->
     <div class="scroller-status">
     <div class="infinite-scroll-request loader-ellips">
     <p class="infinite-scroll-last">End of content</p>
     <p class="infinite-scroll-error">No more pages to load</p>
     <!-- pagination has path -->
     <p class="pagination">
     <a class="pagination__next" href="../search?page=2"></a>

Add below JQuery function into the end of your blade view

      path: '.pagination__next',
      append: '.article',
      status: '.scroller-status',
      hideNav: '.pagination',

I hope it will work fine. In case it didn’t work for you tell me in the comment section I will help you out.

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x