Blog

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 3 2013

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

    In the first part, we learnt about a Magento Theme Structure, and now we will be moving ahead with the PSD Conversion, from where you’ll be able to learn all the necessary steps that are needed in converting your PSD design files. As we have stated in the last part also, we assume that you have a basic knowledge about HTML, CSS and XML. So, here we will be providing you with certain basic codes, which includes HTML, CSS, XML, and PHTML. These codes will help you lay down the foundation of your Magento template, and depending on your PSD design file, you can modify it later.

    seosemanticxhtml

    This is our basic PSD and we will be making it exactly the same way using HTML, CSS and XML. As you can see, we have a logo on the top-left, and the user information and menu on the top-right. In the user menu, we have provided four options with which the user can access his own account, check and verify his shopping cart, and may proceed ahead to checkout or Logout whenever required. Below that comes the utility bar, which displays the breadcrumb style navigation along with a search input field, which will let the user to search through the store efficiently.

    In the content area, we haven’t put anything except the heading that says “Your Content Goes Here!” However, you can add your Product images here along with an Add to Cart Button, which will let the user to add the required products to his shopping cart.

    In the footer area, we have only placed the copyrighted information, but you can always add links pointing back to your products and pages, terms and conditions, privacy policy, etc.

    So, let’s proceed with our first step, which is to write the HTML code to convert this PSD into a Magento Based Template.

    Step 1 – The HTML of the Theme

    Here we will be using the latest HTML standard i.e. , HTML5 to produce the design mentioned in the picture above.

     First of all, we have wrapped everything inside a wrapper div, which eventually makes it easy to manage things. Additionally, there’s one more notable thing i.e., the individual blocks for the header, content, and footer section.

    Currently, the search input isn’t of much use at this moment. However, we’ll make it functional while integrating it with Magento and same with other available links. Currently, we have put them there just as the placeholders, but once we’ll start digging deep into Magento, we’ll get them working. Now, let’s move on to our next step where we will be coding the CSS.

    Step 2 – The CSS

     Till now, we have used a very basic CSS just to place the essential elements in the exact position where they should be, and styled them a little bit. For now, let’s move on to our next step, where we will be creating our first XML file.

    Step 3 – The page.xml

    This might prove to be a tricky one, therefore, you need a lot of focus on it. The presence of XML files is pretty much required in Magento, as it uses them to handle the page layouts, and define the elements which are to be rendered. Additionally, to define the overall layout of the Magento Store, each module of a theme must have its own XML file along with the master file. The file we are about to create i.e., page.xml is known as the master file.

     If you’ll have a close look at the xml file we have just created, you’ll see that we have created a master block for the entire data. You can consider it as the wrapper div element we defined in our HTML file created above. And we have instructed it to recall page/1column.phtml (we haven’t created this yet, but we’ll do that in the later part) as the template file for the page.

    Secondly, we have defined the element that needs to be included in the head section of the page. Though Magento comes with a lot of CSS and JS files, but as we are working on our own theme, we won’t need those right now. Instead, as you can see we have used our own CSS file.

    Thirdly, we have also defined the things that need to go into the header of our site. Here we need to place the menu/links at the top along with the breadcrumbs and the search field. Though we haven’t placed any content except a single text line in the content section, but still we will have included that as the content part. As you might have already noticed, we haven’t defined or inserted anything into this section. That is because Magento itself loads up all the required content into this particular section.

    At last, we have defined our footer area in the XML file, and have also mentioned the directory and file location so that Magento can pull its template file every time. Now our foundation file i.e., page.xml stands completed.

    Step 4 – Creating 1column.phtml file

    Now let’s create the Main Template file i.e., 1column.phtml, if you remember it correctly, it’s the same that we defined in the master block in page.xml file.

     Isn’t that looks almost identical to our main HTML file that we created at the very first step? The only difference in this file is that we have used the getChildHtml method to acquire each of the available block’s content. This would be the master page of your template, where from all pages will be rendered.

    Now let’s move ahead and create the template files for all our existing blocks.

    Step 5 – Creating Block Template Files

    The template blocks that we are about to create except from.mini.phtml, which is to be placed under the folder named ‘catalogsearch,’ must be placed under this ‘yourmagentothemename/page/html’ sub-directory.

    Let’s create the head section first.

    Head Section

    This would be the getChildHtml(‘head’), and needs to be stored inside the page/html directory of your theme.

     As Magento dynamically creates the titles, we need not to specify anything inside the title tags. However, the most important thing here that you should notice is the getCssJsHtml method is being called. With this method, Magento will be able to recall all the CSS and JavaScript files specified in the page.xml.

    Page header

    This would be the getChildHtml(‘header’), and needs to be stored inside the page/html directory of your theme.

     Here we have used the Magento’s API to recall the logo, and then we get the HTML for links, search and breadcrumbs function.

    Page Footer

    This would be the getChildHtml(‘footer’), and needs to be stored inside the page/html directory of your theme.

     In the footer area as you can see we have included a very less info (as per our PSD Design). However, you are always free to add as much as you want to.

    Top Links

    This would be the getChildHtml(‘topLinks’), and needs to be stored inside the page/html directory of your theme.

     In the beginning, it may look complicated to you, however, it isn’t. What it only does is that it loops through an array of links and then executes the code. However, these things aren’t essential for you and you can scrap all this and code a top menu yourself.

    Breadcrumbs

    This would be the getChildHtml(‘breadcrumbs’), and needs to be stored inside the page/html directory of your theme.

     Just like the toplinks.phtml file, it also loops through the crumbs and renders the text. The complicated portion of this code checks whether a crumb is a hyperlink or just a simple text, and renders it accordingly.

    Search

    This would be the getChildHtml(‘topSearch’), and needs to be stored inside the catalogsearch/ directory of your theme.

     Now as we have made all the necessary files and templates, we have come to an end of our design, and have accomplished it as well. And by now you might have become well aware of how Magento functions, and how do you need to code a template for it. However, we haven’t added any product in the content area yet, so we will be doing that in part 3.

    Note:- You may have noticed that we have named our designed theme as ‘yourmagentothemename,’ kindly change it according to your own requirements.

    Posted by ajeet Posted in: Magento Comments: 0