Elementor: Feature Suggestion - Paginate/Lazy Load Posts/Portfolio

[pingram3541]

I know this original request was closed because you are using the built in gallery widget that doesn't provide this functionality nor is the core shortcode coded in a way that would allow this.

However, now that we have ePro modules that perform more advanced queries its hard to deny the need for a way to provide a mechanism to "load more".

Most often we would be using these widgets to replace a blog or portfolio page and I also believe more often than not we would also want a way to continue viewing beyond what is initially presented in the grid such as a automated scrollTop lazy load event, a "load more" button or even a paginated numbered list that performs an ajax request.

Additionally, another feature that would be nice is the ability to provide a lightbox type feature in addition to linking to the article. I.e. Similar to Essential Grid but without all the extra bloat that it adds.

[joshmarom]

Pagination / Load more is coming soon.
Lightbox is also in our pipeline.

[pingram3541]

Thanks for continually being awesome =)

[josecristobal]

Inspiration:
http://www.flippercode.com/product/wp-posts-pro/ - Great customization on filters
https://wpshowposts.com/downloads/wp-show-posts-pro/ - Great customization- Work well with GeneratePress
https://essential.themepunch.com/ - Great design

[dasigna]

... any news on this?

[VerdiH]

I would also like to know if updates for the Portfolio Widget are planned.

@josecristobal Thanks for the links, I really like the last one (Essential Grid). Except you're stuck with their layouts or need to start coding. I'm waiting just a little longer to see what Elementor does with their Widget.

[fthiesen]

Can't wait!

More inspiration: https://www.livemeshthemes.com/elementor-addons/portfolio-grid-pro/

[pako69]

Can't wait too and I'm very sad to be forced to buy an external expensive addons :-(

[ikovalyov]

👍

[ravilrrr]

+1 lazy load portfolio filter

[black-eye]

+1

[markhagemann]

Any update on this for the Posts widget?

[amindiary]

not implemented yet ?
+1 for lazy load for posts (elementor pro)

[stefanobartoletti]

Pagination (AJAX?) or alternatively lazy load for the Portfolio widget is really needed.
Currently, if you set to dispplay, let's say 9 items, even when filtering you can't access all the other ones.
And a big page with an indefinite large number of times is not really handy

[vershimajr]

Any update on this?

[sarahdenise]

+1

[willcitizen]

+1 Bumping this feature please - The post widget is a core function and the whole page refreshing on next / previous feels like going back in time and netflixing on a CRT TV.

I see the most obscure woocommerce issues getting fixed on every release and basic stuff like this is left de-prioritzed for ages.

Asking again if we could please see a priorities roadmap on improvements and feature releases.

other plugin developers will literally write code for paying customers on the fly and release hot-fixes, here it seems you have stand on a soapbox and beg for attention just to get a request considered useful.

[Reubenlee]

+1 Please do a feature like this out! I feel it’s necessary! Lazy load!!

[joshuamayo]

I've literally created a github account just to +1 this feature... please, any updates on adding load more/infinite scroll?

[wachalala]

Yes need that function too :)

[erfan-ilyas]

+1 Strongly recommend adding ajax pagination feature.

[JDM1962]

Damn, just paid for pro thinking this was already included as standard only to find it's not. I can understand it not being in the free version, but I just paid for pro - can't believe it's not in there yet, seems old fashioned. Will prob get refund, only got this for theme building of archive pages, but not worth $49 for just that if it can't even paginate into the 21st Century...

I already have PageBuilder Pro, Smart Slider Pro, Mega Menu Pro & LiveMesh Widgets Pro for pagebuilder, and caught between going with either Elementor or Content Views to get the archive pages views...

Was really hoping according to all the reviews that Elementor would be the piece of magic to have almost all in just the one tool to reduce update risks, but obviously not.

Apologies for my little rant but after having just watched several tens of videos on how great Elementor is supposed to be compared to all the others especially with the theme builder parts and YET not being able to prove it until I buy the pro, I'm feeling a liiiittttttle biiiit mislead!!! Not happy!

This really should be a priority given all your competitors already have it.

[jefechang]

+1

[pako69]

2 years of waiting and buying other Elementor plugin jsut for a simple load more button!

@pojome > It's a shame!!!

[wachalala]

At least please answer us about that feature that in 2018 is not even a feature but a classic option.

[Wissenswerkstatt]

I'm also waiting for this feature. Id be very nice to have it soon. The option to have a pagination is simply necessary.

[jarededdy]

+1 where is this, it's been a year! We demand answers. (paid user of elementor)

[HQRaja]

+1
Been quite a while with no response on this. Any update?

[r3xx0n]

+1
Would be awesome

[moti-evin]

+1 - we need it!

[Recover-Zone]

+1 Very confusing when entire page reloads and sends user to top. Would be great to see a fix to this problem.

[nuphunk]

+1 please

[pako69]

Hi
I wrote this below to Elementor Pro support:

• -
  _I still can't understand why this simple features is not available?
  https://github.com/pojome/elementor/issues/1284#issuecomment-448966069
  Thanks_
• -

Here is the answer I get...:

• -
  _Thank you for contacting us.
  Your initial message has been already marked as a feature request internally. This feature will be considered for implementation in future versions of Elementor.

Also, feel free to use a third-party plugin for this purpose, we can't recommend a specific one but you can join our Facebook community and check with our users there._

• -

[Reubenlee]

lmao switch to beaver builder. is more expensive but so much more efficeint .___.

[joshuamayo]

@TomasConnor Elementor Extras - see here: https://shop.namogo.com/elementor-extras/widgets/posts/

[bentalgad]

+1 Why did @joshmarom said it's coming soon on Feb 9, 2017? it's now 2019 and still missing this feature...

[Vladimir12071983]

+1 recommend adding ajax pagination feature.

