0

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

  • hi @Raluca, got the solution, I am also facing the same issue. – jafar pinjar Feb 1 at 9:17
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

  • hi @Vivek, there the third party module is different, here it is Lof module, can you provide fix for this extension please? – jafar pinjar Feb 1 at 9:17
  • @jafarpinjar the extension I've provided is also free and user almost same logic, even works with 2.3. I suggest you use that instead. – Vivek Kumar Feb 1 at 9:36
  • I have tested the parent module github.com/Strategery-Inc/Magento2-InfiniteScroll – Vivek Kumar Feb 1 at 9:37
  • hi @Vivek Kumar, We have done almost all design and other things for this extension, can you please provide me the fix for this module – jafar pinjar Feb 4 at 11:48
  • Also this module i installed and checked , its not working for me – jafar pinjar Feb 4 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.