Take the 2-minute tour ×
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It's 100% free, no registration required.

I have a custom requirement to add a specific JS and CSS related to website's footer. Is there any way in Magento by which I can add it in footer section ?

share|improve this question
add comment

4 Answers

up vote 5 down vote accepted

The footer block doesn't offer any support for js directly, like the head.

But there is a block with the name before_body_end where you can add everything you want with template or text block.

I would think about your own template and the block type Mage_Page_Block_Html_Head, then you can use what @Dexter recommended.

No, you need something like this, you have no page/html_head block to refer too:

<!-- get the block which we want our content in -->
<reference name="before_body_ends">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

And inside of your template, you need:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
share|improve this answer
    
thanks for the response @fabian blechschmidt. I added something like this but no luck and exception too. <default> <reference name="before_body_end"> <action method="addItem"><type>skin_js</type><name>js/test.js</name><params/></action> </reference> </default> –  Mark Feb 28 at 11:22
    
updated the answer, you need a block! –  Fabian Blechschmidt Feb 28 at 12:45
    
you're the MAN!!!Kudos..Thanks a ton for the answer..But I ll be glad if you explain me a bit about the code as well for a better understanding.. –  Mark Feb 28 at 13:00
    
Added a few comments. If you have more questions, please ask them - concrete questions :-) –  Fabian Blechschmidt Feb 28 at 13:04
    
If I only include <?php echo $this->getCssJsHtml() ?> and dont use <?php echo $this->getIncludes() ?> it still works like charm..Why is that so ? –  Mark Feb 28 at 13:05
show 1 more comment

Header and footer part is rendering by Page module in magento. In order to see header and footer templates, go to

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Take a look on other files in page folder also. There you can see header.phtml which render header section of each page.head.phtml use to add js and css files which are applicable for every pages in magento.

Also see files in page folder. Those files will render for each page according to the layout specification of a particular page.

Make a serious study on this module. It will help you a lot.

edit

You can add your css and js through page.xml. I think it will solve your problem. Go to

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

and add this code snippet in its defeault handle.(You can see lot of js and css file added in this handle. Just add this code below those codes)

 //this will add your js
 <action method="addItem">
     <type>skin_js</type>
     <name>js/yourjsfile.js</name>
 </action>  
 //this will add your css file
 <action method="addItem">
     <type>skin_css</type>
     <name>js/yourcssfile.css</name>
 </action>

That's it. Now make sure your custom js and css file are in the location

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Good luck for your work.

share|improve this answer
    
I do not work with page.xml. In my local.xml, I have to include using xml method. Your edited post only suggests how can I add a JS/CSS in xml files(which is not the question). –  Mark Feb 28 at 11:48
    
@Mark: in your qn, there is no hint for using local.xml file for your work. Your qn demands that you need to add js and css to footer. My updation will do that job perfectly. Any way why do you need local.xml file for this purpose? –  programmer_rkt Feb 28 at 11:53
    
Being a Mage developer who maintains standards, why would anyone use page.xml ? Your code <action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action> will add JS in <head> and not in footer!!! –  Mark Feb 28 at 11:58
add comment

Yes there is one way but you have to add via code like below add this code at bottom of the 1column.phtml file just before end of <body> tag.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>
share|improve this answer
    
Bad advice, because you don't want to copy your code into all the templates. –  Fabian Blechschmidt Feb 28 at 11:07
    
we can not add js in footer via xml so I use this flow. –  Keyul Shah Feb 28 at 11:57
1  
Have a look on my answer. You flow solves the problem, but you have to copy the code in every root template. –  Fabian Blechschmidt Feb 28 at 12:45
add comment

Use XML for it. To add Js in the footer call the footer reference. The code will look something like this

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>
</reference>

To add JS in skin folder you can use following code

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>
</reference>

To add css you can use following xml code

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>
</reference>

or you can also use

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
  </reference>
share|improve this answer
    
Invalid method Mage_Page_Block_Html_Footer::addJs –  Mark Feb 28 at 10:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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