jquery conflict in magento

Working with JavaScript

• Design > Themes Editor > Java Script Editor > Theme Java Script

If you’re comfortable working with and editing JavaScript, you can further customize the look and feel of your web store. Magento Go allows you to add your own custom Javascript files to add elements that enhance your pages.

NOTE: This section will not teach you how to use JavaScript, please see one of the many excellent online tutorials or books on learning and using JavaScript if you are not familiar with it.

Uploading JavaScript Files

1. In the Admin Panel, go to the Design menu and select the Themes Editor.
2. Select the theme you want to customize for the list of Available Themes by clicking the [Customize] button.
3. Select the JavaScript Editor tab from the tabs at the left.
4. In the Theme JavaScript panel, click Browse to select the JavaScript file from your local machine. Repeat this step for every JavaScript file you want to upload.
5. Click Upload Files to upload them to your store.

NOTE: For many JavaScript libraries, scripts and libraries must load in the correct order in order to function properly. Manage the loading order of the scripts by simply dragging and dropping the files around in the list of uploaded JavaScript files. Uploading them in sequence will ensure that they are in correct order automatically.

jQuery Solution

To take advantage of the jQuery library or any of the custom plugins available, follow the steps below. This so

Disclaimer: This method may not always work. When you’re working with different versions of JavaScript you always run the risk of having different scripts conflicting with each other. We believe the noConflict() solution is the best alternative currently available.

To learn more about the noConflict() solution, visit the jQuery API page.

To add custom jQuery code using the Built-In Library (v.1.3.1):

1. Create a new CMS static block.
2. Type in a Block Title and Identifier.
3. In the Content textarea, paste this wrapper:
   <script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(jQuery); </script>
4. Replace the comments with your custom jQuery code.

To add custom jQuery code using any version of jQuery:

In our example, we’re going to use a hosted jQuery library version 1.5.2 from Google APIs.

1. From the Admin Panel, select Configuration > Design > HTML Head > Miscellaneous Scripts
2. Paste this: <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’ type="text/javascript"></script> and click Save.
3. Next, paste this into Miscellaneous Scripts just after the hosted jQuery library you included:
   <script type="text/javascript"> var j152 = jQuery.noConflict(true); </script>
4. Next, create a new CMS static block.
5. Type in a Block Title and Identifier.
6. In the Content textarea, paste this wrapper:
   <script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
7. Replace the commented lines with your custom jQuery code.

To add custom jQuery code using an uploded version of jQuery:

1. Open the jQuery library file in a text editor.
2. Paste the following at the end of the file:
   var j152 = jQuery.noConflict(true);
   Note: In our example, we named this variable j152 because we are using jQuery 1.5.2. Name your variable based on the version of jQuery you use.
3. From the Admin Panel, go to Design > Theme Editor and click to customize your current theme.
4. In the JavaScript editor, upload this modified jQuery you wish to use.
5. Create a new CMS static block.
6. In the Content textarea, paste this wrapper:
   <script type="text/javascript"> (function($) { // ---------------------- // your code here // ---------------------- })(j152); </script>
   
   Note: Make sure that (j152) corresponds to the variable name you created in step 2.
7. Replace the comments with your custom jQuery code.