Infinite scroll with Ditto
To build an infinite scroll solution, I had to first make sure that the Infinite Scroll plugin plays nicely with the links generated by Ditto. Unfortunately Infinite Scroll tries to guess the next page URL and in Ditto's case it didn't work as expected. I had to take the latest IS and add some specific code.
I set up the modified version on github. Please download it and set it up somewhere in your MODX Evolution install(e.g. assets/templates/site/infinitescroll). To make it work you only need the jquery.infinitescroll.min.js and ajax-loader.gif files.
Set up the jQuery snippetUpload the 2 required files jquery.infinitescroll.min.js and ajax-loader.gif to assets/templates/site/infinitescroll.
Set up your Ditto chunk
Create a new chunk named "Article" and paste the following code:
<div class="article"> <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2> <span class="info">on [+date+]</span> <div class="desc">[+introtext+]</div> </div>
I find it easier to paste a test template than using pieces of code. Here is a modified version of the test template I use in my demo. Hopefully my comments will make sense.
It is important that you don't cache the template, but call Ditto using the cache syntax.
- It currently doesn't work on the iPhone(probably iPads) but one can always click the Next button.
- I only tested with one particular implementation. Feel free to play with the IS settings
Bugs and and concerns below. Thanks