Magento 1.9 – Move Module’s External JS Code to Template File

javascriptmagento-1.9modulePHPxml

We have a custom module with below code

app/design/frontend/rwd/Theme1/layout/aitcg.xml

<action method="addJs"><script>aitoc/aitcg/Aitcg/View/Abstract.js</script></action>

As we can't use php code in this .JS file, is there any way we can move code present from Abstract.js file to some .phtml file ?

Edit

I followed Raphael's answer & changed code as here : 

<block type="aitcg/template" name="aitcg_js_styles1" template="aitcg/js_styles1.phtml" />

but still Abstract.Js file results are not displaying in js_styles1.phtml

layout file : http://pastebin.com/BZGRaiDH

js_styles1.phtml : http://pastebin.com/m85q9eMh

i am trying onclick button = onclick="setproductlogin('<?php echo $_product->getEntityId()?>');setrequestlogin();" but this is not working in .JS file , so only i am trying to cop .js code to .php code.

<script>

_getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button  id="submit-editorApply-{{rand}}" onclick="setproductlogin('<?php echo $_product->getEntityId()?>');setrequestlogin();">SAVE DESIGN</button>' +
                '<button  id="submit-editorReset-{{rand}}" >{{reset_text}}</button>' +
                '</div>';
        }
        return '';
    },

    </script>

when i checked template path hints, it loading phtml file, but JS code result is not displaying in frontend. but other html, php, js code results are displaying…..

console

enter image description here

enter image description here

is we need to load any external js library if so how to find that ?

Edit2

I tried Below code in js_styles1.phtml file , but still its not working

<script type="text/javascript" src="http://sbdev2.kidsdial.com:81/js/aitoc/aitcg/Aitcg/View/Abstract.js"></script>

Best Answer

Ensure that <?php echo $this->getChildHtml() ?> is called on your head.phtml.

If this code is not exits then you need add this code at head.phtml

Update

You have getting issue becauase of

Js dependency on one js files to another js file

Here aitoc/aitcg/Aitcg/View/Popup.js,aitoc/aitcg/Aitcg/View/Gallery.js , etc depends on js code of aitcg/js_styles.phtml

As you have put this Abstract.js at js_styles.phtml and this js file properly have calling after 

    aitoc/aitcg/Aitcg/View/Popup.js
    aitoc/aitcg/Aitcg/View/Gallery.js
    aitoc/aitcg/Aitcg/View/Gallery_Rwd.js
    aitoc/aitcg/Aitcg/Editor/Canvas/Abstract.js
    aitoc/aitcg/Aitcg/Editor/Canvas.js
    aitoc/aitcg/Aitcg/Editor/Canvas/Mirror.js
    .....
   ...
    aitoc/aitcg/raphael.js
    aitoc/aitcg/jscolor/jscolor.js
    aitoc/aitcg/rgbcolor.js
    aitoc/aitcg/canvg.js

That means all js file of aitoc does not getting properly of js_styles.phtml as this js code is after all aitoc js files.

Solution:

Remove all js files of Aitoc layout handler <catalog_product_view>

and call those all js fils at js_styles.phtml manually code

<!--  code of aitoc/aitcg/Aitcg/View/Abstract.js -->

....
<!--  end of aitoc/aitcg/Aitcg/View/Abstract.js -->


<?php
/* check current page is product */
if(Mage::app()->getFrontController()->getAction()->getFullActionName() =='catalog_product_view'){  ?>

<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/View/Popup.js')?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/View/Gallery.js')?>"></script>
....
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/Aitcg/AreaEditor.js')?>"></script>
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/raphael.js')?>"></script>
...
<script type="text/javascript" src="<?php echo $this->getJsUrl('aitoc/aitcg/canvg.js')?>"></script>
<?php } ?>
Related Topic