Strategery - InfiniteScroll Not Working - php

Question

I wanted to implement infinite scrolling in my magento website so I installed the Strategery - InfiniteScroll extension but it is not working, first I thought it is because I still have pagination, but even after removing the paging toolbar it is not working.
I removed those toolbar divs
<div class="toolbar-top">
<?php echo $this->getToolbarHtml() ?>
</div>
from top and bottom.
Can you please help me to configure Strategery - InfiniteScroll extension?

Answer 1

From https://github.com/Strategery-Inc/Magento-InfiniteScroll/wiki/Installation-under-a-different-package---theme:
If you copy the 'infinitescroll' folder on your webroot, the files
will end up under the default theme. This should be ok in most
installations because Magento falls back to the default theme when it
can find files in the custom themes. The rest of this article covers
the scenario where the plugin isn't loaded correctly from the default
package/theme.
The first thing you should do is move them to the package/theme you're
using, just to be sure they'll be loaded.
Browse the repository to see where the files are located. Those that are inside the 'app/design/frontend/default/default' should be
moved to your package/theme: 'app/design/frontend/package/theme'.
Visit the following url: http://www.yourwebsite.com/infinitescroll2/js and make sure there's
some Javascript being printed. If you get a 404 then the module is not
loaded properly. If its blank or you get an exception then the module
probably has trouble finding the layout or template files.
Once the URL above returns javascript, visit a page in your catalog and view its source. Make sure you can find the following
string within the source: "infinitescroll/js" - it should exist as
part of the URL for a SCRIPT tag. If you can't find it then you have a
compatibility problem with the layout file (which in the repository is
located at
app/design/frontend/default/default/layout/strategery-infinitescroll.xml).
If the string exists however then the plugin is loaded and configured properly.
Finally, once you know the plugin is being loaded, you will have to adjust the options under System -> Configuration -> Catalog ->
Infinite Scroll in order to configure InfiniteScroll options properly.
You will find two types of selectors. The first one is the container, by default called "category-products", which "contains" all
the items. category-products
Then you will find another selector called "products-grid" which is
the item selector. item
This two selectors are the ones you must enter in the Infinite Scroll
configuration under Content and Items.category-products
Next: next
You can get the code by doing a second click on the screen and picking
"Inspect element" in any modern browser.
For this extension to work with any theme, the theme must have a
container div, like category-products and also a item div like
products-grid.
Also the theme must have the pager active, otherwise the extension
wont work because of the lack of some selectors.
For more information on how to configure the options follow this link:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
OR
If problem not solved then
After the installation
Add the following in layout.xml:
strategery/infinitescroll/init.phtml
Copy from app/design/frontend/base/default/template/strategery path to the same path in your theme
Copy from skin/frontend/base/default/js/infinitescroll path to the same path in your skin-theme
Make sure that the /js/jquery/infinitescroll path exist and have four *.js files inside
Configure plugin:
always set Yes on Include jQuery field
always view that your product-list div class is same as in Content field. In default theme is ".category-products" class (with the dot is
a first sign in class name)
always set No on Hide Toolbar field
Of cource you should flash all possible cache :) If not working - do this:
On the page set grid mode manually an you can see "mode=grid" in url. Thats all, guys :)

Answer 2

Cause of some extensions that modify the output of the system in JSON and not in HTML - I solved it this way:
in JQuery-ias.js, on line 340
return $.get(loadEvent.url, null, $.proxy(function(data) {
$itemContainer = $(this.itemsContainerSelector, data).eq(0);
if (0 === $itemContainer.length) {
$itemContainer = $(data).filter(this.itemsContainerSelector).eq(0);
}
if ($itemContainer) {
$itemContainer.find(this.itemSelector).each(function() {
items.push(this);
});
}
self.fire('loaded', [data, items]);
if (callback) {
timeDiff = +new Date() - timeStart;
if (timeDiff < delay) {
setTimeout(function() {
callback.call(self, data, items);
}, delay - timeDiff);
} else {
callback.call(self, data, items);
}
}
}, self), 'html');
I've changed it like this:
return $.get(loadEvent.url, null, $.proxy(function(data) {
data = data['maincontent']; // HERE TO CATCH THE RIGHT HTML CONTENT
$itemContainer = $(this.itemsContainerSelector, data).eq(0);
if (0 === $itemContainer.length) {
$itemContainer = $(data).filter(this.itemsContainerSelector).eq(0);
}
if ($itemContainer) {
$itemContainer.find(this.itemSelector).each(function() {
items.push(this);
});
}
self.fire('loaded', [data, items]);
if (callback) {
timeDiff = +new Date() - timeStart;
if (timeDiff < delay) {
setTimeout(function() {
callback.call(self, data, items);
}, delay - timeDiff);
} else {
callback.call(self, data, items);
}
}
}, self), 'json'); // I've changed html by JSon