[cjmetacrawler]

+1 this is a must have compared to the pop up

[cjmetacrawler]

Anyone from here successfully tweaked this one without using external addons?

[MattOndo]

+1 surprised this is _still_ only a request. It's been 2 years since this was "coming soon" ?!

[hemel-cse]

+1 Load more is the future!!!

In archive posts the pagination kind of basic feature as it should be.

[wachalala]

Hum there is a survey email for the next feature !
Let's spam that request =)

[callum-jones]

It's now been 2 years since the original request. Are we any closer to adopting this?

[SophieLearner]

Can't believe its two years ago when the thread was first opened......

[MafuraG]

This feature is definitely needed

[shimsa]

+1

[digitalchet]

Imagine my surprise when searching out how to add pagination to my portfolio and finding out that this is not a feature that was ever added. Such a necessary feature for this kind of content. How ridiculous to have paying customers left waiting over two years for such an obvious feature. Kinda makes me wish I'd bought another builder framework.

[Reubenlee]

Imagine my surprise when searching out how to add pagination to my portfolio and finding out that this is not a feature that was ever added. Such a necessary feature for this kind of content. How ridiculous to have paying customers left waiting over two years for such an obvious feature. Kinda makes me wish I'd bought another builder framework.

use beaver builder

[wachalala]

switched to beaver for that reason

Le mer. 20 mars 2019 à 15:18, Reubenlee [e-mail] a écrit :

Imagine my surprise when searching out how to add pagination to my
portfolio and finding out that this is not a feature that was ever added.
Such a necessary feature for this kind of content. How ridiculous to have
paying customers left waiting over two years for such an obvious feature.
Kinda makes me wish I'd bought another builder framework.

use beaver builder

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/1284#issuecomment-474849841,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AhSyrAV7V_uVC1BoloMrPj7C5BIYByC_ks5vYkMlgaJpZM4L7OsZ
.

[jefechang]

incredible

[Reubenlee]

this issue was address long ago. no action done. dont waste your time.

[hojtfredrik]

+1!!!!

[Zexler]

Do well what is already available. And then create new opportunities. +1

[useahawk]

+1!! Pagination with page reload on 1000+ posts is so 2002. Need modern ajax/lazyload way in 2019!

[pako69]

Don’t waste your time with +1, they just don’t care!

[rootmanifest]

+1 I'm not sure if they don't care. However, I am surprised by their silence on this one. Hey, Elementor can you make this happen? If so, when? If not, speak up. Many pro users (including myself) have an interest in this and based on comments here, some are abandoning your product as a result of your silence and inaction.

[shaneonabike]

+1

[bilalnaseer]

+1 waiting for this feature

[idkoukou]

+1

[WeLoTech]

+1

[taropaa]

+1

[MikeTheWatchGuy]

Is this the feature that will remove this from the middle of viewing my Issue on Github?

I read somewhere that you can specify a parameter in the URL that will control the number of posts shown, but I can't seem to find it anywhere.]

[zeinnicholas]

+1

[pako69]

@SquareInternet : good job but what we need is a load more button, because with infinite scroll users will never reach the bottom of pages...
Thanks

[shaneonabike]

Hmmm I think I'm still looking for a non-paid version since this usually just comes out of the box with most page builders. Thanks tho

[bentalgad]

+1 Come on, Basic stuff here...

[koddajr]

Possible to make a ajax request on archives posts?

[lilianmurciaart]

+1 Please we NEED this. The loading of the pages where there are large portfolios takes too long. Add load more button. 3 years paying for elementor pro and still nothing...

[Quasar-wpg]

We need this feature ASAP. It's necessary for all archive style widgets. When people do a search on a site for products in a WooCommerce store, they shouldn't have to click through a preset limit of pages that limits how many of the products they can see. They should have access to all the products relating to their search with a simple "show more" button at the bottom of the search results. WooCommerce stores (and other archives) should also be AJAX compatible with taxonomy filters for faster and easier site navigation. Please help us create even better advanced sites!

[freelancesam]

I fix it by myself. if you like it please give a star. plugin link
This is only posts widget though. it is in the basic category name Jaxer Posts if you install it.
Fix excerpt length, add load more button. use ajax lazy load. add animation to posts boxes, cards.

This plugin did exactly what I needed (with a few minor tweaks). Unfortunate that Elementor can't fix this and many other simple issues yet they keep adding new bloated design features.. losing a lot of faith here!!

[swinggraphics]

+1
Beaver Builder and all the all-in-ones (Avada, X, Total…) have this.

[RealBenihime]

This feature should have been standard many iterations ago. Come on Elementor!

[zezao123]

Come on guys, there's a lot of plugins who already have that but only for main post, we need this ASAP, isnt a hard request...

[WayneSeddon]

Blimey! It's like Brexit! Almost 3 years on and still no further forward! And for such a simple, common feature that should have been included from the start. Embarrassing.

[srcek]

It would be awesome if this would include native lazy loading for images and galleries.

There's a plugin from Google: https://wordpress.org/plugins/native-lazyload/
But that means adding another plugin. I think it wouldn't be too complicated to have that option right in Elementor.

[pako69]

Thanks @SquareInternet but:

