Skip to content

Installation under a different package theme

Jump to bottom Edit New page
mbalparda edited this page Feb 25, 2013 · 8 revisions

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.

  1. 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'.

  2. Visit the following url: http://www.yourwebsite.com/infinitescroll/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.

  3. 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).

  4. If the string exists however then the plugin is loaded and configured properly.

  5. 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.

You can get the code by doing a second click on the screen and picking "Inspect element" in any modern browser.

For more information on how to configure the options follow this link: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Add a custom footer
Add a custom sidebar
Clone this wiki locally