Infinite Scroll customizations

[James]

I know this is likely out of the scope of your support but you all have been exceptionally helpful in the past. The most recent update of GP premium has changed the way you all have implemented the infinite scroll and I’m struggling to replicate the setup that was working previously.

Previously in the scripts.js file I was able to edit the history parameter to be “replace” instead of “false” such that the page numbers get updated when infinite scrolling:

$container.infiniteScroll( {
path: '.nav-links .next',
append: '#main article',
history: 'replace',
outlayer: msnry,
loadOnScroll: $button.length ? false : true,
button: $button.length ? '.load-more a' : null,
scrollThreshold: $button.length ? false : 600,
} );

But now the scripts.js file only contains the following and i haven’t figured out how to update it such that it replicates the previous behavior.

var infiniteScrollInit = generateBlog.infiniteScrollInit;

infiniteScrollInit.outlayer = msnry;

$container.infiniteScroll( infiniteScrollInit );

[Tom]

Hi there,

You no longer need to change the core file, which is good!

Now you can do this:

add_filter( 'generate_blog_infinite_scroll_init', function( $args ) {
    $args['history'] = 'replace';

    return $args;
} );

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[James]

That worked – awesome. Yes, great that I don’t have to change the core files. One more question/feature request if I may. I’ve also added in the following code in the previous version of the scripts.js to try and track “virtual page views”, although I haven’t had much luck with the code itself working. Was wondering if there was a way to incorporate it via the add_filter or elsewhere besides modifying the core file?

		$container.on( 'history.infiniteScroll', function() {
           	 ga( 'set', 'page', location.pathname );
	         ga( 'send', 'pageview' );
	        });

[Tom]

That’s tricky..

You could try this:

add_action( 'wp_enqueue_scripts', function() {
    $script = "var $container = $( '#main article' ).first().parent();

        $container.on( 'history.infiniteScroll', function() {
            ga( 'set', 'page', location.pathname );
            ga( 'send', 'pageview' );
        });";

    wp_add_inline_script( 'generate-blog', $script );
} );

That should add it after the HTTP request for the script in your HTML. Not 100% sure it will work, though.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[James]

Something wrong with that code…

syntax error, unexpected ‘$container’ (T_VARIABLE), doesn’t like “$container.on( ‘history.infiniteScroll’, function() {“

[Tom]

Sorry about that, can you try now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts