blog

Magento Theme Development: Product Page, Part 2

In this article of the Magento Theme Development series, we'll finalize the product page from where we left it in the previous article. We'll edit the phtml files responsible for rendering the media section, related products section, etc.

Now, let’s start adding the dynamic tag of images, price,
description, etc., inside the product-detail div which we started editing in the previous article.

We’ll start by adding the dynamic tag of images. If we look
at our edited HTML, the code for media extends from lines 19 to 28. We’ll replace
all of this with a single line of code:

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

As we can see from the actual view.phtml file, this one line
is fetching all the code for showing the images.

Now, this code will not automatically generate the options
for the product, but will also display the ‘add to cart’ button and sharing
options. So, we can also delete the following code, which comes after .size-input div:

Now if we look at the current page, everything is in place
and working fine. We just need to modify the inside code of some elements like
images area, related products section, etc. And lastly we just need to brush up
the CSS, and our page will be ready.

Without further delay, let’s start editing the code for the
images section. Remember we replaced all the images HTML with just one line of
code: <?php echo $this->getChildHtml('media') ?>. This line of
code is displaying here the code from the file template\catalog\product\view\media.phtml:
You can also verify this, by enabling the template hints and checking from
where the code for the images section is coming.

Now that we have determined the file responsible for
generating this code, let’s copy that file from the default rwd theme into our new
theme, and start editing it. The code for the media.phtml file looks like this:

Now we are almost done with the images part. At the end
we’ll fix some CSS issues, and it’ll look quite close to our HTML design.

Next is fixing the related section. We can see by enabling
template hints that this portion of page is coming from the file: template\catalog\product\list\related.phtml.

As you can probably guess, the next step would be to copy
that file to our new theme folder, and then start editing it.

We’ll create a new file, and copy the HTML code of the
related product section from our HTML theme. Here we’ll only keep one instance
of the product, as we’ll be looping it through in our phtml file. The code
we’ll copy will be this:

Now we are almost done with the phtml file editing for the
product page. We just have to fix some CSS issues, and our page will be ready.
Currently the page looks like this:

We are done with most of it. Now we just need to edit the CSS to make the last changes in this page, which we'll do in the next article, which will also be the last article of the series. Along with the CSS changes for this page, I'll explain how you can make changes in the other pages of the theme yourself by using the techniques you have learnt in this series.