Upgrade from 2.3.1 to 3.x no working

[vishy93]

Hey,

I am currently looking to use the Strategy Magento plugin, which includes this plugin for Infinite Scrolling.

However, it is using the old version 2.2.1. I have accordingly tried changing it to the new 3.x version.

But, I get the following error:

Uncaught TypeError: $.ias is not a function

The plugin is correctly included into the page, and this is the init:

   <?php?>
   <?php if($this->isEnabled()): ?>
    <?php
    $configData = $this->getConfigData();
    $helper = Mage::helper('infinitescroll');
    $productListMode = $this->getProductListMode();
    ?>
    <?php if(Mage::getStoreConfig('infinitescroll/general/jquery')): ?>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="<?php echo $this->getJsUrl('jquery/jquery.1.10.2.min.js') ?>"><\/script>')</script>
        <script>jQuery.noConflict();</script>
    <?php endif ?>
    <?php if($iasConfig = $helper->getConfigData('advanced/ias_config')) :?>
        <script src="<?php echo $this->getSkinUrl($iasConfig) ?>"></script>
    <?php endif ?>
    <script type="text/javascript">
        //<![CDATA[
        windowLoadedFlag = false;
        window.onload = function () {
            windowLoadedFlag = true;
        };
        <?php // use: jQueryWaiter.execute(function(){ // safe jQuery code here });  ?>
        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: <?php echo $helper->getConfigData('general/debug'); ?>,
            _log: function(object) {
                if(this.debug) {
                    console.log(object);
                }
            },
            init: function(){
                jQuery.getScript("<?php echo $this->getJsUrl('jquery/infinitescroll/jquery-ias.min.js') ?>", function() {
                    jQuery(function($) {
                        var config = {
                            item: '<?php echo $productListMode == 'grid' ? $helper->getConfigData('selectors/items_grid') : $helper->getConfigData('selectors/items_list') ?>',
                            container : '<?php echo $helper->getConfigData('selectors/content') ?>',
                            next: '<?php echo $helper->getConfigData('selectors/next') ?>',
                            pagination: '<?php echo $helper->getConfigData('selectors/pagination') ?>',
                            delay: 600,
                            negativeMargin: <?php echo (int) $helper->getConfigData('design/buffer_px') ?>,
                            history: {
                                prev: '<?php echo $helper->getConfigData('selectors/previous') ?>'
                            },
                            noneleft: {
                                text: '<?php echo $helper->jsQuoteEscape($this->__($helper->getConfigData('design/done_text'))) ?>',
                                html: '<div class="ias-noneleft" style="text-align: center;">{text}</div>'
                            },
                            spinner: {
                                <?php if($this->getLoaderImage() !== false): ?>
                                src: '<?php echo $this->getLoaderImage() ?>',
                                <?php else: ?>
                                src: 'data:image/gif;base64,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',
                                <?php endif; ?>
                                html: '<div class="ias-spinner" style="text-align: center;"><img style="display:inline" src="{src}"/> <?php echo $helper->jsQuoteEscape($this->__($helper->getConfigData('design/loading_text'))); ?></div>'
                            },
                            trigger: {
                                text: '<?php echo $helper->jsQuoteEscape($this->__($helper->getConfigData('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($this->__($helper->getConfigData('design/load_more_text_prev'))) ?>',
                                htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                                offset: <?php echo (int) $helper->getConfigData('design/load_more_threshold') ?>
                            }
                        };
                        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));
                        <?php if($helper->isMemoryActive()): ?>
                        SgyIAS._log({extension: 'history'});
                        window.ias.extension(new IASHistoryExtension(config.history));
                        <?php endif; ?>
                        // 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});
                        });
                        window.ias.on('rendered', function(items){
                            SgyIAS._log({eventName: 'render', items: items});
                            if (typeof $j !== 'undefined' && !!$j) {
                                $j(window).trigger('delayed-resize');
                            }
                        });
                        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'});
                        });
                        $('<?php echo Mage::getStoreConfig('infinitescroll/selectors/toolbar') ?>').<?php echo $helper->getConfigData('design/hide_toolbar') ? 'hide' : 'show' ?>();
                        // custom fix for url protocol issue in jquery ias library:
                        window.ias.getNextUrl = function(container) {
                            if (!container) {
                                container = window.ias.$container;
                            }
                            // always take the last matching item + fix to be protocol relative
                            var nexturl = $(window.ias.nextSelector, container).last().attr('href');
                            if(typeof nexturl !== "undefined") {
                                if (window.location.protocol == 'https:') {
                                    nexturl = nexturl.replace('http:', window.location.protocol);
                                } else {
                                    nexturl = nexturl.replace('https:', window.location.protocol);
                                }
                            }
                            return nexturl;
                        };
                        // custom fix for url protocol issue in jquery ias library.
                        if(windowLoadedFlag){
                            $(window).load();
                        }
                        SgyIAS._log('Done loading IAS.');
                        $(document).trigger( "infiniteScrollReady", [window.ias]);
                    });
                });
            }
        };
        <?php // this will prevent executing the infinite scroll before jQuery is loaded even when jQuery is loaded after this code ?>
        jQueryWaiter.execute(function(){
            SgyIAS.init();
        });
        //]]>
    </script>
