2

I've been looking through a lot of posts on how to add CSS / JS file in the footer.

As right now I have followed this path : page.xml

<block type="page/html_head" name="foot" as="foot" template="page/html/foot.phtml"/>

local.xml I did try all the variant, type/skin_js, addJs, addItem

<reference name="foot">
    <action method="addJs"><script>lebernard/test.js</script></action>
</reference>

foot.phtml Translator script is rendering as normal, so foot.phtml is getting called. I tested it with a string as well.

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>

Finally I'm calling in 1column.phtml (and others) getChildHtml('foot');

So I though it was a misplaced JavaScript file since the translator script is called properly. I did put it as follow in :

  • /js/lebernard/test.js
  • /js/test.js
  • /skin/[theme]/js/test.js

All I want is to include a js file in the footer using local.xml . I'm on 1.9.0.1.

1

If all you are trying to do is add a JS file inclusion in the footer, the easiest way might be to just put it in a template file. So in your local.xml file.

<default>
    <reference name="footer">
        <block type="core/template" template="my-template-file.phtml"/>
    </reference>
</default>

And then in my-template-file.phtml:

<script type="text/javascript" src="<?php $this->getSkinUrl('js/my-js-file.js'); ?>"></script>
  • 1
    This can be workable, but not very good advice. For example merge scripts will not work. – zhartaunik Apr 25 '15 at 18:39
0

Local.xml

<layout version="0.1.0">
    <default>
    <reference name="footer">
        <!-- add Custome JS to footer -->   
        <block type="page/html_head" name="footerjs" as="footerjs" template="page/html/footerjs.phtml">
            <action method="addItem"><type>skin_js</type><name>js/scripts.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/scripts02.js</name></action>
        </block>
    </reference>
    </default>
</layout>

In page/html/footer.phtml add at the bottom

<?php echo $this->getChildHtml(footerjs) ?>

Create page/html/footerjs.phtml and add this

<?php echo $this->getCssJsHtml() ?>

one last thing you shouldn't add CSS to the footer only js files

EDIT:

After creating footerjs block you can use it on individual section on your site, so if you want load js file only on home page you can do this:

<cms_index_index>
    <reference name="footerjs">

    </reference>
</cms_index_index>

Or only on product pages:

<catalog_product_view translate="label">
    <reference name="footerjs">

    </reference>
</catalog_product_view>
0

Js library not working becouse footer has default cache enabled. You must to add a block inside the footer block.

<reference name="footer"> 
    <block type="core/template" name="customname" as="customname">
        <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
        <action method="addItem"><type>skin_js</type><name>js/scripts.js</name></action>
    </block>
</reference>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.