• @freelancesam did it free
• your pricing is not suitable four our needs... we have about 25 websites and your pricing is $10/sites... :-(

[Starkemis]

@pako69 fyi in case you were interested we just added a 'Read More' button so you can use the infinite scroll function, or the user has to click 'read more' to load the next batch of posts.

I think we're going to look at making our plugin work with the Portfolio section next.

m8 advertising your addon here does you no favors.

[shaneonabike]

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.

Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

Good luck!

[Quasar-wpg]

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.

Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

Good luck!

Thanks for sharing. I'm trying to work with it now on a WooCommerce store. By default, it works great on the main shop page but not on other category pages. And since I'm also trying to use JetSmartFilters, as soon as I select a filter, the "load more" button disappears and the page numbers return. Setting this all up seems to be beyond my skill level for now. I guess it's back to basics lol.

[shaneonabike]

You'll have to check the plugin to see how they enqueue the script to make it function. The reason it didn't work is for some bizaro reason the developer is checking against is_singular and is_search and not allowing the code to go through. I wrote them a bug report about that but haven't heard anything since. I ended up just queue up their scripts myself for specific pages.

Good luck!

[maxlanders]

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.

Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

Good luck!

Hey Shane,
I'm trying to implement your quite interesting alternative but without success also could you tell more about the posts widget setup please?
Are you setting pagination on "none" or?
What about "Posts Per Page" setting? Is this the option to control after how many posts the "load more" element should appear? Or do you leave it empty and play with "Blog pages show at most" in Settings > Reading?
I can't find much documentation about how to control the plugin and even less how to make ti work with Elementor. Any help much welcome! :)

[vibrantj]

The free version of this plugin - https://wordpress.org/plugins/premium-addons-for-elementor/ can be used to create a "load more" functionality to Elementor through its Premium Media Grid feature. May not work for every purpose, but I have found it useful for my needs (portfolio image gallery with links to custom posts) until Elementor gets it together on this request.

[shaneonabike]

I used the free version without troubles @maxlanders . You have to set a pagination as that's the only way that the module is able to determine there are new posts. As I mentioned before you need to check the code for the JS or it just won't work. I'm going to write a blog post to help folks but am in the tail end of a launch so expect a response soon!

[maxlanders]

I used the free version without troubles @maxlanders . You have to set a pagination as that's the only way that the module is able to determine there are new posts. As I mentioned before you need to check the code for the JS or it just won't work. I'm going to write a blog post to help folks but am in the tail end of a launch so expect a response soon!

Thank you, looking forward to reading your post. ;)

[janfratric]

I used the free version without troubles @maxlanders . You have to set a pagination as that's the only way that the module is able to determine there are new posts. As I mentioned before you need to check the code for the JS or it just won't work. I'm going to write a blog post to help folks but am in the tail end of a launch so expect a response soon!

Thank you for the effort, really looking forward to your post. I cannot believe that Elementor has not yet introduced this function.

[DeysonOrtiz]

@SquareInternet Does it work with Woocommerce product archives Elementor Widget? Thank you :)

[soldiweb]

This feature should be developed asap, unbelievable...

Are they aware of this?

[warudin]

The 'Archive Posts' element really needs a feature to load more posts on the same page. Pagination is OK, but the ability to load more posts on the same page would be a very welcome addition.

[elias-thok]

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.

Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

Good luck!

Works well for me, thanks for sharing!
I left the original CSS classes in place and just added the elementor-specific ones. Still hoping for a native solution though.

[d-packs]

Cannot believe such a basic feature like AJAX Pagination for posts is missing in 2020. I've been using this in other editors for years. I'm not asking for free meals here. I'm talking about the paid version of the plugin: Elementor PRO.

Even normal pagination is poorly implemented, as clicking on page 2 for example will add /page/2 to the URL, which is totally wrong if i have multiple posts blocks inserted into a page.

[bartvanoers]

+1

[black-eye]

Omg, this issue is more than 3 years old! And no reaction from the devs, except initial response, it’s coming soon - 3 years ago!

