4elements, web design and consultancy

  1. Magento Theme Development: Home Page, Part 2

    In the previous tutorial in this series, we started modifying the header section of the home page. In this tutorial, we'll start where we left off with the header section improvement, and then we'll create the new slider CMS block and call it from our template files. As we have a lot to cover in this article, let's start without further delay.

    As we have partially fixed the top header, the only thing which needs fixing there is the top cart section. To customize the header cart, first we’ll try to find out which template files are responsible for rendering that part. To analyze that, let's first add some products to the cart, so that we can fully investigate it.

    Enabling Template Tags

    As we enable the template hints, we can see that the header cart’s outer container is coming from this template file: frontend/rwd/default/template/checkout/cart/minicart.phtml. Then on click, the expanded portion is rendered through this file: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Finally, each cart item is rendered through this file: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

    We’ll import all these files into our newly created theme, and then start modifying them.

    Let’s start the modification process with the outermost minicart.phtml file. This is the current code of this file:

    Now before we start any modifications in it, let’s check the code of our header cart section in our original HTML file. The code there looks like this:

    So, we’ll start modifying the PHP file code to make it similar to our HTML code. We’ll just use an anchor tag here to wrap the cart icon, and after that we'll show the minicart content. Hence our code will look like this:

    Here we have replaced the outermost wrapper of the top cart, but now we need to edit the drop-down section wrapper. As we have already seen, that wrapper is coming from frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Let’s check the current code of this file:

    When we compare it to our HTML template, there are couple of things we need to do. First of all, inside the minicart-wrapper div, we’ll start implementing our ul, and for each item we’ll iterate under the li tag. At the end, we’ll show the cart total, or indicate that there are no items in the cart. Our final code for this file will look like this:

    Now the final part which is left is styling the cart list item itself. As we have already figured out, the file responsible for that part is: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

    The current code of this file looks like quite long and difficult to understand, but don’t be intimidated. We don’t need to edit all of this, because the main part of the file code is just calculating the right price, and other product options. Again, we’ll check our HTML code, put it in this file, and start replacing the static text with dynamic values. This is the code for each cart item in our HTML:

    We’ll replace the img tag with this one:

    Next, we’ll replace the name with dynamic code:

    To display the product options, we’ll use this dynamic code:

    Then we’ll determine and show the quantity using this code:

    For price calculation, we’ll enter this code in the place of the static price:

    And as the last step, we’ll replace the href to remove the URL with this one:

    I have found all this code from the actual default.phtml. You don’t have to figure out all the logic and code on your own, but if you look closely you can find it in the file you are trying to modify.

    So, the final code of our default.phtml file looks like this:

    Now if you save all these files, and reload the homepage, you should see something like this:

    Top Cart Fixed

    We have some problems with the styles, but the HTML rendering is pretty close to our required HTML design. Now that we have completed the top header section, the next is the logo section. Luckily there is nothing much to do there except the styling part (to make the logo center aligned) that we’ll do in the styling article. Our menu items also seem pretty close to what we expect, so we’ll just need to modify the search bar, and then the main slider.

    To modify our search bar, let’s turn on the template hints, and see which part is responsible for rendering this code: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

    Currently this file looks like this:

    So, we’ll use the outer divs of the HTML, and replace the inner content with the dynamic content. Our new form.mini.phtml file will look like this:

    In the last part of this article, we’ll edit the main slider. For that, we’ll create a new static block, by going to CMS > Static Blocks > Add New Block. We’ll name this Block ‘Homepage Slider’, and we’ll insert the Identifier as ‘home-slider’—that’s how the code will be able to find this block. 

    Creating Homepage Slider Static Block

    Now we’ll enter the slider code from our HTML.

    Note that we have replaced the image source relative to the skin directory using the skin_url tag like this:

    Now we’ll add these lines in the header.phtml file we created in the last article, just above the last line <?php echo $this->getChildHtml('topContainer'); ?>.

    The last step is to remove the current slider. To do that, go to CMS-Pages > Madison Island, and from the Content section, remove all the code up to the start of the style section.

    Removing previous Home Slider

    Save everything and reload the home page, and now you should see it all coming along very well. Some styles are off, but we’ll deal with that in a separate styling tutorial. For now we just need to take care of the content section of the home page, where we’ll show a latest products carousel, and then we’ll customize the footer. We’ll do all this in the next tutorial, so stay tuned for it!



    Leave a comment › Posted in: Daily


Got anything to add?

(Basic HTML is fine)