Alex Suciu
Alex Suciu

Reputation: 72

infinite scrolling doesn't work when the popup appears

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

Answers (0)

Related Questions