Btw, the coming soon reaction was from @joshmarom, the guy who’s defending the dev board in recent “4th million feature” video. Well I understand this was meant as a joke, but in this perspective it seems that there’s more truth to it, than it initially seemed. Feeling sad... :-(

[artifex-media]

+1

Needed badly after 3 years! It's 2020 and Elementor has zero interest in Ajax... why?

[joychetry]

Still no update regarding this, disappointed!

[mstudioIL]

I also need it

[Yaryank]

+1

[d-packs]

@joshmarom that was 2017. Definitely not my understanding of the word "soon". A man and his word...
Edit: Well I've just bought Oxygen Builder. Let's see how fast they add this feature.

[Sarasranglt]

Guys lets stop blaming elementor developers here. Its really easy to extend elementor and paginate using some custom js and hooks provided in the elementor documentation. I was able to paginate products widget using - elementor/widget/render_content and elementor/element/woocommerce-products/section_content/before_section_end hook .

_Composer.json should have_
"sunra/php-simple-html-dom-parser": "1.5.2"

_In your theme's function.php_
include('editorialist/hooks/extend-elementor.php');

_In extend-elementor.php_

<?php 

use ElementorPro\Modules\Woocommerce\Classes\Current_Query_Renderer;
use ElementorPro\Modules\Woocommerce\Classes\Products_Renderer;
use Sunra\PhpSimple\HtmlDomParser;


add_action('elementor/widget/render_content', function ($content, $widget) {
     if ($widget->get_name() === 'woocommerce-products') {
        wp_enqueue_script(
            'ed-el-product-widget.js',
            get_stylesheet_directory_uri() . '/assets/js/elementor_myapp/myapp-product-widget.js',
            false,
            false,
            true
        );

        $settings = $widget->get_settings();
        if ($settings["infinite_pagination"] == "yes") {
            $dom = HtmlDomParser::str_get_html($content);
            $wcm_pagination = $dom->find('nav.woocommerce-pagination');
            if (sizeof($wcm_pagination) > 0) {
                $wcm_pagination[0]->setAttribute('outertext', '');
            }
            $content = $dom;

            $content .= "<div class='load_more_btn'><button data-sel='see_mr_btn' data-settings='" . json_encode($settings) . "'>Load More</button></div>";
        }
    }
    return $content;
}, 10, 2);



add_action('elementor/element/woocommerce-products/section_content/before_section_end', function ($element, $args) {
    $element->add_control(
        'infinite_pagination',
        [
            'label' => __('Infinite Pagination', 'myapp'),
            'type' => \Elementor\Controls_Manager::SWITCHER,
            'label_on' => __('Yes', 'myapp'),
            'label_off' => __('No', 'myapp'),
            'return_value' => 'yes',
            'default' => 'no',
        ]
    );
}, 10, 2);



function fetch_woocm_products()
{

    $settings = $_POST['settings'];
    $shortcode = null;
    $_GET['product-page'] = $_POST['current_page'];
    if ('current_query' === $settings[Products_Renderer::QUERY_CONTROL_NAME . '_post_type']) {
        $type = 'current_query';
        $shortcode = new Current_Query_Renderer($settings, $type);
    } else {
        $type = 'products';
        $shortcode = new Products_Renderer($settings, $type);
    }

    $content = $shortcode->get_content();


    if ($content) {
        if ($settings["infinite_pagination"] == "yes") {
            write_log($settings["infinite_pagination"]);
            $dom = HtmlDomParser::str_get_html($content);
            $wcm_pagination = $dom->find('nav.woocommerce-pagination');
            if (sizeof($wcm_pagination) > 0) {
                $wcm_pagination[0]->setAttribute('outertext', '');

            }
            $content = $dom;
        }
        echo $content;
    } elseif ($settings['nothing_found_message']) {
        echo '';
    }

    wp_die();
}

add_action('wp_ajax_fetch_woocm_products', 'fetch_woocm_products');
add_action('wp_ajax_nopriv_fetch_woocm_products', 'fetch_woocm_products');

_In myapp-product-widget.js_

(function () {

   function send_ajax(method, data, success, error, beforeSend, complete) {
        jQuery.ajax({
            type: method,
            url: "/wp-admin/admin-ajax.php",
            data: data,
            cache: false,
            beforeSend: function () {
                beforeSend();
            },
            success: function (data) {
                success(data);
            },
            error: function (jqXHR, exception) {
                error(jqXHR, exception);
            },
            complete: function () {
                complete();
            }
        });
    };


    const SEE_MORE_BTN_SEL = 'button[data-sel="see_mr_btn"]';
    var current_page = 1;
    var see_mr_btn = jQuery(SEE_MORE_BTN_SEL);
    see_mr_btn.click(function () {
        if (current_page > 0) {
            var settings = see_mr_btn.data('settings');
            settings.paginate = 'yes';
            current_page++;
            sendAjax("POST", {
                action: 'fetch_woocm_products',
                settings: settings,
                current_page: current_page
            }, function (data) {
                if (data) {
                    jQuery(data).insertBefore(SEE_MORE_BTN_SEL);
                } else {
                    current_page = -1;
                }

            }, function (jqXHR, exception) {
                console.log(exception);
            }, function () {
                see_mr_btn.attr("disabled", true);
            }, function () {
                see_mr_btn.attr("disabled", false);
            });
        }
    });
}());

I've made some edits to the above code before submitting to make it clearer so it might have some runtime bugs. But surely will provide an insight how to solve this.
You can apply the same for posts and it should work.

[d-packs]

@Sarasranglt thank you for this! Will definitely give this a go on my next project.

[joychetry]

@Sarasranglt Do you have any detailed documentation of this? It's really hard for non-developers to work with just this.

[RealBenihime]

I thought the whole point of having a page builder was to eliminate or minimize the need for coding, and looking at your code and as impressive as it may be, it’s not something an average Joe would understand and be able to implement. And if it’s this “easy” why don’t they just bake it in the core of elementor?

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: [e-mail]
Sent: Thursday, April 9, 2020 12:48 PM
To: elementor/[e-mail]
Cc: Sibongiseni [e-mail]; [e-mail]
Subject: Re: [elementor/elementor] Feature Suggestion - Paginate/Lazy Load Posts/Portfolio (#1284)

Guys lets stop blaming elementor developers here. Its really easy to extend elementor and paginate using some custom js and hooks provided in the elementor documentation. I was able to paginate products widget using - elementor/widget/render_content and elementor/element/woocommerce-products/section_content/before_section_end hook .

Composer.json should have
"sunra/php-simple-html-dom-parser": "1.5.2"

In your theme's function.php

include('editorialist/hooks/extend-elementor.php');

In extend-elementor.php

use ElementorPro\Modules\Woocommerce\Classes\Current_Query_Renderer;

use ElementorPro\Modules\Woocommerce\Classes\Products_Renderer;

use Sunra\PhpSimple\HtmlDomParser;

add_action('elementor/widget/render_content', function ($content, $widget) {

 if ($widget->get_name() === 'woocommerce-products') {

    wp_enqueue_script(

        'ed-el-product-widget.js',

        get_stylesheet_directory_uri() . '/assets/js/elementor_myapp/myapp-product-widget.js',

        false,

        false,

        true

    );



    $settings = $widget->get_settings();

    if ($settings["infinite_pagination"] == "yes") {

        $dom = HtmlDomParser::str_get_html($content);

        $wcm_pagination = $dom->find('nav.woocommerce-pagination');

        if (sizeof($wcm_pagination) > 0) {

            $wcm_pagination[0]->setAttribute('outertext', '');

        }

        $content = $dom;



        $content .= "<div class='load_more_btn'><button data-sel='see_mr_btn' data-settings='" . json_encode($settings) . "'>Load More</button></div>";

    }

}

return $content;

}, 10, 2);

add_action('elementor/element/woocommerce-products/section_content/before_section_end', function ($element, $args) {

$element->add_control(

    'infinite_pagination',

    [

        'label' => __('Infinite Pagination', 'myapp'),

        'type' => \Elementor\Controls_Manager::SWITCHER,

        'label_on' => __('Yes', 'myapp'),

        'label_off' => __('No', 'myapp'),

        'return_value' => 'yes',

        'default' => 'no',

    ]

);

}, 10, 2);

function fetch_woocm_products()

{

$settings = $_POST['settings'];

$shortcode = null;

$_GET['product-page'] = $_POST['current_page'];

if ('current_query' === $settings[Products_Renderer::QUERY_CONTROL_NAME . '_post_type']) {

    $type = 'current_query';

    $shortcode = new Current_Query_Renderer($settings, $type);

} else {

    $type = 'products';

    $shortcode = new Products_Renderer($settings, $type);

}



$content = $shortcode->get_content();





if ($content) {

    if ($settings["infinite_pagination"] == "yes") {

        write_log($settings["infinite_pagination"]);

        $dom = HtmlDomParser::str_get_html($content);

        $wcm_pagination = $dom->find('nav.woocommerce-pagination');

        if (sizeof($wcm_pagination) > 0) {

            $wcm_pagination[0]->setAttribute('outertext', '');



        }

        $content = $dom;

    }

    echo $content;

} elseif ($settings['nothing_found_message']) {

    echo '';

}



wp_die();

}

add_action('wp_ajax_fetch_woocm_products', 'fetch_woocm_products');

add_action('wp_ajax_nopriv_fetch_woocm_products', 'fetch_woocm_products');

In myapp-product-widget.js

(function () {

function send_ajax(method, data, success, error, beforeSend, complete) {

    jQuery.ajax({

        type: method,

        url: "/wp-admin/admin-ajax.php",

        data: data,

        cache: false,

        beforeSend: function () {

            beforeSend();

        },

        success: function (data) {

            success(data);

        },

        error: function (jqXHR, exception) {

            error(jqXHR, exception);

        },

        complete: function () {

            complete();

        }

    });

};





const SEE_MORE_BTN_SEL = 'button[data-sel="see_mr_btn"]';

var current_page = 1;

var see_mr_btn = jQuery(SEE_MORE_BTN_SEL);

see_mr_btn.click(function () {

    if (current_page > 0) {

        var settings = see_mr_btn.data('settings');

        settings.paginate = 'yes';

        current_page++;

        sendAjax("POST", {

            action: 'fetch_woocm_products',

            settings: settings,

            current_page: current_page

        }, function (data) {

            if (data) {

                jQuery(data).insertBefore(SEE_MORE_BTN_SEL);

            } else {

                current_page = -1;

            }



        }, function (jqXHR, exception) {

            console.log(exception);

        }, function () {

            see_mr_btn.attr("disabled", true);

        }, function () {

            see_mr_btn.attr("disabled", false);

        });

    }

});

}());

I've made some edits to the above code before submitting to make it clearer so it might have some runtime bugs. But surely will provide an insight how to solve this.
You can apply the same for posts and it should work.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/elementor/elementor/issues/1284#issuecomment-611462829, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEXGWMFSKJDULUSXRX5FZDLRLWRY5ANCNFSM4C7M5MMQ.

[joychetry]

@RealBenihime I agree with you

[Sarasranglt]

@RealBenihime @joychetry Unfortunately, you'll need some developer help.

Here is the documentation:
https://code.elementor.com/hooks/

[mstudioIL]

Will it not delete after update?

[ikovalyov]

@Sarasranglt The problem with custom approach is requirement to maintain it yourself. That's really basic functionality and we would like core team to implement it. Or we can move to other project which has this feature implemented. Code maintaining price is more than plugin subscription price itself.

[marcocarrozzini]

+1 +1 +1 +1

[jifola]

Hello everyone,
I have made a widget that adds infinite scroll and load more functionality to Elementor Archive Posts, Posts, Archive Products and Products. Custom selectors can also be used. So far this widget is completely free. I have plans to make a version that adds JetSmartFilters and FacetWP compatibility, and other settings. But first I want to make sure that everything works as it should so far. So I would really appreciate if you would test it, and report back with errors and ideas. Instructions are in the README file in the plugin folder. Thank you.

https://github.com/jifola/Scroll-And-Load-For-Elementor

[Quasar-wpg]

I'm still hoping that Elementor will add this in some day but your plugin sounds really helpful jifola. I am already using JetSmartFilters so I can't test this version but will be interested in the future updates.

[princesshorsepower]

Hello everyone,
I have made a plugin that adds infinite scroll and load more functionality to Elementor Archive Posts, Posts, Archive Products and Products. Custom selectors can also be used. So far this plugin is completely free. I have plans to make a version that adds JetSmartFilter and FacetWP compatibility, and other settings. But first I want to make sure that everything works as it should so far. So I would really appreciate if you would test this plugin, and report back with errors and ideas. Instructions are in the README file in the plugin folder. Thank you.

https://github.com/jifola/Scroll-And-Load-For-Elementor

@jifola , awesome, this sounds surprising.

I already tried it out on my staging site.
The first issue I found testing with the Posts Widget.
Skin: Classic
Image Position: Left

The Ajax loaded posts do not support Image Position left.

See screenshot: Upper post item is one of the static items, lower post item is dynamically loaded.

[jifola]

Hello princesshorsepower, I am new to github so made a new repository. Figured out too late how to just delete files. Same name https://github.com/jifola/Scroll-And-Load-For-Elementor

[joychetry]

@jifola use Github Desktop application to easily manage github repository from windows, mac, linux.

[jifola]

Okay thanks @joychetry I will check it out. Much to learn :)

[jifola]

Okay so the plugin now has Jetsmartfilters compatibility. With some limitations. It only works with Elementor Pro Archive Posts, Elementor Pro Posts, Elementor Pro Archive Products and Elementor Pro Products. And pagination base "page". So far. It has only been tested with the Hello Elementor theme.
https://github.com/jifola/Scroll-And-Load-For-Elementor

[guiguilyon]

Hello everyone,
I have made a widget that adds infinite scroll and load more functionality to Elementor Archive Posts, Posts, Archive Products and Products. Custom selectors can also be used. So far this widget is completely free. I have plans to make a version that adds JetSmartFilters and FacetWP compatibility, and other settings. But first I want to make sure that everything works as it should so far. So I would really appreciate if you would test it, and report back with errors and ideas. Instructions are in the README file in the plugin folder. Thank you.

https://github.com/jifola/Scroll-And-Load-For-Elementor

OMG It works! It works! Finally! 👯 I tried everything I could before. All the infinite scroll plugins. It was kinda working with Catch Infinite scroll, but only on desktop, not mobile. And it was unreliable.
Thank you so much!

With your plugin it works everywhere! I only tried the infinite scroll so far. I want my visitors to just have to scroll down without thinking of pressing a button to load more. Any effort can distact or annoy them enough to leave. :)

