Reputation: 72
I installed an extension for my magento store, that make a quickview modal in the products list (imedia quickview - it' actually a bootstrap modal ) and works nice, but due to many products in the list i add a script for infinite scroll (http://infiniteajaxscroll.com/vendor/jquery-ias/dist/jquery-ias.min.js). Everything was fine, until i saw that the infinite scoll doesn't seems to work if the modal popup appears.
Here it's what I've done so far:
<pre>
<script type="text/javascript">
jQuery(window).load(function(){
activatePopup();
// Initialize the pagination plugin
var ias = jQuery.ias({
container : ".category-products",
item : ".product-item ",
next : "a.next",
pagination : '.pages',
loader : "<img src='/img/sys/loader.gif' />",
triggerPageThreshold : 0,
});
// Pagination plugin callback function
ias.on('rendered', function(items) {
activatePopup();
});
});
function activatePopup() {
var baseUrl = '<?php echo Mage::getBaseUrl(); ?>';
var containerClass = 'category-products';
$('.'+containerClass+' li').each(function(e){
var productId = $(this).find('.quick_view_btn').attr('id');
$(this).click(function(){
$(this).find('.quick_view_btn').html('Incarca..');
$.ajax({
type: "POST",
url: baseUrl+"quickview",
data: "id="+productId,
success: function(msg){
//$("html, body").animate({ scrollTop: 0 }, "slow");
$('.'+containerClass+' li .quick_view_btn').html('MAI MULT');
$('#modal .main-content').empty().append(msg);
$('#modal').css({'display': 'block', 'top':'50%','visibility':'visible','opacity':'1'});
$('body').css('overflow', 'hidden');
// popup submit validation
}
});
});
});
}
</script>
</pre>
Upvotes: 1
Views: 647