I'm currently working on a Magento project and encountering an issue while attempting to load more products with the click of a button.
Although I can see the products loading, it ultimately leads to a blank page afterwards.
I am unsure of what could be causing this unexpected behavior.
Here is the code snippet that I am using:
var loadMoreProducts = Class.create({
initialize: function (list, href, pattern) {
var self = this;
this.list = list;
this.list.insert({ after : '<div class="more"><span id="more_button" class="more-button">More</span></div>'});
this.href = href.readAttribute('href');
this.button = $('more_button');
this.holder = new Element('div', { 'class': 'response-holder' });
this.button.observe('click', function () {
if ( !self.button.hasClassName('loading') ) {
new Ajax.Request(self.href, {
onCreate: function () {
self.button.addClassName('loading');
},
onSuccess: function(response) {
if (200 == response.status) {
self.holder.update(response.responseText).select(pattern).each(function(elem) {
self.list.insert({ bottom : elem });
}),
self.href = self.holder.select('.next-page')[0].readAttribute('href');
self.button.removeClassName('loading');
if ( !self.href ) {
self.button.up().remove();
}
}
}
});
}
});
}
});
If anyone has insights or solutions to offer, I would greatly appreciate it!
Thank you in advance.