Magento 2 add to cart with ajax is not working for infinite scroll

Question

I have the infinite scroll module. This removes the pagination on category pages, and shows a button, when clicked loads more products.

The ajax add to cart is not working properly, only for the first items that are loaded (the first page in this case). When I press the button load more, new products are coming (so this is now the page 2), but for these products the add to cart with ajax is not working, it refreshes the page instead and after that the product is added to cart.

Now the link is changed, and now I can add again with ajax products on cart for page 2. So the link is changed it is, for example , loremipsum.com/categoryname?p=2&_=1510315834548 something like that.

If I press now the load more button, it should be page 3, but again the link doesn't change, it's the one with ?p=2 and if I add a product to cart, from the ones that belong to page 3, ajax add to cart not working, the page is loading again and the link change with ?p=3. And so on

If I don't add anything in the cart and only press the load button over and over, the link remains without the pagination something like: loremipsum.com/categoryname

So I think the problem is because the link doesn't have the page that was loaded, and only after the refresh it's added and the ajax add to cart is working for the products that belong to the page in the link.

I should add custom js code to init.phtml file when the module ajax loads completely. But don't know what exactly. Does anybody knows how to make this work?

This is the init.phtml file

<?php  
$helper = $this->helper('Lof\AjaxScroll\Helper\Data'); 
$productListMode = $block->getProductListMode(); 
$enable = $block->isEnable(); 

if($helper->isEnabled() && $enable) { ?>  
<script>
    require(['jquery',
        'Lof_AjaxScroll/js/script'  
        ], function ($) {

            $('<?php echo $helper->getConfig('lofajaxscroll/selectors/toolbar') ?>').<?php echo $helper->getConfig('lofajaxscroll/design/hide_toolbar') ? 'hide' : 'show' ?>();
            windowLoadedFlag = false;
            window.onload = function () {
                windowLoadedFlag = true;
            };   
            var jQueryWaiter = function () {
                var functions = [];
                var timer = function() {
                    if( typeof window.jQuery != 'undefined') {
                        while (functions.length) {
                            functions.shift()(window.jQuery);
                        }
                    } else {
                        window.setTimeout(timer, 100);
                    }
                };
                timer();
                return {
                    execute: function(onJQueryReady) {
                        if (window.jQuery) {
                            onJQueryReady(window.jQuery);
                        } else {
                            functions.push(onJQueryReady);
                        }
                    }
                };
            }();

            window.SgyIAS = {
                debug: false,
                _log: function(object) { 
                    //console.log(object); 
                },
                init: function(){ 
                    jQuery(function($) {
                        var config = {
                            item: '<?php echo $productListMode == 'grid' ? $helper->getConfig('lofajaxscroll/selectors/grid_mode') : $helper->getConfig('lofajaxscroll/selectors/list_mode') ?>',
                            container : '<?php echo $helper->getConfig('lofajaxscroll/selectors/content') ?>',
                            next: '<?php echo $helper->getConfig('lofajaxscroll/selectors/next') ?>',
                            pagination: '<?php echo $helper->getConfig('lofajaxscroll/selectors/pagination') ?>',
                            parameter: '<?php echo $helper->getConfig('lofajaxscroll/instances/enable_parameter') ?>',
                            delay: 600,
                            negativeMargin: <?php echo (int) $helper->getConfig('lofajaxscroll/design/buffer') ?>,
                            history: {
                                prev: '.prev'
                            },
                            noneleft: {
                                text: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/done_text'))) ?>',
                                html: '<div class="ias-noneleft" style="text-align: center;">{text}</div>'
                            },
                            spinner: {
                                <?php if($block->getLoaderImage() !== false): ?>
                                src: '<?php echo $block->getLoaderImage(); ?>',
                            <?php endif; ?>
                            html: '<div class="ias-spinner" style="text-align: center;"><img style="display:inline" src="{src}"/> <?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/loading_text'))); ?></div>'
                        },  
                        trigger: {
                            text: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/load_more_text'))) ?>',
                            html: '<div class="ias-trigger ias-trigger-next" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                            textPrev: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/load_more_text'))) ?>',
                            htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                            offset: <?php echo (int) $helper->getConfigData('lofajaxscroll/design/load_more') ?>
                        }

                    };


                    if (window.ias_config){
                        $.extend(config, window.ias_config);
                    }


                    SgyIAS._log({extension: 'ias', config: config});
                    window.ias = $.ias(config);

                    SgyIAS._log({extension: 'paging'});
                    window.ias.extension(new IASPagingExtension());

                    SgyIAS._log({extension: 'spinner'});
                    window.ias.extension(new IASSpinnerExtension(config.spinner));

                    SgyIAS._log({extension: 'noneleft'});
                    window.ias.extension(new IASNoneLeftExtension(config.noneleft));

                    SgyIAS._log({extension: 'trigger'});
                    window.ias.extension(new IASTriggerExtension(config.trigger));  

                        // debug events
                        window.ias.on('scroll', function(scrollOffset, scrollThreshold){
                            SgyIAS._log({eventName: 'scroll', scrollOffset: scrollOffset, scrollThreshold: scrollThreshold});
                        });
                        window.ias.on('load', function(event){
                            SgyIAS._log({eventName:'load', event: event});
                        });
                        window.ias.on('loaded', function(data, items){
                            SgyIAS._log({eventName: 'loaded', data: data, items: items});
                        });
                        window.ias.on('render', function(items){
                            SgyIAS._log({eventName: 'render', items: items});
                            if (typeof($(items).find('.lof-lazy').lazy) === 'function') {
                                $(items).find('.lof-lazy').lazy({
                                    bind: "event",
                                    delay: 0
                                });


                                // add code here  working ajax add to cart after load more button is pressed


                            }
                        }); 
                        window.ias.on('noneLeft', function(){
                            SgyIAS._log({eventName: 'noneLeft'});
                        });
                        window.ias.on('next', function(url){
                            SgyIAS._log({eventName: 'next', url: url});
                        });
                        window.ias.on('ready', function(){
                            SgyIAS._log({eventName: 'ready'});
                        });
                        if(windowLoadedFlag){
                            $(window).load();
                        }

                        SgyIAS._log('Done loading IAS.');

                    });

                }
            };
            jQueryWaiter.execute(function(){
                SgyIAS.init();

            });
        });


//]]>
</script>
<?php } ?>

The custom code should be added where that comment is

Answer 1

This issue is already solved in Magento 2 Load More Product Script

You can directly use the fixed module available here - https://github.com/harrigo/Magento2-InfiniteScroll