I. INTRODUCTION 1. Time: 2.5 hours 2. Content:
How to add a CSS file to frontend
How to add a Javascript file to Frontend (Javascript in Javascript folder and Javascript in skin)
Javascript and CSS on template II. CONTENT
1. How to add a Magento CSS file to frontend
1.1. Creating a CSS file in folder skin/frontend/default/default/css/ or skin/frontend/base/default/css/
Example: skin/frontend/default/default/css/magestore/mycss.css Or: skin/frontend/default/default/css/mycustom.css
Or: skin/frontend/base/default/css/mycustom.css.
1.2. Adding a CSS file from layout file
In the following examples, system firstly finds the declared CSS file in folder
skin/frontend/default/default/css. If it cannot find in this folder, system automatically finds in folder skin/frontend/base/default/css. If the system fails to find in both above folders, it will
report error or skip.
* For comprehensive system (always add when layout files have not been loaded) <layout version="0.1.0">
<default>
<reference name="head">
<action method="addCss">
<stylesheet>css/mycustom.css </stylesheet> <params>media="all"</params>
</action>
<action method="addCss">
<stylesheet>css/magestore/mycss.css </stylesheet>
152 </reference>
</default> </layout>
The following code block will add the following files respectively: skin/frontend/base/default/css/mycustom.css
skin/frontend/base/default/css/magestore/mycss.css to <head></head> when this module is loaded.
* For each site (only add when this action/page is loaded) <layout version="0.1.0">
<lesson15_index_index> <reference name="head"> <action method="addCss">
<stylesheet>css/mycustom.css </stylesheet> <params>media="all"</params>
</action>
</lesson15_index_index> </layout>
The above code block will add file mycustom.css to index action, controller index of module lesson 15.
Besides method=‟addCSS‟, we can use other methods to add CSS from outside CSS library as follows:
<?xml version="1.0"?>
<layout version="0.1.0"> <default>
<reference name="head">
<block type="core/text" name="addjquery"> <action method="setText">
<text>
<![CDATA[<link href="http://yourhostcss/js/calendar/calendar- win2k-1.css" type="text/css" rel="stylesheet"> ]]>
</text> </action> </block> </reference> </default> </layout>
2. How to add a Javascript file to frontend
2.1 Adding a Javascript file in Javascript folder <?xml version="1.0"?>
<layout version="0.1.0"> <lesson15_index_test>
<reference name="head">
<action method="addJs">
<script>yourscript.js</script> </action>
</reference>
153
<lesson15_index_view>
<reference name="head"> <action method="addJs">
<script>yourscript2.js</script> </action>
</reference> </lesson15_index_view > </layout>
The above code block will add JavaScript in file js/yourscript.js to <head></head> when action test of module lesson 15 is loaded, and add JavaScript in file js/yourscript2.js to <head></head> when action view of module lesson 15 is loaded.
2.2. Adding a Javascript file in skin folder <?xml version="1.0"?>
<layout version="0.1.0"> <lesson15_index_test>
<reference name="head">
<action method="addItem"> <type>skin_js</type> <name>path/newfile.js</name> </action> </reference> </lesson15_index_test > </layout>
The above code block will add JavaScript in file skin/frontend/base/default/path/newfile.js to <head></head> when action test of module lesson 15 is loaded.
2.3. Adding a JavaScript file from an outside library <?xml version="1.0"?>
<layout version="0.1.0"> <default>
<reference name="head">
<block type="core/text" name="addjquery"> <action method="setText">
<text> <![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> <script type="text/javascript">jQuery.noConflict();</script>]]> </text> </action> </block> </reference> </default> </layout>
3. How to add a Magento CSS file and a Magento Javascript file from file controller
3.1. Adding a Magento CSS file from file controller public function indexAction() {
154
$head = Mage::app()->getLayout()->getBlock('head');
$head->addItem('skin_css', 'css/additional.css');
$this->renderLayout(); }
The above code block will add CSS in file kin/frontend/base/default/css/additional.css to <head></head> when action index of module lesson 15 is loaded.
3.2. Adding a Magento Javascript file from file controller public function indexAction() {
$this->loadLayout();
$head = Mage::app()->getLayout()->getBlock('head');
$head->addItem('skin_js', 'js/additional.js');
$this->renderLayout(); }
The above code block will add JS in file skin/frontend/base/default/js/additional.js to <head></head> when action index of module lesson 15 is loaded.
4. How to add a Magento CSS file and Magento JavaScript file to a page from block
4.1. Adding a Magento CSS file from block
class Magestore_Lesson15_Block_Lesson15 extends Mage_Core_Block_Template
{
public function addCss(){
$this->getLayout()->getBlock('head') ->addCss('path/from/css/folder/to/your/file.css');
} }
4.2. Adding Magento JavaScript file from block
class Magestore_Lesson15_Block_Lesson15 extends Mage_Core_Block_Template
{
public function addJs(){
$this->getLayout()->getBlock('head')- >addJs('js/myjsfile.js');
} }
5. How to add a JavaScript file and CSS file to a Magento page from template
5.1. Adding a CSS file directly on file template
<link href= "path/from/css/folder/to/your/file.css " rel="stylesheet"
type="text/css">
5.2. Adding a JavaScript file directly on file template
155
<script type="text/javascript" src="<?php echo $this -> getSkinUrl('js/functions.js') ?>"></script>
6. Some notes of Magento Javascript file
6.1. JSON
Encode from an array:
$jsonData = Mage::helper('core')->jsonEncode($array); Decode to an array:
$array = Mage::helper('core')->jsonDecode($jsonData);
In your Magento Controller/Action, you can use the below code to send a JSON response:
$this->getResponse()->setHeader('Content-type', 'application/json');
$this->getResponse()->setBody($jsonData);
6.2. JsQuoteEscape
If you want to assign a string “He says: I‟m Ron.” to a JS variable, you need to use jsQuoteEscape() function.
<?php
$magestoreSlogan = "'magento extensions of innovative functions' is Magestore's slogan";
?>
<script>
var escapejs = '<?php echo Mage::helper('core')- >jsQuoteEscape($magestoreSlogan) ;?>';
alert(escapejs);
</script> III. SUMMARY
We will gain some knowledge after learning this lesson:
Configuring layout to add a custom CSS in skin folder for the whole Magento system or each page
Configuring layout to add CSS from an outside CSS library to Magento pages
Configuring layout to add JavaScript to a page or the whole Magento system, JavaScript file is either in JavaScript folder or in skin folder.
Adding CSS and JavaScript directly in template. Back to top
156