- Posts: 7
COMMUNITY FORUM
K2 - AJAX Pagination - load more items
- Zed
-
Topic Author
- Offline
- New Member
does anyone wonder how can i achieve this, loading more items in AJAX, like start with 4, then 8, 12, 16, etc....(loading 4 items each time)
some plugins do that, but are very limited, and not really suitable for custom k2 templates....
any sugestions?
thks!
zed
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
Unfortunately you will have to use a custom JS Script.
A nice infinite scrolling plugin is imakewebthings.com/waypoints/shortcuts/infinite-scroll/
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- willburn
-
- Offline
- New Member
- Posts: 11
Please Log in or Create an account to join the conversation.
- Zed
-
Topic Author
- Offline
- New Member
- Posts: 7
well, that was exactly what i thought (developing a custom JS) since the existing plugins give more problems than solutions.
so here it goes: (credits to my good old friend Nuno Costa (codehaha.com).
1. In you category definitions, define the amount of items to show in the beginning;
2. hide the default pagination;
3. In your custom (or default) category.php at the bottom of the page (outside the main k2 container div) add this code:
(attention to the vars, that define the number of items to fetch, as well as the button that makes the call)
<script>
$ = jQuery;
var url = '?start=';
var itemsToFetch = 4;
var cursor = itemsToFetch;
var newsContainer = 'itemListPrimary';
var buttonEl = $('#btn-show-more');
buttonEl.on ('click', function(evt){
evt.preventDefault();
$.get( url + cursor, function( data ) {
var items = $(data).find('#' + newsContainer);
if ( items.children().length == 0) {
buttonEl.hide();
}
$( '#' + newsContainer ).append( items );
cursor += itemsToFetch
});
});
</script>
3. Below the pagination block put your button:
<!-- AJAX load more btn --->
<div class="loadmorewrapper">
<a id="btn-show-more" href="<?php echo JRoute::_('&start=' . ( ($this->pagination->pagesCurrent) * $this->pagination->limit) ); ?>"><span class="icone"><i class="fas fa-plus-circle"></i></span></a>
</div>
and that's it :)
works fine and clean, and you can put this in every k2 category.php template , it will render exactly the same as you define you category_item.php
enjoy!
Please Log in or Create an account to join the conversation.
- willburn
-
- Offline
- New Member
- Posts: 11
I tried this, added exactly as described above, work perfectly.
Thanks for sharing!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
-
- Offline
- Platinum Member
- Posts: 15920
Kudos.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Alajos Szilagyi
-
- Offline
- New Member
- Posts: 1
Please Log in or Create an account to join the conversation.
- Dimitris
-
- Offline
- New Member
- Posts: 9
var newsContainer = 'itemListPrimary';
should be the id of the containing div right?
I'm using a template with a slightly modified category layout and the code just loads "new" items. It doesn't append them to the existing ones. It just refreshes the pages and loads the new ones. Any ideas why?
I've tested it with the default templates as well, and the same thing happens
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
If you provide your current category.php code, it'll be easier for me to pinpoint the changes.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Dimitris
-
- Offline
- New Member
- Posts: 9
As far as I can understand, I'm replacing var newsContainer = 'itemListPrimary'; with var newsContainer = 'isotope';
isotope is replacing is the default leading k2 articles.
The issue is that tried the default code, with the default k2 template (not html override) in protostar or beez and still it didn't work!
<!-- Start K2 Category Layout -->
<div id="k2Container" class="itemListView<?php if($this->params->get('pageclass_sfx')) echo ' '.$this->params->get('pageclass_sfx'); ?> listPortfolio">
<?php if($this->params->get('show_page_title')): ?>
<!-- Page title -->
<div class="componentheading<?php echo $this->params->get('pageclass_sfx')?>">
<?php echo $this->escape($this->params->get('page_title')); ?>
</div>
<?php endif; ?>
<?php if($this->params->get('catFeedIcon')): ?>
<!-- RSS feed icon -->
<div class="k2FeedIcon">
<a href="<?php echo $this->feed; ?>" title="<?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?>">
<span><?php echo JText::_('K2_SUBSCRIBE_TO_THIS_RSS_FEED'); ?></span>
</a>
<div class="clr"></div>
</div>
<?php endif; ?>
<?php if(isset($this->category) || ( $this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories) )): ?>
<!-- Blocks for current category and subcategories -->
<div class="itemListCategoriesBlock">
<?php if(isset($this->category) && ( $this->params->get('catImage') || $this->params->get('catTitle') || $this->params->get('catDescription') || $this->category->event->K2CategoryDisplay )): ?>
<!-- Category block -->
<div class="itemListCategory">
<?php if(isset($this->addLink)): ?>
<!-- Item add link -->
<span class="catItemAddLink">
<a class="modal" rel="{handler:'iframe',size:{x:990,y:650}}" href="<?php echo $this->addLink; ?>">
<?php echo JText::_('K2_ADD_A_NEW_ITEM_IN_THIS_CATEGORY'); ?>
</a>
</span>
<?php endif; ?>
<?php if($this->params->get('catImage') && $this->category->image): ?>
<!-- Category image -->
<img alt="<?php echo K2HelperUtilities::cleanHtml($this->category->name); ?>" src="<?php echo $this->category->image; ?>" style="width:<?php echo $this->params->get('catImageWidth'); ?>px; height:auto;" />
<?php endif; ?>
<?php if($this->params->get('catTitle')): ?>
<!-- Category title -->
<h2><?php echo $this->category->name; ?><?php if($this->params->get('catTitleItemCounter')) echo ' ('.$this->pagination->total.')'; ?></h2>
<?php endif; ?>
<?php if($this->params->get('catDescription')): ?>
<!-- Category description -->
<p><?php echo $this->category->description; ?></p>
<?php endif; ?>
<!-- K2 Plugins: K2CategoryDisplay -->
<?php echo $this->category->event->K2CategoryDisplay; ?>
<div class="clr"></div>
</div>
<?php endif; ?>
<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<!-- Subcategories -->
<div class="itemListSubCategories">
<ul id="filters" class="clearfix">
<li><a href="#" data-category="*">All</a></li>
<?php foreach($this->subCategories as $key=>$subCategory): ?>
<?php if($this->params->get('subCatTitle')): ?>
<!-- Subcategory title -->
<li>
<a href="#" data-category=".<?php echo strtolower(str_replace(" ", "", JText::_( $subCategory->name ))) ?>">
<?php echo $subCategory->name; ?><?php if($this->params->get('subCatTitleItemCounter')) echo ' ('.$subCategory->numOfItems.')'; ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="clr"></div>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if((isset($this->leading) || isset($this->primary) || isset($this->secondary) || isset($this->links)) && (count($this->leading) || count($this->primary) || count($this->secondary) || count($this->links))): ?>
<!-- Item list -->
<div class="itemList">
<?php if(isset($this->leading) && count($this->leading)): ?>
<!-- Leading items -->
<div id="isotope">
<?php foreach($this->leading as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if( (($key+1)%($this->params->get('num_leading_columns'))==0) || count($this->leading)<$this->params->get('num_leading_columns') )
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<?php
// Load category_item.php by default
$this->item=$item;
echo $this->loadTemplate('item');
?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if(isset($this->primary) && count($this->primary)): ?>
<!-- Primary items -->
<div id="itemListPrimary">
<?php foreach($this->primary as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if( (($key+1)%($this->params->get('num_primary_columns'))==0) || count($this->primary)<$this->params->get('num_primary_columns') )
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<div class="itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->primary)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('num_primary_columns'), 1).'%;"'; ?>>
<?php
// Load category_item.php by default
$this->item=$item;
echo $this->loadTemplate('item');
?>
</div>
<?php if(($key+1)%($this->params->get('num_primary_columns'))==0): ?>
<div class="clr"></div>
<?php endif; ?>
<?php endforeach; ?>
<div class="clr"></div>
</div>
<?php endif; ?>
<?php if(isset($this->secondary) && count($this->secondary)): ?>
<!-- Secondary items -->
<div id="itemListSecondary">
<?php foreach($this->secondary as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if( (($key+1)%($this->params->get('num_secondary_columns'))==0) || count($this->secondary)<$this->params->get('num_secondary_columns') )
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<div class="itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->secondary)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('num_secondary_columns'), 1).'%;"'; ?>>
<?php
// Load category_item.php by default
$this->item=$item;
echo $this->loadTemplate('item');
?>
</div>
<?php if(($key+1)%($this->params->get('num_secondary_columns'))==0): ?>
<div class="clr"></div>
<?php endif; ?>
<?php endforeach; ?>
<div class="clr"></div>
</div>
<?php endif; ?>
<?php if(isset($this->links) && count($this->links)): ?>
<!-- Link items -->
<div id="itemListLinks">
<h4><?php echo JText::_('K2_MORE'); ?></h4>
<?php foreach($this->links as $key=>$item): ?>
<?php
// Define a CSS class for the last container on each row
if( (($key+1)%($this->params->get('num_links_columns'))==0) || count($this->links)<$this->params->get('num_links_columns') )
$lastContainer= ' itemContainerLast';
else
$lastContainer='';
?>
<div class="itemContainer<?php echo $lastContainer; ?>"<?php echo (count($this->links)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('num_links_columns'), 1).'%;"'; ?>>
<?php
// Load category_item_links.php by default
$this->item=$item;
echo $this->loadTemplate('item_links');
?>
</div>
<?php if(($key+1)%($this->params->get('num_links_columns'))==0): ?>
<div class="clr"></div>
<?php endif; ?>
<?php endforeach; ?>
<div class="clr"></div>
</div>
<?php endif; ?>
</div>
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Dimitris
-
- Offline
- New Member
- Posts: 9
I think my mistake was that I had placed the "load more" button outside the k2 wrapper.
I still had to replace $ with jQuery because I was getting an TypeError: $ is undefined - the same happened with beez3 template
Thank you
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Dimitris
-
- Offline
- New Member
- Posts: 9
The structure is:
#itemListLeading
.itemContainer
.itemContainer
.itemContainer
The way I understand append, the extra items should be loaded under the last itemContainer
Instead the script creates this:
#itemListLeading
.itemContainer
.itemContainer
.itemContainer
#itemListLeading
.itemContainer
.itemContainer
.itemContainer
why is it duplicating the content div? Having two divs with the same id is not exactly correct either.
obviously I don't have a clue what I'm talking about, but it might have to do with this line?
var items = $(data).find('#' + newsContainer);
Please Log in or Create an account to join the conversation.
- Dimitris
-
- Offline
- New Member
- Posts: 9
var items = $(data).find('#' + newsContainer);
to
var items = $(data).find(".itemContainer");
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- bonzomedia
-
- Offline
- New Member
- Posts: 1
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- Jonathan
-
- Offline
- New Member
- Posts: 1
var items = $(data).find(".itemContainer");
But then it does not load the clr divs.
There was mention of updating the code but i think it hasn't been posted.
Please Log in or Create an account to join the conversation.
- JoomlaWorks
-
- Offline
- Admin
- Posts: 6227
Of course it's possible to do it differently by creating an outside container which will have it's contents appended to itself upon scrolling.
Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.