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:

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

So the new code on line 18 will look like this:

Next we’ll replace the product name on line 22 with this dynamic code:

On line 24, we’ll replace the price code with this:

Inside the pull-right class on line 29, we’ll add the code for showing the review and product availability. So the new code on line 29 will look like this:

Next we’ll replace the hard-coded description written on line 33 with this dynamic tag:

If we look at the HTML file which we are editing, the next thing we see is the drop-down boxes for product options selection. We’ll replace that code inside the size-input div with this dynamic code:

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:

First of all, we’ll copy this HTML code of our images section into a newly copied media.phtml file:

Now, we’ll start modifying this code to insert the dynamic code in the appropriate places by comparing it with the actual media.phtml file.

We’ll start by adding these lines at the top of the file:

We’ll replace the div with class preview-small with this code:

Similarly we’ll replace the div with class thum-image with this code:

And at the end of the code, we’ll add this line:

So the file's code will look like this at the end:

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.

product page getting ready

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.

Related products section before editing

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’ll start making it dynamic by putting dynamic tags into it while comparing it with the actual related.phtml file.

We’ll put the entire code in this if tag:

Next we’ll place this for loop right after the row div:

Next we’ll start placing the dynamic tag of product name, price, description, url, etc., in the product div, as we did while editing products on the home page.

The whole code for this file after editing will look like 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:

product page before CSS

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.



Related Articles