How to add a custom javascript in a Magento extension

Question

I'm trying to add a javascript to all Magento pages inside tag <head>. I have a file called example.xml in this folders tree (I've made a configuration on etc/config.xml to use a custom .xml file like example.xml):

--design
----frontend
------base
--------default
----------layout
------------example.xml

I'm using two approaches to do this. The first one is (NOT WORKING):

<layout>
<default>
    <reference name="head">
        <action method="addJs">
            <script>folder/myjavascript.js</script>
        </action>
    </reference>
</default>
</layout>

The second one is (WORKING only for checkout page):

<layout>
    <example_handle>
        <reference name="head">
            <action method="addJs">
                <script>folder/myjavascript.js</script>
            </action>
        </reference>
    </example_handle>

    <checkout_onepage_index>
        <update handle="example_handle"/>
    </checkout_onepage_index>

    <onepagecheckout_index_index>
        <update handle="example_handle"/>
    </onepagecheckout_index_index>

    <opc_index_index>
        <update handle="example_handle"/>
    </opc_index_index>

    <aw_onestepcheckout_index_index>
        <update handle="example_handle"/>
    </aw_onestepcheckout_index_index>
</layout>

My javascript has a snippet where I need to get a custom variable from Magento (in php I use getConfigData('api_key')). So, my second question is: Is it possible to get this value directly from javascript or I need to do this with php?

var _api_key = ?`getConfigData('api_key')`?;

Please make clear within your question which of the many mehtods to achieve that you have followed, provide reference to the Magento homepage that is documenting the method you follow, explain what you expected to happen and what happened instead. Also please make clear why existing Q&A material on site didn't work for you and why while providing a reference to it. — hakre, Apr 25 '15 at 06:35
Alao please keep your questions apart. Stackoverflow doesn't work well asking two or more questions within the same question post. Instead keep the questions apart and ask as isolated as possible to create the greatest value for this Q&A. — hakre, Apr 25 '15 at 06:40

Amit Bera · Answer 1 · 2015-04-25T07:00:43.543

As you want to execute php code then need call phtml This call phtml file as reference block of head.

<example_handle>
    <reference name="head">
       <block type="core/template" template="page/myjavascript.phtml" name="myjavascript" />
    </reference>
</example_handle>

then on phtml(app/design/frontend/YOUR_PACKAGE/YOUR_TEMPATE/template/page/myjavascrpt.phtml) write php code: and put all code of myjavascript.js to this phtml.

then call <?php echo $this->getChildHtml('myjavascript');?> in head.phtml

How to add a custom javascript in a Magento extension

1 Answers1