Now that we have all the files, we will see how to integrate them into the theme.
To declare the new JavaScript and CSS files, we have to insert the action in the local.xml
file located at app/design/frontend/bookstore/default/layout
.
In particular, the file declaration needs to be done in the default handle to make it accessible by the whole theme.
The default handle is defined by the following tags:
<default> . . . </default>
The action to insert the JavaScript and CSS files must be placed inside the reference head
block. So, open the local.xml
file and first create the following block that will define the reference:
<reference name="head"> … </reference>
The action
tag used to declare a new .js
file located in the skin
folder is as follows:
<action method="addItem"> <type>skin_js</type><name>js/myjavascript.js</name> </action>
In our skin
folder, we copied the following three .js
files:
jquery.min.js
jquery.scripts.js
bootstrap.min.js
Let's declare them as follows:
<action method="addItem"> <type>skin_js</type><name>js/jquery.min.js</name> </action> <action method="addItem"> <type>skin_js</type><name>js/bootstrap.min.js</name> </action> <action method="addItem"> <type>skin_js</type><name>js/jquery.scripts.js</name> </action>
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you. Repeat this action for all the additional JavaScript files that you want to add.
The action
tag used to declare a new CSS file located in the skin
folder is as follows:
<action method="addItem"> <type>skin_css</type><name>css/mycss.css</name> </action>
In our skin
folder, we have copied the following three .css
files:
bootstrap.min.css
styles.css
print.css
So let's declare these files as follows:
<action method="addItem"> <type>skin_css</type><name>css/bootstrap.min.css</name> </action> <action method="addItem"> <type>skin_css</type><name>css/styles.css</name> </action> <action method="addItem"> <type>skin_css</type><name>css/print.css</name> </action>
Repeat this action for all the additionals CSS files.
By default, the base theme includes a CSS file called styles.css
, which is hierarchically placed before the bootstrap.min.css
.
One of the best practices to overwrite the Bootstrap CSS classes in Magento is to remove the default CSS files declared by the base theme of Magento, and declare it after Bootstrap's CSS files.
Thus, the styles.css
file loads after Bootstrap, and all the classes defined in it will overwrite the boostrap.min.css
file.
To do this, we need to remove the styles.css
file by adding the following action
tag in the xml
part, just before all the css
declaration we have already made:
<action method="removeItem"> <type>skin_css</type> <name>css/styles.css</name> </action>
Hence, we removed the styles.css
file and added it again just after adding Bootstrap's CSS file (bootstrap.min.css
):
<action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action>
If it seems a little confusing, the following is a quick view of the CSS declaration:
<!-- Removing the styles.css declared in the base theme --> <action method="removeItem"> <type>skin_css</type> <name>css/styles.css</name> </action> <!-- Adding Bootstrap Css --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action> <!-- Adding the styles.css again --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action>
If you check the Bootstrap documentation, you can see that in the HTML5 boilerplate template, the following conditional JavaScript code is added to make Internet Explorer (IE) HTML 5 compliant:
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <![endif]-->
To integrate them into the theme, we can declare them in the same way as the other script
tags, but with conditional parameters. To do this, we need to perform the following steps:
js
folder of the theme..xml
file, but with the conditional parameters as follows:<action method="addItem"> <type>skin_js</type><name>js/html5shiv.js</name> <params/><if>lt IE 9</if> </action>
<action method="addItem"> <type>skin_js</type><name>js/respond.min.js</name> <params/><if>lt IE 9</if> </action>
Now, after we insert all the JavaScript and CSS files in the .xml
file, the final local.xml
file should look as follows:
<?xml version="1.0" encoding="UTF-8"?> <layout version="0.1.0"> <default translate="label" module="page"> <reference name="head"> <!-- Adding Javascripts --> <action method="addItem"> <type>skin_js</type> <name>js/jquery.min.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/bootstrap.min.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/jquery.scripts.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/html5shiv.js</name> <params/><if>lt IE 9</if> </action> <action method="addItem"> <type>skin_js</type> <name>js/respond.min.js</name> <params/><if>lt IE 9</if> </action> <!-- Removing the styles.css --> <action method="removeItem"> <type>skin_css</type><name>css/styles.css</name> </action> <!-- Adding Bootstrap Css --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet> </action> <!-- Adding the styles.css --> <action method="addItem"> <type>skin_css</type> <stylesheet>css/styles.css</stylesheet> </action> </reference> </default> </layout>
18.217.139.162