Not able to reload after ajax content load. #826
Description
Bug report
I am using Magento 2.4.2 and along with vanilla Magento, I am using a 3rd party extension that provides the feature to filter products using ajax. And now I have a requirement where I want infinite scroll on the category pages. So I am using one Magento extension which is built on top of this extension. Now after installing the extension, it's working fine after the page load but when the content is loaded by ajax, it's still loading the previous content.
I have already tried the approach to reload by using the below snippet. And it's not working.
window.ias(null);
Code and configuration snippets that reproduce the problem
require(['jquery',
'Lof_AjaxScroll/js/script'
], function ($) {
$( document ).ready(function() {
// Handler for .ready() called.
$('<?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: <?php echo $delay; ?>,
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'});
if(typeof(IASSpinnerExtension) !== "undefined")
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('rendered', function(items){
SgyIAS._log({eventName: 'rendered', items: items});
if(typeof(initLofLazyLoad) === 'function') {
initLofLazyLoad();
} else if (typeof($(items).find('.lof-lazy').lazy) === 'function') {
$(items).find('.lof-lazy').lazy({
bind: "event",
delay: 0
});
}
});
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();
});
});
});
Expected behavior
After applying filters to the products list, the new page loaded by ajax scroll should load the filtered product. Basically, I am looking for any event, option, or trigger to reload the IAS.
Environment
Magento: 2.4.2
- Infinite Ajax Scroll version: I am not sure about the version but I have attached the GitHub repository which I have used to download.
- Browser + version: Chrome Latest Version
- Operating System: Mac Pro M2/ Windows 11