有没有办法用infinitescroll在magento中实现masonry.js？

Question

For infinitescroll am using the free extension: 'vs-infinite-ajax-scrolling', this extension provides noconfilct workaround too jquery version it imports is 1.7.2, am looking for a way to implement masonry.js from desendro with this extension and integrate both in default magento. can anyone please guide me on the same.

Answer 1

See http://masonry.desandro.com/#getting-started for instructions.

Magento probably has the item listings looking something like this:

<ul class="products-grid">
    <li class="item">...product info here...</li>
    <li class="item">...product info here...</li>
    <li class="item">...product info here...</li>
</ul>

So. Following the instructions on Masonry's homepage you need to first make sure that the Masony JS in included in you page section, by adding it to some of you XML - for example your theme's local.xml file in the default section or perhaps just in the catalog listing section so it won't be included on pages where it's not needed.

If you can't figure out how to do this, ask a new question on how to add a custom JS to product listing pages. This is what I meant by being specific. You need to do the initial work, breaking up your problem into smaller parts and asking questions based on the specific task at hand. Nobody on the internet likes to do what I'm doing and holding your hand all through the process. On their spare time. For free.

Next up is to initialize the Masonry script on the product listing using one of the two methods available and described on their homepage. For example you can add this to the -tag:

<ul class="products-grid js-masonry" data-masonry-options="{ 'columnWidth': 200, 'itemSelector': '.item' }">
    <li class="item">...product info goes here..</li>
    <li class="item">...product info goes here..</li>
    <li class="item">...product info goes here..</li>
</ul>

And it should probably work, maybe with some added CSS fixes.