What is Magento using scriptaculous for?

Question

Anybody know? I'd really like to pull it out & use jquery, but if the core Varien js is using it...

thx in advance

Answer 1

You can still implement jQuery, just make sure to use the no conflict function.

Answer 2

Scriptaculous is an add-on to Prototype, which is the actual framework that Magento is using. In a sense it is to Prototype what JQueryUI is to JQuery. So I don't believe you'd be looking to replace both. It be a very large task and probably not worth the effort. I actually found it easier to learn prototype than to go through the large amount of inline JavaScript (BAD MAGENTO) and replace it with JQuery.

Anyway, to answer your question, it's used all over the place in Magento. I believe it's most noticeable in the admin since it has a somewhat sophisticated interface. Pretty much anywhere you see Zooming, Sliders, Drag and Drop, etc. you can blame Scriptaculous. Nearly everything else JS related will be prototype.

Answer 3

Ok, Prototype is a javascript framework similar to jQuery in respect to the fact that it handles most of the ajax, dom manipulation etc and generally just making working with javascript much more simple and concise - eliminating a lot of cross browser issues with little effort.

Script.aculo.us is being used for the interface side, i.e. all the nice loaders, sliders, drag and drop in the admin section etc. This is all being handled with script.aculo.us.

Sure jQuery can probably handle this but cannot simple replace Magentos use of Prototype and Scriptaculous with jQuery. Good luck to you if you try.

Magento uses javascript very heavily (too heavily) and there are tons of inline javascript throughout the entire site.

What you can do though is accept that all of this javascript is in place for you to use. If you want to add new functionality to the site then you are free to use jQuery but dont try to undo what has been done in another library / framework.

If you must use jQuery then all you need do is add the following line to your page.xml layout file:

<action method="addJs"><script>path to your jquery</script></action>

its around line 38 and can be found in the default section and so affects almost every page.

and then obviously the same again for any of your own javascript files you create.

With regards to the inline javascript that magento is producing, a lot of it is based on onclick events and the lieks so you use jQuery to remove those events with syntax similar to the following:

$('.el').removeAttr('onclick');

for example, if you want to remove the javascript from the add to cart button you would use:

$('.btn-cart').removeAttr('onclick');

and then bind your own events to that button.

As alway.removeAttr('onclick');

Hope this helps.

Drew