Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Apr 5 2013

    A Definitive Guide to Learn PSD to Magento Conversion – Part 3

    In the second part of this series, we had laid down the foundation of our Magento theme by coding its repetitive portions, essentially defining the overall layout of the entire theme.

    Additionally, we also learned how theming in Magento works by writing codes manually, which eventually made us understand how a Magento theme layout is constructed, the function of blocks and how they all fit together to form the entire template.

    But today, we’ll be heading to the third and last part of this series, where we will code a specific product view page. And as we did in the last part, we will be taking you ahead step by step with all the required source files including both the client side and server side. You are always free to use them to know how the page looks. However, at first the theme would look broken as the rest of the views are yet to be coded.

    The PSD Design

    Site PSD Design

    This is what we will be making today by using the codes that we wrote in the previous chapter. So let’s begin.

    Step 1 – The HTML

    Before beginning with the HTML, we believe that you are comfortable with the HTML 5 and CSS, and possess a good understanding of both. Therefore, we have skipped writing a fair amount of vital HTML codes. Now let’s have a look at the HTML for the content part alone.

     In the code given above, the first noticeable thing is that we have wrapped the product image inside a div. That has been done to be able to add the product features (if required) in the future pretty easily. For example; if you need to add a caption to the product image, by using this method, you’ll be able to attain that pretty quickly.

    Next, we have one more div that holds the product ‘Availability’ and ‘Pricing’ info along with the ‘Add to Cart’ button. We will be using the CSS3 to make it look perfect and suitable with our theme. Moreover, the remaining part of the HTML we have used is pretty simple to understand as it’s all very basic right now. The product title has been placed inside the h1 tag, while the individual section headings ‘Quick Overview’ and ‘Product Description’ have been placed inside the h2 tags. The text part of the quick overview section has been nested in a paragraph, whereas the text part of the product description has been placed inside the div element.

    Now let’s move ahead and do the CSS part to stylize the page.

    Step 2 – The CSS

     As you might have already noticed, we haven’t done anything fancy here. It is just a very basic CSS to put the required elements in their actual position. However, we have used a little bit of CSS3 just to make the ‘Add to Cart’ button look appealing.

    Now as we are done with our HTML and CSS, let’s move on and create the catalog file in XML.

    Step 3 – The catalog.xml file

    In the previous tutorial, we had told you that in Magento, each module has its own XML file to preserve the overall layout of the theme page, and to render the required items. In our theme, the inner page that we’re building today depends on the catalog.xml file to classify its contents and the structure.

    Once you are done with this file, you need to place it inside the layout folder of your theme. Now let’s begin and create the much required XML file named as the catalog.xml.

     The initial XML and layout version defined in this file are common, and used like this only in every other XML file, so they are of no importance to us now.

     With the first line of our actual XML code, we tell the Magento that we intend to alter in product view part. That is because the catalog.xml file carries the layout of a number of other views. Therefore, it is essential to specify the view we will be modifying.

     Here, with this set of code, we inform the Magento to use the 1column.phtml file as the main master template for a particular view. That’s because each individual view can use any of the available preset structures. For example, the home page can use a very complicated custom structure, whereas the product page of your theme can use the dual column layout, etc.

    However, if we will not specify anything here, Magento will use the default template specified inside the page.xml file. As we’re using that particular file for everything else, this portion of the code is something which isn’t required much, but while modifying this template for our personal use, editing its name will make it a lot easier than adding more XML codes to the layout file.

     Now as you can see here, we have recalled a new CSS file named as product.css. Though we could have done the entire CSS part inside a single file, but don’t worry as this way of doing things lets us to channelize our CSS better.

    In the beginning of this code, we have specified a reference to the head section of the file, and then recalled specific page content by placing the required file name inside it. Here, we have placed the product.css file that comprises of the required page specific CSS.

    Though we have just used the CSS, but you are always open to JavaScript and may use them wherever and whenever required.

     Here, we have defined a particular template file for the content portion of the page that will now be used by Magento.

     This block section defined in our xml file includes all the individual blocks nested wisely in the main content block. Fundamentally, we use individual template files to display the product’s image, product overview and product description along with its availability and prices with the ‘add to cart’ functionality.

    Now as we have covered everything required in this xml file, it now stands completed, so let’s march ahead and create the main template file.

    Step 4 – The Main Template File

    As we have already created our XML layout for the product view page, we can now begin to code the catalog/product/view.phtml file that we notified as the main template for our theme’s content area in the XML earlier.

    As you might have already noticed the code file listed below looks a bit different from the main template file we created in the second part of this series. That’s because we need to add some minor things directly rather than using them by taking a long path using the template files to avoid the bloat along with a little bit of API calls to back us.

     Now we would like you to have a close look at the given set of codes, this will help you notice that to recall the block contents, we have used the getChildHtml method. This method eventually works exactly the way we want it to, and the contents of these content blocks will be covered in a matter of few minutes from now.

     With this set of codes, we’re only asking Magento for the given product’s store info so that we can execute it and present it on this specific page.

     Here we have used one of Magento’s API methods to dynamically produce the URL the form requires to post to.

     Here too we have used another method of Magento, which helps us to grab the product’s title directly.

     Similarly, as our quick overview would be pretty short with just a sentence or two, here we have defined to import it directly rather than using a template file for the same. It’s the same function that we used to grab the product’s title, and now we are done with it. So now let’s go ahead and cover the last part of this entire theming process, where we will be making template files for our blocks.

    Step 5 – The Block Template files

    Remember, we have already done this before too? Yeah, you are right; we did the similar sort of work in the previous part, where we constructed individual block templates for the head section, header, content, footer, breadcrumbs, and search. But here we will be dealing with the product image, product availability and price, add to cart, and at last the product description.

    As we have already been through this kind of files, it shouldn’t be difficult for you to code the similar files now. So let’s begin and create the template file for the product image first.

    Product image

    Before we go ahead with the coding of this file, we would like to tell you that you need to name this file as media.phtml, and it would stored inside the specific directory in your templates folder i.e., ‘catalog/product/view/’ The getChildHtml(‘media’) maps directly to this file. Here’s its code.

     It is pretty simple to understand as it’s just a set of basic PHP codes. Here we have used the helper methods to recall the product’s image and then render it on the output screen.


    This file must be named as simple.html, and stored inside the same directory i.e. ‘catalog/product/view/’ in the templates folder of your theme. The getChildHtml(‘product_type_data’) maps directly to the specified file i.e., catalog/product/view/simple.phtml.

     Here we have placed certain codes with which it will be able to check whether the item is in stock or not, and then it will output the obligatory HTML. Recalling the price of the given product is a pretty simple method, isn’t it.

    Add to cart

    This file must be named as addtocart.phtml and placed inside the ‘category/product/view/’ directory. The getChildHtml(‘addtocart’) maps directly to this particular file.

     It is also a pretty simple set of codes to understand. Here the given code will check whether an item is up for sale or not before rendering the required HTML. It’s just a simple but crucial button that’s always required in a shopping site.

    Product Description

    You must name this file as description.phtml, and placed inside the same directory where we placed all .phtml files constructed above i.e., ‘category/product/view/’. The getChildHtml(‘description’) maps directly to catalog/product/view/description.phtml.

     It’s identical to how we incorporated the quick overview in our theme. Here we have used the Magento’s inbuilt methods to pull up the essential info about the given product. And now it will check for the existing description (if any) before rendering the output.

    That’s all, now we are done, and you can check your newly created product page in your browser. But before that, don’t forget to apply the theme from the Magento’s backend. Besides that, by now you will be efficient enough to code a basic Magento theme, and as you’ll practice more and more, you’ll be a champ very soon.

    Posted by ajeet Posted in: Magento Comments: 0