-1

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.

Mackzie
  • 41
  • 1
  • 11
  • I would suggest hiring someone to do it for you. If you are a coder, try something and come back with a question relating to a specific problem or code that doesn't work. This is all to close to asking for a homework assignment made, or just free work done. – Christoffer Bubach Dec 11 '14 at 11:34
  • ok then can you atleast tell me where to call out **masonry** fucntion in **ajaxscroll.phtml**. '' can you rectify this ? – Mackzie Dec 11 '14 at 12:31

1 Answers1

2

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.

Christoffer Bubach
  • 1,652
  • 3
  • 17
  • 43
  • hi chris, adding that directly on list.phtml file throws prototype duplicity error on '$'. However i tried adding the below code in ajaxsroll.phtml file. Currently am either fetching no error+no masonry when i try **load** event or this error **cannot call methods on masonry prior to initialization; attempted to call 'appended'** when trying the **onLoadItems** event. – Mackzie Dec 17 '14 at 10:30
  • 'jQuery.ias({container : '.category-products', item: '.products-grid', item: '.products-list', pagination: '.toolbar .pager', next: '.next', loader: ' ', load: function(items){var $newElems = jQuery(items).show().css({opacity:0}); $newElems.imagesLoaded(function(){ $newElems.animate({opacity:1}); jQuery('.category-products').masonry('appended', $newElems, true); });return true;} });' – Mackzie Dec 17 '14 at 10:33
  • 1
    The html is probably fine, but you need to change out the $ for jQuery in the masonry js file and probably do a jQuery.noConflict(); call right after you include the jQuery lib. – Christoffer Bubach Dec 17 '14 at 12:58