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!

Categories: