Add .js in Magento

Question

I'm trying to add my own .js to a Magento project, but I can't do it...

I've followed the steps here, but I still can't do it.

I did the following:

Frontend: Opened page.xml and inside the block: block type="page/html_head" name="head" as="head", I included my .js file: lib/query.js.
Backend: I modified main.xml like said here, and I added the .js to the block named as head.

But nothing happens. The javascript seems to not be working. Any ideas on why, or any step that I need to follow?

I EDIT THE QUESTION because I found a different problem...:

I did everything as suggested in the Answers. And it didn't work. But I think it's because of the script.

When I go to firebut, I see these mistakes, that I don't know if they were at first:

The mistake

First mistake is located at head.phtml, when I make the call:

<script type="text/javascript">
    $jQuery.noConflict();
</script>

The second and the third one are located at the beginning of my .js files...

Any idea? Maybe solving this, will solve my other issue...

Are you putting your file in (root folder) /lib/query.js or /js/lib/query.js? — MagePal Extensions
– MagePal Extensions, Commented Nov 3, 2012 at 13:40
Copy the url by viewing source for your script url (www.xyz/js/lib/jquery.js) and paste it into your browser address bar and check if load. Also check my code below for one way of doing jquery noconflict — MagePal Extensions
– MagePal Extensions, Commented Nov 3, 2012 at 15:10
@Sonhja: check my answer here stackoverflow.com/questions/8310233/… — Gowri
– Gowri, Commented Nov 8, 2012 at 20:55

MagePal Extensions · Accepted Answer · 2012-11-03 15:07:55Z

1

jQuery: Creates a different alias for jQuery to use in the rest of the script.

 var $j = jQuery.noConflict();
 // Do something with jQuery
 $j("div p").hide();
 //then use magento prototype with
 $("content").style.display = 'none';

See more http://api.jquery.com/jQuery.noConflict/

Since it seem like you are add the same file to the admin and the frontend. Put your file in (root folder) /js/query.js (not /lib/query.js)

Add this to page.xml

 <block type="page/html_head" name="head" as="head">
        <action method="addJs"><script>query.js</script></action>
        ....

Add this to main.xml

<default>
    <block type="adminhtml/page" name="root" output="toHtml" template="page.phtml">
       <block type="adminhtml/page_head" name="head" as="head" template="page/head.phtml">
        <action method="addJs"><script>query.js</script></action>
        ....

It's not a wise idea to make changes to core files. Take a look on workaround for admin files http://www.magentocommerce.com/boards/viewthread/17306/

edited Nov 3, 2012 at 15:07

answered Nov 3, 2012 at 13:32

MagePal Extensions

17.7k2 gold badges50 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sonhja Over a year ago

I copied the .js link, and it loads. I tried your code, but it still doesn't work...

MagePal Extensions Over a year ago

If the file load that mean that the magento xml is working correctly. Did you fixed the jQuery noConflict() issue? Take a look at the url below the code for the example to use noConflixt() the way you have it or do it the way i suggest above. What error are you getting?

Sonhja Over a year ago

Yes, I'm making some advance... I solved the jQuery noConflict. That was a problem on the order I loaded the .js files. Right now I only have this one: TypeError: $(document).ready is not a function. Step by step I will arive! :D

MagePal Extensions Over a year ago

With the way above you would do $j(document).ready()... with your way jQuery.noConflict()(function(){ $(document).ready() });

Sonhja Over a year ago

It still says jQuery is not defined... :(( Aggg!

|

Chris Bell · Accepted Answer · 2012-11-03 12:51:37Z

1

1) Have you deleted the cache and session?: http://kb.siteground.com/article/How_to_clear_the_cache_in_Magento.html

2) Double check the page source in your web browser. The file might be included correctly already, but may be your javascript file itself is the problem.

answered Nov 3, 2012 at 12:51

Chris Bell

5934 silver badges10 bronze badges

1 Comment

Sonhja Over a year ago

I think you're right. I think my javascript is wrong. Could yo please check the edit and see if you know what's wrong?

Anant · Accepted Answer · 2012-11-03 12:57:21Z

1

Inside the 'block type="page/html_head" ' insert following line

<action method="addJs"><script>lib/query.js</script></action>

Also put your query.js file at "magento-root-direcory/js/lib/query.js" location. And of course do the reindexing and delete your cache.

answered Nov 3, 2012 at 12:57

Anant

3,0773 gold badges29 silver badges33 bronze badges

1 Comment

Sonhja Over a year ago

I did so, but I think my problem is a different one... Why do you think that mistakes appear?

Collectives™ on Stack Overflow

Add .js in Magento

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related