Keyword

K2 - AJAX Pagination - load more items

More
7 years 1 month 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
7 years 1 month 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
7 years 1 month 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
7 years 1 month ago - 7 years 1 month 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: 7 years 1 month ago by Zed. Reason: errors

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

More
7 years 1 month ago - 7 years 1 month 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: 7 years 1 month ago by willburn.

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

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 1 month 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
6 years 6 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
6 years 3 months ago - 6 years 3 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: 6 years 3 months ago by Dimitris.

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

More
6 years 3 months ago - 6 years 3 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: 6 years 3 months ago by JoomlaWorks.

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

More
6 years 3 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.

More
6 years 2 months ago #171018 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
That is correct, given you only show the "leading" items block.

Fotis / 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 months ago #171049 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
ok I got it to work!
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.

More
6 years 2 months ago #171061 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
You're welcome.

Fotis / 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 months ago - 6 years 2 months ago #171075 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
Even though it works I've noticed something, that it might not cause any issues in the default templates, it does though cause issues with mine.


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

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

More
6 years 2 months ago #171089 by Dimitris
Replied by Dimitris on topic K2 - AJAX Pagination - load more items
well I did manage to get the results I wanted by changing
var items = $(data).find('#' + newsContainer);

to
var items = $(data).find(".itemContainer");

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

More
6 years 2 months ago #171113 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
The example originally provided is a bit messy. I'll create a more modern equivalent using the default layouts and paste it back here in the coming days.

Fotis / 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 1 month ago #171381 by bonzomedia
Replied by bonzomedia on topic K2 - AJAX Pagination - load more items
This was what I was looking for. However, this method obviously does not trigger K2's onK2AfterDisplayContent which is what my plug-in needs in order to trigger. Any way to trigger this client side in the JS?

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

More
6 years 1 month ago #171384 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
The plugin event is inside category_item.php which means it is triggered as the items are already in the container. If it's not triggered, perhaps you have disabled K2 plugin parsing in the category settings (or even specific K2 items). And of course make sure the plugin event is present in category_item.php. Compare with the source template files when in doubt.

Fotis / 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 2 months ago #174761 by Jonathan
Replied by Jonathan on topic K2 - AJAX Pagination - load more items
This does work, however as Dimitris pointed in default the containers under itemListLeading conflict with the template i am using, it works but once i load more items the styling gets slightly messed up. I tried Dimitiris suggestion by using:
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.

More
5 years 2 months ago #174780 by JoomlaWorks
Replied by JoomlaWorks on topic K2 - AJAX Pagination - load more items
Just show one of the blocks, e.g. "leading". This will simplify the appending process.

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.


Powered by Kunena Forum