Magento

I been trying for the past week get this jQuery Isotope plugin to work with my site http://0317ec4.netsolhost.com/Refine/ .  I will attach my files to this post. If anyone could assist me with a screen share it would be much appreciated. The homepage should look like this http://isotope.metafizzy.co/ .  I have a few question , first where do i place the no conflict , secondly why didn\’t the short name work, also do I have to change every $ into $j only on the homepage script or also in other files?

<script src=\"prototype.js\"></script>
<script src=\"jquery.js\"></script>
<script>
var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
$j(\"div\").hide();
});

// Use Prototype with $(...), etc.
$(\’someid\’).hide();

$list = $(\’#super-list\’);

$(\’#filter a\’).click(function(){
var filterName = $(this).attr(\’data-filter\’);
$list.isotope({ filter : filterName });
return false;
});

$(\’#sort a\’).click(function(){
var sortName = $(this).attr(\’data-sort\’);
$list.isotope({ sortBy : sortName });
return false;
});

var currentLayout = \’fitRows\’;

$(\’#layouts a\’).click(function(){
var layoutName = $(this).attr(\’href\’).slice(1);
$list.removeClass( currentLayout ).addClass( layoutName );
currentLayout = layoutName;
$list.isotope({ layoutMode : layoutName });
return false;
});


// switches selected class on buttons
$(\’#options\’).find(\’.option-set a\’).click(function(){
var $this = $(this);

// don\’t proceed if already selected
if ( !$this.hasClass(\’selected\’) ) {
$this.parents(\’.option-set\’).find(\’.selected\’).removeClass(\’selected\’);
$this.addClass(\’selected\’);
}

});

$(function(){

$list.isotope({
layoutMode : \’fitRows\’,
masonry : {
columnWidth: 220
},
getSortData : {
related : function( $elem ) {
return $elem.attr(\’data-related\’);
},
width : function( $elem ) {
return $elem.width();
}
}
});

// Sites using Isotope markup
var $sites = $(\’#sites\’),
$sitesTitle = $(\’<h2 class=\"loading\"><img src=\"http://i.imgur.com/qkKy8.gif\" />Loading sites using Isotope</h2>\’),
$sitesList = $(\’<ul class=\"clearfix\"></ul>\’);

$sites.append( $sitesTitle ).append( $sitesList );

$sitesList.isotope({
layoutMode: \’cellsByRow\’,
cellsByRow: {
columnWidth: 290,
rowHeight: 400
}
});

var ajaxError = function(){
$sitesTitle.removeClass(\’loading\’).addClass(\’error\’)
.text(\’Could not load sites using Isotope :(\’);
};

// dynamically load sites using Isotope from Ember app
$.getJSON(\’http://api.emberapp.com/users/view/\’ +
\’desandro/collections/view/isotope.json?callback=?\’)
.error( ajaxError )
.success(function( data ){

// proceed only if we have images
if ( !data.response || !data.response.images ) {
ajaxError();
return;
}
var images = data.response.images,
items = [],
item, image;

for ( var i=0, len = images.length; i < len; i++ ) {
image = images;
item = \’<li><a href=\"\’ + image.url + \’\">\’
+ \’<b>\’ + image.name + \’</b>\’
+ \’<img src=\"\’ + image.file.src.replace(\’/m.\’, \’/s.\’) + \’\” />\’
+ \’</a></li>\’;
items.push( item );
}

var $items = $j( items.join(\’\’) );

$items.imagesLoaded(function(){
$sitesTitle.removeClass(\’loading\’).text(\’Sites using Isotope\’);
$sitesList.isotope( \’insert\’, $items );
});

});


});
</script>

Copy js files to your theme/skin/js.

Copy css to your theme/skin/css.

Call css and js into page.xml as below code:

Call the html code in the page where you need to display.
Hope it helps!

Thank you, I did those steps, but my problem is with the jquery conflicting with prototype. The fact that I have multiple java sub languages runnning stops me from using the $. How do I work around that on magento and if there is a way to run my plugin; could you explain it to beginners.

Create new js file add

Try using jQuery instead of $.
Hope this helps!

I have a question I add the other .js files to the pages file. Do I also have to add the jQuery.noConflict() to all the js files.

For the script I placed it in the the CMS/ managed page/ content. Please comment if it looks correct. I used a var for the $ so that it would execute.

If we create a js file and called it in page.xml it works for all conflicts with jquery and prototype.
We do not need to add in all js files.

You can try once using jQuery instead of $j.
Hope it helps !

Hello ,

please replace all $ symbol with the Word jQuery

and then try any more question please let me know.

brunomarshall - 19 June 2011 08:42 PM

Hello ,

please replace all $ symbol with the Word jQuery

and then try any more question please let me know.

I am sorry this is not working for me. hummmm

I am starting off with a very simple jQuery code to test.

so I created a js file and added only the following

On the XML i added

emailCapture.js has the following code

the Jquery still works but it still conflicting with prototype.

Am i missing something?

thanks in advance.

Has anyone a ready hardcoded solution for jQuery isotope Integration with filter, sort and infinite scroll?

Has anyone managed to solve this?

If you could explain how to integrate Isotope with Magento it would really help me.

Thanks!

We offer a module that will in integrate isotope nicely for you:

http://www.magentocommerce.com/magento-connect/catalog/product/view/id/15643/

If you have any difficulties let me know!

I found this Magento Extension for Isotope. Haven’t tested it yet, but the demo looks promising.

http://www.magebay.com/extension/isotope-filter-navigation.html