Isotope + Infinite Scroll + Roots Sage Theme

sage
1

Hello,

I am trying to implement Isotope and Infinite Scroll on a Root’s Sage Wordpress Theme. I am also using Bedrock and Trellis via Digital Ocean. I managed to make Isotope work with Image Loader, but Infinite Scroll is not working and I receive no errors from jslint.

Here is the section of interest in my main.js:

import ‘isotope-layout/dist/isotope.pkgd.min’;
import ‘imagesloaded/imagesloaded.pkgd.min’;
import ‘infinite-scroll/dist/infinite-scroll.pkgd.min.js’;

Here is the section of interest in my common.js:

// Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
});

// Image Loaded
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

// Infinite Scroll
var iso = $grid.data('isotope');
$grid.infiniteScroll({
  path: 'page/{{#}}/',
  append: '.grid-item',
  outlayer: iso,
  hideNav: '.navigation',
});

Where .grid is my container and .grid-item are my post’s thumbnails managed by Isotope.

Since I have no errors coming up, do you see something strange in the code? Is there a WordPress thing I have to do in addition of this code? I also noticed that the hidenav parameter is working, which make me think that Infinite Scroll is firing up somewhere but not doing its job properly.

Since it’s a WordPress, I don’t see how I could replicate this on CodePen. Sorry about that. However, this is the website I am working on right now:


I have 12 posts that should show up in increments of 3 for this test.

Thanks for your help.