Any idea how to still be able to reach the footer from an infinite scroll though? I was thinking of a floating button opening it maybe. But I don't know if Elementor can do that.

Also, can you tell if you are an experienced coder or not. How hard was it to develop this feature? Any difficulty that could explain why Elementor developpers don't do it? Or is that so easy even a begginer developper could do it, which would make it inexcusable for Elementor to not do it.

[swinggraphics]

Also, can you tell if you are an experienced coder or not. How hard was it to develop this feature? Any difficulty that could explain why Elementor developpers don't do it? Or is that so easy even a begginer developper could do it, which would make it inexcusable for Elementor to not do it.

It's inexcusable that infinite scroll and "Load more" options aren't built in to Elementor.

[jifola]

Hello @guiguilyon, it's nice to hear that someone can use the plugin :) I have made some changes and scrolling to the bottom of the page is now possible if you set bottom offset to 0.

I didn't know anything about Elementor until 5-6 weeks ago, but I have played around with Wordpress for years. And it really annoyed me that this feature was missing and I wanted to be able to add it individually. I really like the Hello Elementor theme because it is so lightweight, and I didn't want to use a heavy theme instead.

I don't know if the plugin is made the correct Elementor way but it works :) And it's simple and lightweight. I am not a coding wiz and I just do this as a hobby, but I have taken a look behind some of the other plugins for Elementor and they look complicated so I don't think it would be easy to make such a plugin in that way.

And please still let me know if you find any errors.

[digitalchet]

This is great. Thanks a bunch!

If you have the time and inclination please consider tackling the Portfolio widget next. ;)

[jifola]

Hello @digitalchet, that is next on the list. But this plugin relies on there even being some pagination. It would be fairly easy to make in combination with JetSmartFilters pagination widget. But that is a paid plugin, and that is not what i have in mind for this plugin. It will take some time to figure it out.

[digitalchet]

Fantastic. That's all one could ask for. There's finally a light at the end of the tunnel. :)

[guiguilyon]

Hello @guiguilyon, it's nice to hear that someone can use the plugin :) I have made some changes and scrolling to the bottom of the page is now possible if you set bottom offset to 0.

And please still let me know if you find any errors.

Hi!

No error for now! :)

But there's a feature I think would be nice. You know how some news website have an infinite scrolling of their articles so you can read one entirely (so not the list of articles but the entire article) and the next one has already loaded underneath as you were scrolling down.

Is there anyway I could apply the infinite scroll to the Elementor single template? So that when a visitor is reading a post, the next post automatically loads below as he is scrolling through the first post and so on. So he can read posts without ever clicking "next post"?

I guess I could use the "Pagination for Cutom selector" of your plugin. But I have no idea what selectors to use. I added a Post Navigation widget to my Single Post template. I know I could use the F12 console from Chrome to check the selectors of the Post navigation widget. But I always had a hard time figuring this out with the other infinite posts plugins I tried in the past.

Could that be implemented as one of the "Pagination for" menu? Something like "Elementor Single Post" maybe? Or just help with what custom selectors I should put to make it work?

Thank you for this great plugin again! :)

[joychetry]

@guiguilyon I get what you are saying, this specific plugin does not have that capability yet. It will require a separate Widget for that to work.
Here's some good news, I am working on it and will be releasing soon.

[jifola]

Hello @guiguilyon that is good news :) And I will be adding the feature you requested. Next time could you please ask for features by opening a new issue in the repository. It is easier for me to manage. It will be a needed abstraction from the Portfolio pagination problem. That one is a tough nut to crack. I have been able to make it work, but so far only with Current Query setting. @joychetry I don't know why you would think that it is not possible, but it is :) I have opened 2 new issues in the repository for portfolio and single post.

https://github.com/jifola/Scroll-And-Load-For-Elementor/issues/3
https://github.com/jifola/Scroll-And-Load-For-Elementor/issues/2

[joychetry]

I mean it is not yet available @jifola. Great if you are working on it. I have been modifying and working on the same.

[jifola]

Ah okay :)

[joychetry]

@jifola can you please say hi to me @ https://joychetry.com/contact

[pako69]

@jifola
You've done an incredible job!
4 yours after the first request, a single men just do it...
Put it on the WordPress repo and make a premium version and you're done ;-)
Thanks for all

Best of all it works with lazyloading.

[pako69]

The (now) missing features to Elementor Pro Posts is a Filter Bar, but that is another story...

[jifola]

Hello @guiguilyon, Elementor Pro Single Post has been added :) Please let me know if this was not what you had in mind. I imagined that you didn't want to add the widget to every single post so it has been made to work with the Elementor single post template. Again this has only been tested with the Hello Elementor theme. I am also trying to figure out how to add some kind of separator between the posts but for now this will have to do :)

https://github.com/jifola/Scroll-And-Load-For-Elementor

Thanks @pako69 :) When the Portfolio problem has been cracked it's time to clean up the plugin before it get's too messy. Things have gone a little too fast this last week. But you are more than welcome to make feature requests.

