Adding Bootstrap theme template files to your custom Magento theme

Last post, I created my own cusomised Magento theme. It looks crap, but it works! Instructions here https://delboy1978uk.wordpress.com/2015/06/04/creating-custom-magento-themes/ In this post, I am going to take my fancy bootstrap 3 store template, and integrate it in to our newly created theme. The first stage is learning how the templates all work, so we’ll bring in the js and css, and make our own header until we get the hang of it. Then we can take the HTML from our template and add it in. But first things first.

fashion

The theme I downloaded has Bootstrap 3, but not the latest version, so I’m grabbing the latest from http://getbootstrap.com/getting-started/#download.

Once downloaded, copy the following files into your theme in /skin/frontend/fashion/default :

/css
    /bootstrap.min.css
/js
    /bootstrap.min.js
/fonts
    /glyphicons-halflings-regular.eot
    /glyphicons-halflings-regular.svg
    /glyphicons-halflings-regular.ttf
    /glyphicons-halflings-regular.woff

Stick your jquery.min.js in /js/lib/jquery.  There’s already a jQuery in there, but yours might be newer. You’ll notice a noconflict.js too. That stops jQuery and Prototype from conflicting with one another.
Ok, now we’ve done that, we need to configure our /app/design/frontend/fashion/default/layout/local.xml file. Javascript & Css go in our head block. So lets add it:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 * Local layout modifications for our local theme
 * @category    design
 * @package     fashion
 * @copyright   Copyright (c) 2015 delboy1978uk.
 */
-->
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addJs"><script>js/lib/jquery.min.js</script></action>
            <action method="addJs"><script>js/lib/jquery/noconflict.js</script></action>
            <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name></action>
            <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/styles-ie.css</name></action>
        </reference>
    </default>
</layout

As you know, the C of CSS stands for cascading. The styles.css in the base theme will be called first, which obviously is unwanted behaviour which could cause class conflicts, so we really want to stop the base theme from loading it. So add this line before the bootstrap.min.css line :

<!-- Remove base theme styles.css --> 
<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>

Now let’s deal with the world’s shittiest, least standards compliant browser out there (if you can call it a browser) : Internet Explorer.  The usual suspects apply here, namely https://oss.maxcdn.com/libs/respond.js/1.3.0/ respond.min.js & https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js . Download them into the theme js folder, and add them under that bootstrap js line (notice the params bit):

<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>

You can also add a config section specifically for print, so here’s what to add after the reference=”head” section:

<print translate="label" module="page">
    <label>All Pages (Print Version)</label>
    <!-- Mage_Page -->
    <block type="page/html" name="root" output="toHtml" template="page/print.phtml">

        <!-- This block allows the print.phtml template to get the logo -->
        <block type="page/html_header" name="header" as="header"/>

        <block type="page/html_head" name="head" as="head">

            <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
            <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/print.css</name></action>
        </block>

        <block type="core/text_list" name="content" as="content" translate="label">
            <label>Main Content Area</label>
        </block>

    </block>
</print>

Now we add our ‘root’ template file. At the top, in the default node but above the <reference name=”head”> node, add the following (for the example I’m using the 2 col layout):

<reference name="root">
      <action method="setTemplate">
          <template>page/2columns-left.phtml</template>
      </action>
</reference>

Great! Now it’s time to rip apart the .phtml files we copied over from the base theme! Open /app/design/frontend/fashion/default/template/page/2columns-left.phtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?= $this->getLang() ?>">

    <head>
        <?= $this->getChildHtml('head') ?>
    </head>

    <body<?= $this->getBodyClass() ? ' class="'.$this->getBodyClass().'"' : null; ?>>
        <?= $this->getChildHtml('after_body_start') ?>
        <?= $this->getChildHtml('global_notices'); ?>
        <header>
            <?= $this->getChildHtml('header'); ?>
        </header>
        <section id="after-header">
            <div class="container">
                <?= $this->getChildHtml('slider'); ?>
            </div>
        </section>
        <section id="maincontent">
            <div class="container">
                <div class="row">
                    <?= $this->getChildHtml('breadcrumbs'); ?>
                    <aside class="col-left sidebar col-md-3">
                        <?= $this->getChildHtml('left'); ?>
                    </aside>
                    <div class="col-main col-md-9">
                        <?= $this->getChildHtml('global_messages'); ?>
                        <?= $this->getChildHtml('content'); ?>
                    </div>
                </div>
            </div>
        </section>
        <footer id="footer">
            <div class="container">
                <?= $this->getChildHtml('footer'); ?>
            </div>
        </footer>
        <?= $this->getChildHtml('before_body_end'); ?>
        <?= $this->getChildHtml('global_cookie_notice'); ?>
        <?= $this->getAbsoluteFooter(); ?>
    </body>

</html>

Okay, do the same for the other template files too! You know the score! Ditch the Magento markup and replace with BS3 awesomeness!
Check out my next post where we’ll start editing the view files and creating blocks etc!

 

Finding overridden templates in Magento

Magento is pretty damned cool! I’m still getting used to it and so here’s another hint for you!

Anyway, the way the templating system is structured means that you can create a new folder and override the defaults by recreating the class/view/whatever in that folder.

For instance, our default customer login template resides in

/app/design/frontend/THEMENAME/template/customer/account/login.phtml

This template can be overridden with another module, and it will automatically use the THEMENAME in question, so you can have multiple versions of the same view.

This is where it gets confusing!

For instance, I was happily editing said login page, only to discover that nothing had changed! I was on the wrong template! Anyway, it turns out that if you log into the admin panel, you can click on the System > Configuration menu.

Once there, at the top left, there is a dropdown select menu called ‘current configuration scope. Select the theme you are working on, and the page will reload. (This is based on the Manage stores section of the admin panel, which I havent worked on yet, but the essence of it is that you have a base system, which can have multiple stores, which can have multiple views.)

Once the page reloads, scroll down to the bottom of the left-hand column, and look for ‘Developer’ in the advanced menu. In the ‘Debug’ panel, you can turn Template Path Hints on or off. Hit save, and you’re almost set to go. Lastly we need to clear the cache, so click on the System menu, and select Cache Management. I leave cache OFF in my dev environment, however you can click select all, and click refresh option in the dropdown next to submit (should alreday be selected), then submit.

OK, so what did all that do then? Well, if you refresh the page you are working on, you’ll notice it suddenly looks messy! However, you can see exactly where each part of the page came from! 😀 When you are working on a project of the kind of size I’m working on right now (i.e. huge) then there’s a lot of time to be saved!

Template Path Hints turned ON
Template Path Hints