五大财神图片高清图

書名： Mastering Magento Theme Design
作者名： Andrea Saccà
本章字數： 640字
更新時間： 2021-07-16 11:57:27

Integrating the files into the theme

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.

Tip

As explained in the previous chapter, all the overrides of the base theme should go in the local.xml file and we are going to use it to add new CSS and JavaScript files.

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>

Declaring the .js files in local.xml

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>

Tip

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.

Declaring the CSS files in local.xml

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.

Note

All the JavaScript and CSS files that you insert into the local.xml file will go after the files declared in the base theme.

Removing and adding the style.css file

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>

Adding conditional JavaScript code

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:

Download the files at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js and https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js.
Move the downloaded files into the js folder of the theme.

Always integrate JavaScript through the .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>

A quick recap of our local.xml file

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>