[guiguilyon]

Awesome! I wasn't expecting you do it so soon! I'll tell you add soon as I tested it.
Thank you! 🙂

[swinggraphics]

@jifola When you get yours up on wordpress.org, we'll all go give it 5 stars.

[princesshorsepower]

omg, so how to get the latest version?

On Thu, May 28, 2020 at 8:54 AM jifola [e-mail] wrote:

Hello @guiguilyon https://github.com/guiguilyon @pako69
https://github.com/pako69 @digitalchet https://github.com/digitalchet
@princesshorsepower https://github.com/princesshorsepower. I have made
the repository private. Just email me. This guy submitted the plugin to the
Wordpress repository. It is not even finished yet. I hope that I am still
able to upload the plugin to the Wordpress repository myself at some point.
When it is done. What a d*ck move.

https://joychetry.com/infinite-scroll-elementor/
https://github.com/joychetry

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/1284#issuecomment-635025438,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMS5SG5PDGFQQ4CVIAC2RETRTWY3PANCNFSM4C7M5MMQ
.

[pako69]

hi @jifola How can I email you? I don't know your email adresse... Thanks :)

[jifola]

Hi I sent invites :)

[marcocarrozzini]

hi @jifola , awesome plugin. could you please add me?

[d-packs]

That was a very nasty move to publish your code as a plugin.

I'd also be interested in having access to the private github repo, thanks.

I don't currently have a project requiring this in my pipeline. but when I
will have, I will probably submit my pull requests to that plugin if I see
some improvemnts that can be made. I'm a developer but hate the fact I have
to extend a paid plugin, especially when we talk about such a basic
feature.

On Thu, May 28, 2020 at 12:52 PM marcocarrozzini [e-mail]
wrote:

hi @jifola https://github.com/jifola , awesome plugin. could you please
add me?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/1284#issuecomment-635240156,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AIDH5TZB7XF5ANMO3RAEPTTRTYX5HANCNFSM4C7M5MMQ
.

[princesshorsepower]

[image: grafik.png]

On Thu, May 28, 2020 at 5:09 PM jifola [e-mail] wrote:

I invited you to the repository

---

Fra: princesshorsepower [e-mail]
Sendt: 28. maj 2020 03:20
Til: elementor/elementor [e-mail]
Cc: jifola [e-mail]; Mention [e-mail]
Emne: Re: [elementor/elementor] Feature Suggestion - Paginate/Lazy Load
Posts/Portfolio (#1284)

omg, so how to get the latest version?

On Thu, May 28, 2020 at 8:54 AM jifola [e-mail] wrote:

Hello @guiguilyon https://github.com/guiguilyon @pako69
https://github.com/pako69 @digitalchet <https://github.com/digitalchet

@princesshorsepower https://github.com/princesshorsepower. I have made
the repository private. Just email me. This guy submitted the plugin to
the
Wordpress repository. It is not even finished yet. I hope that I am still
able to upload the plugin to the Wordpress repository myself at some
point.
When it is done. What a d*ck move.

https://joychetry.com/infinite-scroll-elementor/
https://github.com/joychetry

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/elementor/elementor/issues/1284#issuecomment-635025438
,
or unsubscribe
<
https://github.com/notifications/unsubscribe-auth/AMS5SG5PDGFQQ4CVIAC2RETRTWY3PANCNFSM4C7M5MMQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<
https://github.com/elementor/elementor/issues/1284#issuecomment-635072019>,
or unsubscribe<
https://github.com/notifications/unsubscribe-auth/AG5RRMA5SB6A3KJ5CSUTH73RTXJ6BANCNFSM4C7M5MMQ

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/elementor/elementor/issues/1284#issuecomment-635219109,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMS5SG7VSOJQZIDNTU5W2NTRTYS5VANCNFSM4C7M5MMQ
.

[koddajr]

Hi I sent invites :)

Hi, can you invite me, i was waiting this feature for so long haha

i have reported this repository that stole your code, this cannot go unpunished, I recommend that the elementor community do the same.

[hojtfredrik]

Pls invite me also!

I have been waiting for this feature for ages.

[vibrantj]

Would love to receive an invite as well.
Thank you for all your efforts here!

[jifola]

I added support for the Elementor portfolio widget. With some restrictions. It supports the 3 post types post, page and product. And any sorting that doesn't exclude any posts. So far. I didn't make it compatible with the filter bar. What it does is add display none to the posts not selected. So next loaded page could be anything or empty.

I wanted to get the Elementor only part working first, so it is not compatible with jetsmartfilters yet.

What is the common use of the portfolio widget? I don't use it. So if someone could please tell me, I could adapt to it. Thanks. And please let me know if something isn't working properly.

Remember to add "scroll-and-load" to the query ID of the portfolio widget.

https://github.com/jifola/Scroll-And-Load-For-Elementor

[Nathaniel-Fernandes]

I CANNOT BELIEVE that the Elementor devs won't even RESPOND to 300+ PAYING PRO customers for a SIMPLE FEATURE.

Even if you don't have an answer yet, at least tell us your PLANNED COMPLETION DATE. This issue was raised in _2017_ for crying out loud.
https://github.com/elementor/elementor/issues/12054
I love elementor for it's other great features, but this is _simply inexcusable_.

I think I might switch to beaver

[RealBenihime]

It’s inexcusable I tell you. I’ve lost hope in them even planning on implementing this simple feature. They developed Elementor for WordPress which was originally a blogging platform, yet they prioritize a useless feature like lottie animations 🚮🚮🚮 instead of this feature which was supposed to be implemented from version 1.0!

Sent from Outlookhttps://aka.ms/qtex0l for iOS

---

