4elements, web design and consultancy

  1. Magento Theme Development: Product Page, Part 1

    Now that we have completed the home page and the category page, in this tutorial we'll start editing the third most important page of the eCommerce website: the product page. Let's first open up the product page, and see how it looks now and how we want it to look.

    The product page in our HTML design looks like this:

    HTML design of product page

    Our current product page looks like this:

    Product Page before editing

    To start editing it, we'll do the same step as we have done dozens of times so far, i.e. enabling the template hints to figure out which template files are responsible for rendering this page.

    Enabling template hints

    As we can see, the page is a compilation of over a dozen files, but luckily we don't have to edit all of these. We'll just have to edit three or four of these files, and for the rest we'll just modify the styles to make them look like our design, without messing with the phtml files.

    If you look closely, the overall structure of the product section is coming from the \template\catalog\product\view.phtml file. I've pointed that out through an arrow in the above image. This file is providing the outer structure of all components and then the inner parts are coming from other templates, but we'll edit this outer one first.

    We'll copy this view.phtml file into our new theme, and start editing it. The current code of this file looks like this:

    Now we have to check out our HTML code, and we'll put all of our HTML code into this view.phtml file and then start editing it. The current code of the details.html file in our HTML design file is like this (I'm only copying the code for the product part excluding header, footer section, etc.):

    I know that's a lot of code, and might scare you away. But don't worry, because as you'll see when we start placing the dynamic tags in it, the code will start melting fast, and we don't have to worry about most of it.

    Now we’ll start editing this HTML code by inserting dynamic tags from our actual view.phtml file.

    First of all, we’ll add these lines at the top, to do some initialization:

    And then close the product-view div at the end of the file (line 314):

    Next we’ll wrap the product details div inside a form element, as it is in the actual view.phtml file. So we’ll add these lines inside the product-details div at line 10:

    Likewise, we'll now close this form, and also copy this JavaScript from view.phtml at line 77:

    In the next step, inside tab-box div (starting at line 129), remove all of the existing code, and copy the following tab code from view.phtml (around 100 lines of code replaced with these few lines). To make sure that the tab JavaScript keeps working fine, we’ll add the current classes tab tab-box div, so the new code will look like this:

    With all that done, now we’ll insert the <?php echo $this->getChildHtml('related_products') ?> tag inside the hot-products div, after removing existing code, so that it looks like this at line 166:

    See how around 150 lines of code is replaced with just these three lines? Let's save everything and see how the page is coming along so far. If you did everything right, it should look something like this:

    Product page after editing viewphtml

    It might look all messed up, but trust me, we are getting closer to what we want the page to look like. In the next article, we'll edit the files responsible for rendering the images section, related products, etc., and we'll lastly do some styling fixes, and our product page will be ready.

    In the end, let me reiterate that the large chunks of code shown above might intimidate you at first, but once you start replacing the code with appropriate dynamic tags, you'll soon realize that editing these isn't much work.

    In the next article, we'll complete the rest of this page by editing other phtml files.



    Leave a comment › Posted in: Daily


Got anything to add?

(Basic HTML is fine)