Skip to content

Magento : Infinite Scroll for WordPress Posts Integration on Magento

i wrote some jquery script to perform infinite scroll WordPress posts on magento site, here you go

<style>
/*hide the toolbars */
.pager.pager-no-toolbar{
	display:none;
}

/* biar kelap kelip */
.blink_me {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

</style>
<script>
$j = jQuery.noConflict();
$j(document).ready(function(e) {

	var container_index = 0;
	var current_page = <?php echo $this->getRequest()->getParam('page') + 0; ?> ;
	var current_url = window.location.href;
	var base_url = '';

	if(current_page == 0)
	current_page = 1;

	$j(window).scroll(function() {
	   if($j(window).scrollTop() + $j(window).height() == $j(document).height()) {

		 $j('.post-list').append('<h2 class="load-notif blink_me">Loading.....</h3>');

		 $j('.post-list').append('<div class="load_contain'+container_index+'"></div>');
		 current_page = current_page + 1;

		 $j('.post-list .load_contain'+container_index).load(current_url+'?page='+current_page+'  .post-list > * ', function( response, status, xhr ) {

			if(status == 'success'){
				$j('.load-notif').remove();
			};

  		});

		 container_index++;

	   }
	});

});
</script>

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *