I've set this up so that a main blog page displays an initial 3 posts, with tags when loaded fully.
[[!getResourcesTag?
&element=`getResources`
&elementClass=`modSnippet`
&tpl=`blog-item`
&tplFirst=`blog-item-featured`
&limit=`3`
&hideContainers=`1`
&parents=`5`
&tagKey=`blog-tags`
&includeTVs=`1`
&tvPrefix=``
]]
The initial 3 posts displayed are sorted by date order on the main landing page (most recent first) e.g. Article 1, Article 2 & Article 3.
On clicking a "more posts" button underneath the 3 posts that are displayed, infinite scroll pagination (which has been set-up) kicks in.
<button class="load-more" data-parent="5" data-current-page="1">More Posts</button>
But when clicking on More Posts - Article 3 (again) & Article 4 are returned - instead of Article 4 & Article 5.
$method = $modx->getOption('method', $scriptProperties, 'initial');
$limit = $modx->getOption('limit', $scriptProperties, 3);
$parent = $modx->getOption('parent', $scriptProperties);
$tpl = $modx->getOption('tpl', $scriptProperties);
$tplFirst = $modx->getOption('tplFirst', $scriptProperties);
$load = (int) $_GET['page'];
$offset = 0;
if($method == "initial") {
if($load != 0) {
$limit = $limit * $load;
}
} elseif($method == "pagination") {
$offset = $limit * ($load - 1);
}
$page = $modx->runSnippet('getResources', array(
'parents' => $parent,
'limit' => $limit,
'offset' => $offset,
'includeTVs' => '1',
'tvPrefix' => '',
'includeContent' => '1',
'tpl' => $tpl,
'tplFirst' => $tplFirst
));
I've played about with parameters & tried altering the code that deals with offset but can't seem to figure it out.
Some help would be great.
UPDATED CODE ADDED
I did something similar a while back, almost exactly actually [must have googled it]
the only difference in my inital getResources call is I used an offset of 0
<div id="posts">
<!-- get first few articles -->
[[!getResources?
&parents=`10,22`
&depth=`999`
&limit=`6`
&offset=`0`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&tpl=`infiniteHomePageTpl`
&sortby=`publishedon`
&showHidden=`1`
&hideContainers=`1`
]]
</div>
<button id="scroller" class="btn btn-primary load-more" data-parents="10,22" data-offset="6" data-posts="3">Show More Articles</button>
<button id="scolltotop" class="btn btn-primary scrollToTop" style="display:none;">Back to Top</button>
Just for Brevity, here is the snippet and js:
<?php
$output = array(
'status' => 'success',
'msg' => 'message',
'data' => 'blaaaaaaaah',
'lastpost' => FALSE,
);
$properties = $scriptProperties['data'];
$modx->log(modX::LOG_LEVEL_ERROR,'Running processor: ajax.generic, scriptProperties = '. print_r($properties, TRUE));
$limit = $properties['limit'];
$parents = $properties['parents'];
$tpl = $properties['tpl'];
$offset = $properties['offset'];
$depth = $properties['depth'];
$sortby = $properties['sortby'];
$debug = $properties['debug'];
$showHidden = $properties['showHidden'];
$hideContainers = $properties['hideContainers'];
$modx->log(modX::LOG_LEVEL_ERROR, 'tpl = ' . $tpl);
$posts = $modx->runSnippet('getResources', array(
'parents' => $parents,
'depth' => $depth,
'limit' => $limit,
'offset' => $offset,
'includeTVs' => '1',
'processTVs' => '1',
'includeContent' => '1',
'tpl' => $tpl,
'debug' => $debug,
'sortby' => $sortby,
'showHidden' => $showHidden,
'hideContainers'=> $hideContainers,
));
$output['posts'] = '<div class="post-group" style="display:none" >' . $posts . '</div>';
if(strlen($posts) == 0){
$output['lastpost'] = TRUE;
}
$output = $modx->toJSON($output);
return $output;
and the JS:
// infinite scrolling on homepage
// use: <button id="scroller" class="btn btn-primary load-more" data-parents="10,22" data-offset="0" data-posts="5">Show More Articles</button>
$('.load-more').click(function(e) {
var $this = $(this);
var offset = $this.data('offset'); // the current offset for get resources
var posts = $this.data('posts'); // the number of posts to get
var parents = $this.data('parents'); // the parent ids to pull resources from
var myProperties = {
snippet: 'infiniteScroll',
limit: posts,
offset: offset,
parents: parents,
depth: 999,
sortby: 'publishedon',
showHidden: 1,
debug: 1,
tpl: 'infiniteHomePageTpl',
hideContainers: 1
};
console.log('props = ' + JSON.stringify(myProperties));
$.ajax({
type: "POST",
url: "/ajax.processor",
data: myProperties,
dataType: "json",
success: function(response) {
var newposts = response.posts;
var $div = $("div#posts");
$div.append(newposts);
$div.find(".post-group:last").fadeIn();
$('body').stop().animate({scrollTop:$div.prop("scrollHeight") + $div.height()},1000);
if(response.lastpost){
console.log('nodata');
$this.attr('disabled', 'disabled');
$this.html('no more posts');
$('.scrollToTop').show();
}
$this.data('offset', (offset + posts));
},
error: function(response){
console.log(response);
},
}).fail(function(jqXHR,textStatus,errorThrown) {
console.log(errorThrown);
}); // ajax
}); // load more
// scroll back to top on finished resources.
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
Ajax Processor
<?php
//$modx->log(modX::LOG_LEVEL_ERROR,'Running processor: ajax.generic, snippet = '. print_r($_POST, TRUE));
$output = $modx->runSnippet($_POST['snippet'], array('data' => $_POST));
header('Content-type: application/json');
return $output;