Hi to all
I have read all topics about AJAX/Pagination/Load More/ Infinity Scroll but don’t find universal solution/sample for all users “dummies”
As I understand correctly for creation we will need
controller / template / snippet and js (if we create infinity scroll)
Can anyone helps me to show example for loadmore and for infinity scroll?
Simple example for title/desc/image with 10 item pagination…
We have recently added an Ajax load more recipe in the cookbook, which you could adapt to Kirby 2.3.2 (it uses the new content representations feature of Kirby 2.4). While it works with a load more button, it can also easily be adapted to be used with infinite scroll (I don’t have an example, though)
Thx! Very useful article!
Nice article (even though jQuery is used)!
Btw the link to the forum in the very last paragraph is not working.
Some question…
If I have detailed page where I have several related content loops. http://99bookmakers.com/bookmakers/bet365 (for example)
And I want to show load more for every content type (see tabs bonuses, sites, etc) on one page…
This sample is shows how I can do it for listing where url separated by page:2 / 3 / etc.
But I don’t understand how show it for related content without changing url
The example in the cookbook does not use pagination, but limit() and offset(), the URL is not changed.
Please help me find mistake please…
Im create controller bookmaker.php
<?php
return function($site, $pages, $page) {
$betting_sites = page('betting-sites')->children();
$count_sites = $betting_sites->count();
// check if the request is an Ajax request and if the limit and offset keys are set
if(r::ajax() && get('offset') && get('limit')) {
// convert limit and offset values to integer
$offset = intval(get('offset'));
$limit = intval(get('limit'));
// limit projects using offset and limit values
$betting_sites = $betting_sites->offset($offset)->limit($limit);
// check if there are more projects left
$more = $count_sites > $offset + 1;
// otherwise set the number of projects initially displayed
} else {
$offset = 0;
$limit = 9;
$betting_sites = $betting_sites->limit($limit);
}
return compact('offset', 'limit', 'betting_sites', 'more');
};
I create loop in template bookmaker.php
<div role="tabpanel" class="tab-pane fade" id="site-reviews">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row bookmaker-site-reviews" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php foreach($betting_sites as $betting_site): ?>
<?php snippet('bookmaker-site-review', compact('betting_site')) ?>
<?php endforeach ?>
<div class="col-md-12">
<a class="btn btn-loading" >
Load More
</a>
</div>
</div>
</div>
</div>
</div>
</div>
create snippet bookmaker-site-review.php
<?php $site_reviews = $betting_site->site_review()->yaml(); ?>
<?php foreach($site_reviews as $site_review): ?>
<?php if($page->uid() == $site_review['bookmaker_name']): ?>
<div class="col-md-4">
<div class="site autoheight">
<div class="site-logo clearfix">
<?php if ($image = $betting_site->site_image()->toFile()): ?>
<img src="<?php echo $image->crop(400, 250)->url(); ?>" alt="<?php echo $betting_site->title()->html() ?>">
<?php else: ?>
<img src="http://api.pagepeeker.com/v2/thumbs.php?size=x&code=c24f1d61b4&url=<?php echo $betting_site->site_link() ?>">
<?php endif ?>
</div>
<div class="site-header clearfix">
<h3><a href="<?php echo $site->url() ?>/betting-site-preview?name=<?php echo base64_encode($site_review['review_url']); ?>" rel="nofollow" target="_blank"><?php echo $betting_site->title()->html() ?></a></h3>
<?php foreach($betting_site->site_category()->split() as $site_category): ?>
<span class="label label-default"><?php echo l::get('site_category.' . $site_category); ?></span>
<?php endforeach; ?>
</div>
<div class="site-info">
<p><?php echo $betting_site->description()->excerpt() ?></p>
</div>
<?php if($site_review['review_rating'] == '5'): ?>
<div class="site-footer success">
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<span>Site Review (5/5)</span>
</li>
</ul>
</div>
<?php endif ?>
<?php if($site_review['review_rating'] == '4'): ?>
<div class="site-footer success">
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<span>Site Review (4/5)</span>
</li>
</ul>
</div>
<?php endif ?>
<?php if($site_review['review_rating'] == '3'): ?>
<div class="site-footer">
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<span>Site Review (3/5)</span>
</li>
</ul>
</div>
<?php endif ?>
<?php if($site_review['review_rating'] == '2'): ?>
<div class="site-footer danger">
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<span>Site Review (2/5)</span>
</li>
</ul>
</div>
<?php endif ?>
<?php if($site_review['review_rating'] == '1'): ?>
<div class="site-footer danger">
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<span>Site Review (1/5)</span>
</li>
</ul>
</div>
<?php endif ?>
<?php if($site_review['review_rating'] == '0'): ?>
<div class="site-footer">
<ul>
<li>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<span>No Score</span>
</li>
</ul>
</div>
<?php endif ?>
</div>
</div>
<?php endif ?>
<?php endforeach ?>
Create JSON template bookmaker.json.php
<?php
$html = '';
foreach($betting_sites as $betting_site) {
// reuse the project snippet to create the HTML for each project
// we need to set the third parameter to true, to return the
// snippet content instead of echoing it
$html .= snippet('bookmaker-site-review', compact('betting_site'), true);
}
// add $html and $more to the $data array
$data['html'] = $html;
$data['more'] = $more;
// JSON encode the $data array
echo json_encode($data);
Create JS
$(function(){
var element = $('.bookmaker-site-reviews');
var url = element.data('page') + '.json';
var limit = parseInt(element.data('limit'));
var offset = limit;
$('.btn-loading').on('click', function(e) {
$.get(url, {limit: limit, offset: offset}, function(data) {
if(data.more === false) {
$('.btn-loading').hide();
}
element.children().last().after(data.html);
offset += limit;
});
});
});
And the loop is emty…
If I change in template bookmaker.php
<?php foreach($betting_sites as $betting_site): ?>
to
<?php foreach(page('betting-sites')->children() as $betting_site): ?>
it will work (but will show all related content)
Also when I click loadmore button im see JS error
http://take.ms/FMlQu 404 (error) for JSON page…
What Im doing wrong?
Any ideas?..
Im also try to echo $betting_sites it works, but controller stop works when Im try to get info from $betting_site->site_review()->yaml(); in snippet. If echo $betting_site->title() it shows data… if try to get yaml or toStructure it shows array()
I’ll try to look into that tomorrow …
Which Kirby version are you using? Content representations only work with the upcoming 2.4.0 version
Kirby 2.3.2
So I need to wait until 2.4.0 is released?
Yes, or you have to do it differently, i.e. check if your request is an ajax request, if yes, return json, if no, return your template stuff.