Keyword

K2 - AJAX Pagination - load more items

More
6 years 2 weeks ago #167045 by Zed
Hi!
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
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
6 years 2 weeks ago #167052 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 - AJAX Pagination - load more items
Hello,

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.

More
6 years 2 weeks ago #167077 by willburn
Replied by willburn on topic K2 - AJAX Pagination - load more items
I am also interrested in this. I did have a look at the link you provided, exactly what i was looking for. Anyone have a short guide how to make this happen in joomla with k2?

Please Log in or Create an account to join the conversation.

More
6 years 2 weeks ago - 6 years 2 weeks ago #167079 by Zed
Replied by Zed on topic K2 - AJAX Pagination - load more items
Hi Krikor tks for the reply.
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!
Last edit: 6 years 2 weeks ago by Zed. Reason: errors

Please Log in or Create an account to join the conversation.

More
6 years 2 weeks ago - 6 years 2 weeks ago #167082 by willburn
Replied by willburn on topic K2 - AJAX Pagination - load more items
Wow, great!

I tried this, added exactly as described above, work perfectly.

Thanks for sharing!
Last edit: 6 years 2 weeks ago by willburn.

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
6 years 2 weeks ago #167088 by Krikor Boghossian
Replied by Krikor Boghossian on topic K2 - AJAX Pagination - load more items
Nice one Willburn!
Kudos.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
5 years 5 months ago #169743 by Alajos Szilagyi
Replied by Alajos Szilagyi on topic K2 - AJAX Pagination - load more items
Thank you for this code... you helped me out a lot!!!

Please Log in or Create an account to join the conversation.

More
5 years 2 months ago - 5 years 2 months ago #170932 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
Hi,

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
Last edit: 5 years 2 months ago by Dimitris.

Please Log in or Create an account to join the conversation.

More
5 years 2 months ago - 5 years 2 months ago #170974 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
It should be the container that wraps the items in.

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 :)
Last edit: 5 years 2 months ago by JoomlaWorks.

Please Log in or Create an account to join the conversation.

More
5 years 2 months ago #171011 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
(code follows)
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.


Powered by Kunena Forum