Ecommerce Developer
 
 

Design & Inspiration

Building a Magento Theme Start to Finish, Part 14: Facing the Horror

By Armando Roggio on May 06, 2010 · with 4 Comments

 

Over a series of 13 episodes, I've demonstrated how to begin working with the Magento platform.

Generally, the series has been well received and we have a home page that is—in my opinion—both attractive and functional. So now we turn our attention to the next class of page in the Pine Theme, the product category page.

The completed home page is shown

In a typical Magento theme—and in the Pine Theme—the product category page uses a different page template than the home page. In our specific example, the home page is based on the 2columns-right.phtml page template located in app > design > frontend > default > pine > template > page, where "pine" is the specific name of the theme you're building. But the product category page of our theme is based on 2columns-left.phtml in the same folder.

Thus, clicking through to a product category page can be horrifying, since our entire layout is shot—nothing is where we might have expected it to be.

The product category page is a mess in term so of layout

In this episode, I'll get to work on the product category page. It won't be horrible for long.

Magento Video

The Magento Theme Series, To Date

Add a Few Products

I won't go through this first step in detail, but if you don't have any products in your store, add at least four of them so that you have something to work with on the product category page. Magento does offer an entire selection of sample products that you can add to your database before you install the platform.

Adjust the Page

I am going to start at the top of the product category page and work down. The first problem that I notice is that the header section is a mess. For example, on the home page, the site search form hides above the top of the page and only comes into view when a user hovers over the search link.

The search form is shown

But on the product category page the search form is not hiding at all and is too wide.

The search form on the product category page is out of position

Thanks to Magento's templating system, this fix is extremely easy. I open both the 2columns-right.phtml and 2columns-left.phtml template files in a code editor. In the "left" template I locate the following section of code.

        <?php echo $this->getChildHtml('header') ?>

In my version of Magento, this was on about line 49 between the open tag for the "container" div and the "outline-creator" div. Having located this bit of code, I gleefully delete it.

Turning my attention to the "right", or home page, template, I copy this section of code.

        <header>
		<div class="header">		
		<div class="search-bar" id="search-expand">
                <?php echo $this->getChildHtml('topSearch') ?>
        </div>
		<div class="toplinks-bar">
            <?php  echo $this->getChildHtml('store_language') ?>
            <?php echo $this->getLayout()->getBlock('header')->getWelcome() ?>
                <?php echo $this->getChildHtml('topLinks') ?>
        </div>
		<?php echo $this->getChildHtml('header') ?>
		</div>
		</header>

Next, I paste this code into the "left" template, effectively replacing the code I deleted just seconds ago. In the "left" template I go further down in the code and locate the following few lines, which should come directly after the opening "outline-creator" div tag.

            <div class="toplinks-bar">
                <?php  echo $this->getChildHtml('store_language') ?>
                   <?php echo $this->getLayout()->getBlock('header')->getWelcome() ?>
                <?php echo $this->getChildHtml('topLinks') ?>
             </div>
            <div class="search-bar">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <?php echo $this->getChildHtml('topSearch') ?>
            </div>

When I save the "left" template and reload the product category page in my browser, the header is completely done. It now looks exactly like the home page.

The proper layout is not applied to the product category page

The Vertical Page Height Problem

With the header looking good, I turn my attention to my first design problem for this page—its vertical height.

The home page had a set height. I determined how much space to allow for the content slider in the middle of the page, so it fit nicely onto the page background, but the product-category page's height will vary based on any number of factors, including the number of products in a particular category, whether the shopper is looking at a grid view or a list view, and the number of layers and facets in the left navigation, etc.

With this in mind, I am going to introduce another design element into the Pine Theme that will make it easier to deal with this page's vertical height.

In the "left" template, I create a div with a class of "white-div" and wrap it around the "outline-creator" div. 

<div class="white-div">
        <div class="outline-creator">
 
			
			
            <div class="middle layout-2columns">
                <div class="col-left sidebar" id="col-left">
                    <?php echo $this->getChildHtml('left') ?>&nbsp;
                </div>
                <div class="col-main" id="main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
            </div>
        </div>
		</div><!--end white-div-->

To this new element, I assign style descriptions that give it a white background and position it properly on the page. These descriptions are added to the end of the boxes.css file at skin > frontend > default > pine > css.

/*Left Template Changes*/
.white-div {position: relative; top: -1px; background: #fff; padding: 20px 0;}

The product category page with the white-div in place

In the next episode, I will add style to the individual page elements, like the navigation on the left of the page.

Related Articles

4 Comments

Rss-sm