<?php endif ?>
`

[fieg]

Version 3.x is not compatible with 2.x. Looking at your code it would require a lot more refactoring (the whole init should probably be rewritten). Unless you know your way around javascript, I would suggest to stay with version 2.x.

[vishy93]

@fieg I will give it a whirl.

[vishy93]

@fieg Hey pal, in version 3.x would I be correct that for the spinner, you cannot any longer state new element to add within the config to use as spinner? instead have to have a predefined spinner and pass its class to the spinner element config?

Also, looking at the documentation I do not see the extensions such as pagination and etc. Were these removed in 3.X?

[fieg]

Yes, currently it's only possible to work with a predefined spinner. Although you can work your way around by implementing your own logic using this structure:

window.ias = new InfiniteAjaxScroll('.surface-container', {
  ...
  spinner: {
    show: function(element) {
      // add your own element here
    },
    hide: function(element) {
      // remove your own element here
    }
  }
});

I plan to make this more easily in the future.

Also, looking at the documentation I do not see the extensions such as pagination and etc. Were these removed in 3.X?

The extensions are now integrated in the main script or can be achieved in an easy way (might have to document more what that easy way is tho). Take the paging extension for example, the main script now triggers page events itself when you scroll through pages.

[vishy93]

@fieg Thank you for the swift detailed response. Appreciate it.

Yeah I gathered as such with the spinner, have got it to append and remove.

I cannot seem to get the history and trigger bit to work, have everything else working.

[fieg]

History and trigger are still work in progress.

This example contains a part that updates the url and browser title (history).
https://codesandbox.io/s/github/webcreate/infinite-ajax-scroll/tree/master/examples/articles

[vishy93]

@fieg Thank you for the link, I will look into this.

[fieg]

I'm closing this. If you have any questions, let me know.

[vishy93]

Hey @fieg,

On the infinity scroll main website it states:

Back-button proof
The browser url is automatically updated when you scroll between pages. Users can reload or bookmark the page and always return to the right place.

In version 3 I cannot see this as being possible.

[vishy93]

Hey @fieg I have amended the Javascript, as below; I just cannot seem to get the history state working.

`<?php if($this->isEnabled()): ?>
    <?php
    $configData = $this->getConfigData();
    $helper = Mage::helper('infinitescroll');
    $productListMode = $this->getProductListMode();
    ?>
    <?php if(Mage::getStoreConfig('infinitescroll/general/jquery')): ?>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="<?php echo $this->getJsUrl('lib/jquery/jquery-3.4.1.min.js') ?>"><\/script>')</script>
        <script>jQuery.noConflict();</script>
    <?php endif ?>
    <?php if($iasConfig = $helper->getConfigData('advanced/ias_config')) :?>
        <script src="<?php echo $this->getSkinUrl($iasConfig) ?>"></script>
    <?php endif ?>
    <?php $src= ($this->getLoaderImage() !== false) ? $this->getLoaderImage() :'data:image/gif;base64,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'; ?> 
    <script type="text/javascript">
	    var container = document.getElementsByClassName(<?php echo '"'.str_replace(".", "", $helper->getConfigData('selectors/content')).'"'; ?>);
	    if(container.length){
        //<![CDATA[
        windowLoadedFlag = false;
        window.onload = function () {
            windowLoadedFlag = true;
        };
        <?php // use: jQueryWaiter.execute(function(){ // safe jQuery code here });  ?>
        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: <?php echo $helper->getConfigData('general/debug'); ?>,
            _log: function(object) {
                if(this.debug) {
                    console.log(object);
                }
            },
            init: function(){
                jQuery.getScript("<?php echo $this->getJsUrl('jquery/infinitescroll/jquery-ias.min.js') ?>", function() {
                    jQuery(function($) {
	                   $(<?php echo '"'.$helper->getConfigData('selectors/content').' > div:last"'; ?>).before(<?php echo "'<div class=\"ias-spinner\"><img  src=\"{$src}\"/>".$helper->jsQuoteEscape($this->__($helper->getConfigData('design/loading_text')))."</div>'"; ?> );
                        var config = {
	                        logger: <?php echo ($helper->getConfigData('general/debug')) == true ? 'true': 'false'; ?>,
                            item: '<?php echo $productListMode == 'grid' ? $helper->getConfigData('selectors/items_grid') : $helper->getConfigData('selectors/items_list') ?>',
                            next: '<?php echo $helper->getConfigData('selectors/next') ?>',
                            pagination: $( '<?php echo $helper->getConfigData('selectors/pagination') ?>').length ? '<?php echo $helper->getConfigData('selectors/pagination') ?>': undefined,
                            delay: 600,
                            negativeMargin: <?php echo (int) $helper->getConfigData('design/buffer_px') ?>,
                            history: {
                                prev: '<?php echo $helper->getConfigData('selectors/previous') ?>'
                            },
                            noneleft: {
                                text: '<?php echo $helper->jsQuoteEscape($this->__($helper->getConfigData('design/done_text'))) ?>',
                                html: '<div class="ias-noneleft" style="text-align: center;">{text}</div>'
                            },
                            spinner: {
                                element: '.ias-spinner'
                            },
                            trigger: {
                                text: '<?php echo $helper->jsQuoteEscape($this->__($helper->getConfigData('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($this->__($helper->getConfigData('design/load_more_text_prev'))) ?>',
                                htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                                offset: <?php echo (int) $helper->getConfigData('design/load_more_threshold') ?>
                            }
                        };
                        if (window.ias_config){
                            $.extend(config, window.ias_config);
                        }
                        SgyIAS._log({extension: 'ias', config: config});
                        window.ias = new InfiniteAjaxScroll('<?php echo $helper->getConfigData('selectors/content') ?>', config);

                        // debug events:
                        window.ias.on('scrolled', 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});
                        });
                        window.ias.on('rendered', function(items){
                            SgyIAS._log({eventName: 'render', items: items});
                            if (typeof $j !== 'undefined' && !!$j) {
                                $j(window).trigger('delayed-resize');
                            }
                        });
                        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'});
                        });
                        $('<?php echo Mage::getStoreConfig('infinitescroll/selectors/toolbar') ?>').<?php echo $helper->getConfigData('design/hide_toolbar') ? 'hide' : 'show' ?>();
                        // custom fix for url protocol issue in jquery ias library:
                        window.ias.getNextUrl = function(container) {
                            if (!container) {
                                container = window.ias.$container;
                            }
                            // always take the last matching item + fix to be protocol relative
                            var nexturl = $(window.ias.nextSelector, container).last().attr('href');
                            if(typeof nexturl !== "undefined") {
                                if (window.location.protocol == 'https:') {
                                    nexturl = nexturl.replace('http:', window.location.protocol);
                                } else {
                                    nexturl = nexturl.replace('https:', window.location.protocol);
                                }
                            }
                            return nexturl;
                        };
                        // custom fix for url protocol issue in jquery ias library.
                        if(windowLoadedFlag){
                            $(window).load();
                        }
                        SgyIAS._log('Done loading IAS.');
                        $(document).trigger( "infiniteScrollReady", [window.ias]);
                    });
                });
            }
        };
        <?php // this will prevent executing the infinite scroll before jQuery is loaded even when jQuery is loaded after this code ?>
        jQueryWaiter.execute(function(){
            SgyIAS.init();
        });
        //]]>
        }
    </script>
<?php endif ?>
`

[fieg]

I see a mix of v2 and v3 options and events, which obviously is not going to work. Actually there are so many misconfigurations in this snippet, that I don't even know where to start on pointing you in the right direction.

[vishy93]

@fieg I have noticed In the code I left a commented block in there. Deleted now. That code currently works. And, I have to my knowledge removed/replaced all v2 instances.

If mistaken could you point me in the right direction for where depreciated v2 options are?

[fieg]

I'm sorry but writing upgrade instructions is still on my todo list (#501). For now I can only point you to the v3 docs: https://docs.infiniteajaxscroll.com/