Hello friends,
In the previous lesson, we learned Magento form on Frontend with four main parts:
- Steps to create a Magento form on Frontend
- HTML structure of a normal Magento form
- How to name class and create validate fields for a Magento form
- How to process data after creating article
Now, we will learn a new lesson called Magento CSS and Magento JavaScript Files on Frontend. It lasts for 2.5 hours and is divided into two parts. Keep up with Magento Tutorial.
The content of lesson 15 focus on six main issues:
- How to add a Magento CSS file to frontend
- How to add a Magento Javascript file to Frontend (Javascript in Javascript folder and Javascript in skin)
- How to add a Magento CSS file and a Magento Javascript file from file controller
- How to add a Magento CSS file and Magento Javascript file to a page from block
- How to add a Javascript file and CSS file to a Magento page from template
- Some notes of Magento Javascript file
1. How to add a Magento CSS file to frontend
1.1. Create (Copy) a CSS file (or a CSS folder) 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. Add a CSS file from layout file
In the following examples, system firstly finds the declared magento CSS file in folder skin/frontend/default/default/css. If it can’t 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> </action> </reference> </default> </layout>
The following code block will add the following files respectively:
skin/frontend/base/default/css/mycustom.css and
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 Magento Javascript file to frontend
2.1 Add 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> </lesson15_index_test > <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 JS in file js/yourscript.js to <head></head> when action test of module lesson 15 is loaded, and add JS in file js/yourscript2.js to <head></head> when action view of module lesson 15 is loaded.
2.2. Add 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 JS in file skin/frontend/base/default/path/newfile.js to <head></head> when action test of module lesson 15 is loaded.
2.3. Add 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. Add a Magento CSS file from file controller
public function indexAction() { $this->loadLayout(); $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. Add 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. Add 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. Add 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. Add a Magento CSS file directly on file template
<link href= "path/from/css/folder/to/your/file.css " rel="stylesheet" type="text/css">
5.2. Add a Magento Javascript file directly on file template
Add the following code block to template file:
<script type="text/javascript" src="<?php echo $this -> getSkinUrl('js/functions.js') ?>"></script>
6. Some notes of Magento Javascript file
6.1. JSON
To JSON encode from an array:
$jsonData = Mage::helper('core')->jsonEncode($array);
To JSON 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 say:” I’m Ron”.’ to a JS variable, for example, 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>
This is the end of lesson 15, Magento CSS and Magento JavaScript Files on Frontend. Hope that it’s helpful for you! Enjoy coding and see you later. Follow us in Magento Open Course for Magento Tutorial.