From: Merlin-the-Warlock [e-mail]
Sent: Saturday, August 8, 2020 3:59:52 PM
To: elementor/elementor [e-mail]
Cc: Sibongiseni Msomi [e-mail]; Mention [e-mail]
Subject: Re: [elementor/elementor] Feature Suggestion - Paginate/Lazy Load Posts/Portfolio (#1284)

I CANNOT BELIEVE that the Elementor devs won't even RESPOND to 300+ PAYING PRO customers for a SIMPLE FEATURE.

Even if you don't have an answer yet, at least tell us your PLANNED COMPLETION DATE. This issue was raised in 2017 for crying out loud.

12054https://github.com/elementor/elementor/issues/12054

I love elementor for it's other great features, but this is simply inexcusable.

I think I might switch to beaver

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/elementor/elementor/issues/1284#issuecomment-670932348, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEXGWMCHKU4YDL2OMVRLTYDR7VK5RANCNFSM4C7M5MMQ.

[Nathaniel-Fernandes]

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.

Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

For those googling: This worked well for me. You can get it set up in 5 minutes!! Thx @shaneonabike

[rodolphebertozzo]

+1. It's time 😉

[cake1123]

This is actually very bad for news websites built with elementor. Properly working pagination, preferably an AJAX Next Previous is a must for "post list" widget to put in archive templates and homepage.

[alkiswebcore]

This does not want to work for me ....

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.
Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

For those googling: This worked well for me. You can get it set up in 5 minutes!! Thx @shaneonabike

[RealBenihime]

This thing only works for archive pages for me. If I’m using the posts widget on a page I’m still stuck with the boring, old numbers and nav buttons

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

---

From: alkiswebcore [e-mail]
Sent: Wednesday, August 26, 2020 12:06:32 PM
To: elementor/elementor [e-mail]
Cc: Sibongiseni Msomi [e-mail]; Mention [e-mail]
Subject: Re: [elementor/elementor] Feature Suggestion - Paginate/Lazy Load Posts/Portfolio (#1284)

This does not want to work for me ....

For folks looking for a free (like Wordpress) plugin check out Catch Infinite Scroll https://wordpress.org/plugins/catch-infinite-scroll/ which I found to work really well with the Posts widget.
Here's my config just to give you the extra headstart (cause initially it didn't work)
Nagivation: nav.elementor-pagination
Next: nav.elementor-pagination a.next
Content: .elementor-posts-container
Item: article.elementor-post

For those googling: This worked well for me. You can get it set up in 5 minutes!! Thx @shaneonabikehttps://github.com/shaneonabike

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/elementor/elementor/issues/1284#issuecomment-680787025, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEXGWMGUN375RMIGJ5EUP6TSCTNCRANCNFSM4C7M5MMQ.

[MechaDigital]

I added support for the Elementor portfolio widget. With some restrictions. It supports the 3 post types post, page and product. And any sorting that doesn't exclude any posts. So far. I didn't make it compatible with the filter bar. What it does is add display none to the posts not selected. So next loaded page could be anything or empty.

I wanted to get the Elementor only part working first, so it is not compatible with jetsmartfilters yet.

What is the common use of the portfolio widget? I don't use it. So if someone could please tell me, I could adapt to it. Thanks. And please let me know if something isn't working properly.

Remember to add "scroll-and-load" to the query ID of the portfolio widget.

https://github.com/jifola/Scroll-And-Load-For-Elementor

Hey @jifola , https://www.scrollandload.com/ is down. Could you please have a look when you get a moment? I am really hopeful it will help me get my page right but I can't get it working without those examples. Thanks!

[shaneonabike]

For the suggestion to work in everything you have to copy the code from the plugin and then adjust it accordingly. There is a conditional on the js being loaded which you can find if you look into the code as seen below. So basically, you just need to write your own enqueue_scripts to link to your specific conditions and use the same references made below ensuring to load the options as they have. And BAM it's rolling like butter on corn!

`public function enqueue_scripts() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Catch_Infinite_Scroll_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Catch_Infinite_Scroll_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */

    $settings = catch_infinite_scroll_get_options( 'catch_infinite_scroll_options' );

    $options                    = array();
    $options['jetpack_enabled'] = ( class_exists( 'Jetpack' ) ) ? true : false;
    $options['image']           = $settings['image'];
    $options['load_more_text']  = $settings['load_more_text'];
    $options['finish_text']     = $settings['finish_text'];

    /** Removed is_singular to support elementor pagination */
    if ( ! is_singular() || is_search() || 'nav.elementor-pagination' === $settings['navigation_selector'] ) {
        $options['event']              = $settings['trigger'];
        $options['navigationSelector'] = $settings['navigation_selector'];
        $options['nextSelector']       = $settings['next_selector'];
        $options['contentSelector']    = $settings['content_selector'];
        $options['itemSelector']       = $settings['item_selector'];
        $options['type']               = 'post';

        if ( class_exists( 'WooCommerce' ) ) {
            if ( is_shop() ) {
                //WooCommerce
                $options['navigationSelector'] = 'nav.woocommerce-pagination';
                $options['nextSelector']       = 'nav.woocommerce-pagination .page-numbers a.next';
                $options['contentSelector']    = 'ul.products';
                $options['itemSelector']       = 'li.product.type-product';
                $options['type']               = 'shop';
            }
        }

        $theme            = wp_get_theme();
        $options['theme'] = $theme->stylesheet;

        wp_register_script( $this->catch_infinite_scroll, plugin_dir_url( __FILE__ ) . 'js/catch-infinite-scroll-public.js', array( 'jquery' ), $this->version, false );

        // Escaping JS before localizing.
        $escaped_options = $this->escape_js( $options );

        wp_localize_script( $this->catch_infinite_scroll, 'selector', $escaped_options );
        wp_enqueue_script( $this->catch_infinite_scroll );
    }

}

`

[creynolds-aiec]

+1 Ajax loading of new posts in the posts widget.