4elements, web design and consultancy

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.

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:

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:

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

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.

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.

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.

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!