Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part Three: HTML Validation and "Your" Labels

By Armando Roggio on January 22, 2010 · with 27 Comments

 

For the past couple of weeks, I have been building a Magento theme from start to finish, and in this episode, I will make a tweak to my page HTML, validate our HTML 5, use the translate.csv file to change some labels, and change a content block.

About this Magento Theme Series

This is the third article in the series. Article one dealt with the prolegomena—the discussion and decisions that must be made before we can really start creating a new Magento theme. Article two dealt with how I manage pages; installing the Modern Theme, which I am using for the basis of my, Pine, theme; avoiding some cookie related issues; and changing to the forward-looking HTML 5 document type.

The Series' Links

Minor Change to the HTML on Page

Since last week, I have changed my HTML 5 strategy a little bit, so I start this week's work, by making a minor change to the HTML in the header.phtml and footer.phtml files. These files are located in app > design > frontend > default > pine > template > page > html. Essentially, I am going to move place div tags inside of the semantic header and footer tags.

The new code for the header.phtml file is:

    <header>
	<div class="header">
        <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>"/></a></h1>
        <img src="<?php echo $this->getSkinUrl('images/side_logo_promo.gif') ?>" alt="" class="side-logo-promo"/>
        <?php echo $this->getChildHtml('topMenu') ?>
    </div>
	</header>

The new code for the footer.phtml file is:

<footer>
<div>
<div class="footer-right">
    <p><img src="<?php echo $this->getSkinUrl('images/media/footer_callout.png');?>" alt="" class="footer-callout"/></p>
    <?php echo $this->getChildHtml('store_switcher') ?>
</div>
    <?php echo $this->getChildHtml('cms_footer_links') ?>
    <?php echo $this->getChildHtml('footer_links') ?>
    <?php echo $this->getChildHtml('newsletter') ?>
<?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" id="bug_tracking_link"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?><br />
<p><?php echo $this->getCopyright() ?></p>
<script type="text/javascript">
    $('bug_tracking_link').target = "varien_external";
</script>
</div>
</footer>

Next, I refer back to my pages spreadsheet and double-check that I have adjusted the DTD for all of the pages templates on the site. I do this by identifying the template path for each of the pages I am going to be working with. The Magento Template Path Hints tools makes this a very easy process.

The key code to add to these sections follows:

<!DOCTYPE HTML>
<html lang="<?php echo $this->getLang() ?>"

Validate for HTML 5

Next, I am going to validate the document to ensure that I have not made changes to invalidate the theme when I switched things to the HTML 5 document type. To validate the site, I am going to copy the home page source code to a file called test-1.html, since I want to use an online validation tool for my theme, which is running on the localhost.

And it turns out that I need to make some changes to the page footer to validate the theme so far.

Convert "My" to "Your"

The next item on my to-do list for this episode is to change labels like "My Account" and "My Cart" to "Your Account" and "Your Cart" or just "Shopping Cart." I want to make these changes because there has been some research that indicates that using the term, "your" encourages customers to engage.

To make these changes, I will edit the translate.cvs file located at app > design > frontend > pine > locale > en_US. To change the file, I just add a line and type first the term to be changed (i.e., "May Account") and then the new term (i.e.; "Your Account").

Adjusting Content Blocks

I will also make a change to one of the blocks on the Your Account page. This will be the first time I am making a change to a content block, which is something we will do more of later as we layout the product detail and product category pages.

Summing Up

So, through three articles, we have laid a foundation. In the next article, I will add a few products and begin styling the home page with CSS.

Related Articles

Category: Platforms & Shopping Carts | Tags: Magento, HTML

27 Comments

Rss-sm