Magento is a stunningly powerful e-commerce platform. In this miniseries, we’ll learn how to get started with the platform, getting to know the terminologies, setting up a store and all related aspects of it and finally learn how to customize it to make it our very own.

In this fifth part, we’ll be building one of the main views of our store – the product information page. Excited? Let’s get started!

The Full Series

• Part 1: Installation and Setup
• Part 2: Products, Taxes, Categories, Payment Gateways, etc.
• Part 3: Theming
• Part 4: Building the Theme
• Part 5: Building the Product Information Page

A Quick Recap

In the last part, we laid down the framework for the theme by building the repeating portions of the theme and essentially defining the general layout of the theme.

We also took a practical look at how theming in Magento works by going through how the layout is constructed, how the blocks work and how all the different pieces of the puzzle fit in together.

What are We Building Today?

Today, we’ll build the individual product view page. Just like before, the source files, both the front end and back end, are included. You can use it to see how the page looks but outside of that, the theme should look broken since, you know, we haven’t touched the rest of the views yet. So till we build the rest, try to not venture out of our sandbox.

Goals for the Page

Our goal for this specific page is relatively simple. We want a no-nonsense page that does only the essentials. Thus, I’ve drawn up a short list of elements that I think it needs:

• The product’s title: Fairly obvious
• Ability to show an image of the product
• A quick and full overview
• Availability and price of the product and finally
• An add to cart button to place it in the cart

That’s it. I want to keep it as simple as possible and thus opted to not over do it. Once you’ve learnt the general principles, feel free to add as many whizbang features as possible.

The Basic Look

The page basically has to look like so:

Step 1 – The HTML

We’ll first look at the HTML for the content part alone. I’m assuming you’re fairly fluent in HTML and CSS so I’ll skip to the fairly important parts.

<div id="content" class="product"> <div id="main-product-image"><img src="images/primg.gif" /></div>

<div id="product-details"> <div id="product-availability">Availability <span class="available">In stock</span></div> <div id="product-price">Price <span>$29.00</span></div> <a class="button" href="#">Add to cart</a> </div>

<h1>Photoshop to HTML</h1>

<h2>Quick Overview</h2> <p class="quick-overview"> </p>

<h2>Product Description</h2> <div class="product-description">

</div> 

First up, notice that I’ve wrapped the product image with a div to make it easier to add features in the future. Suppose you want to add a quick caption to the displayed image in the future, this way will let us add this a lot more quicker.

We have another div element holding the availability and pricing information along with the add to cart button. We’ll be sprucing it up with a little CSS3 in a bit.

The rest of the HTML is very straightforward. The title resides in a h1 section while the individual section headings take up h2. The quick overview is nested in a paragraph while the full overview takes up a div.

We can move on to the styling part now.