If after installing an extension you get javascript errors in your browser or in case browser-side logic is not executing as expected, good chance is that the root problem is so-called jQuery conflict (situation when 2 or more jquery instances are defined one the same page).

Diagnosing

To diagnose this kind of errors, open error console in your favorite browser.

Sidenote. Author's favorite browser at the moment of writing is Google Chrome, so some instructions are specific to that browser. However, other browsers typically has similar tools.

To open error console in Google Chrome, right click anywhere on your page and choose "Inspect Element". Inspector pane opens at the bottom of the page, select "Console" tab in it:

The line Uncaught TypeError: ... has no method 'options' is clear indicator of jQuery conflict. In case you see such error, follow this guide to resolve a problem.

Finding jQuery Instances

Open page source by pressing Ctrl+U and examine all <script ... src="...js"></script> tags. Before this step please disable javascript merging in Magento Admin Panel, menu System->Configuration->Advanced->Developer->Javascript Settings->Merge Javascript Files, otherwise you will see something like 

<script type="text/javascript" src="http://.../media/js/d208e427b96b96f8cc0020f.js"></script>

 

You need to identify <script> tags which include jQuery file. They are typically named like jquery.js, jquery.min.js, jquery-1.6.2.js and similar. Open such files by clicking a link in page source and read the beginning of the file. It is jquery file if it starts with lines like this:

/*!

* jQuery JavaScript Library v1.6.2

* http://jquery.com/

*

* Copyright 2011, John Resig

* Dual licensed under the MIT or GPL Version 2 licenses.

* http://jquery.org/license
...

 

To resolve a problem you need to leave only one jQuery file.

Mark down all the file names excluding Magento base directories. If you find http://www.yourdomain.com/js/jquery/jquery.js, mark down "jquery/jquery.js", if you find http://www.yourdomain.com/skin/frontend/design_package/design_theme/js/jquery.js, mark down "js/jquery.js". We will serach for these strings later on.

Magento Theme Inheritance

Before we start examining Magento files, the notion of Magento theme inheritance should be explained. Each Magento theme name consists of 2 parts separated by slash: package/theme. When Magento searches for a theme file, for example "layout/catalog.xml" it first file it finds in the following directories: 

  1. app/design/frontend/package/theme/layout/catalog.xml
  2. app/design/frontend/package/default/layout/catalog.xml
  3. app/design/frontend/base/default/layout/catalog.xml

Finding Magento Files Making jQuery Appear More Than Once

There 2 types of files which can include jquery into a page: layout XML files and template PHTML files. First of all search for all XML files containing any of relative jquery file names you marked down previously in the following directories and their subdirectories:

  1. app/design/frontend/package/theme/layout/
  2. app/design/frontend/package/default/layout/
  3. app/design/frontend/base/default/layout/

Open each of these files, and comment <action> commands which add jquery files, from this:

<action method="addJs"><script>jquery/jquery.js</script></action>

<action method="addItem"><type>skin_js</type><name>js/jquery.js</name><params/>

 

to this:

<!--<action method="addJs"><script>jquery/jquery.js</script></action>-->

<!--<action method="addItem"><type>skin_js</type><name>js/jquery.js</name><params/>-->

 

In the same manner, search for all PHTML files containing any of relative jquery file names you marked down previously in the following directories and their subdirectories:

  1. app/design/frontend/package/theme/layout/
  2. app/design/frontend/package/default/layout/
  3. app/design/frontend/base/default/layout/

Typical suspect is page/html/head.phtml but these may be more such files.

Open each of these files, and comment <script> tags which add jquery files, from this:

<script type="text/javascript" src="/js/jquery/jquery.js"></script>

 

to this:

<!--<script type="text/javascript" src="/js/jquery/jquery.js"></script>-->

 

Save all the files. you have modified, clear cache.

Adding the Only jQuery Instance

In previous steps, if done properly, we have already removed all jquery instances from all the pages. The final step adds one jquery instance to every page:

  1. Open layout/page.xml in your theme.
  2. Find the line <action method="addJs"><script>prototype/prototype.js</script></action>
  3. AFTER this line, add the following line: <action method="addJs"><script>jquery/jquery.min.js</script></action>
  4. Save the file.

Refresh Magento cache. 

The end.