Magento

Hi,

I’m having trouble creating my own custom content blocks.  Bear with me I’ve only just started with magento and am getting a bit confused.

The first thing I have tried to do is to alter a copy of the existing header.phtml so that it only contains the ‘top_links’ block. I copied the file and edited it to just contain:

Then I saved it as header2.phtml

I then copied ‘header.php’ and changed the following: 

to:

and saved this as ‘header2.php’.

I then called this within my template file and nothing happened. If I call ‘header’ it works fine but not ‘header2’.
Should I be adding this ‘header2’ to an xml file or something?

Thanks

hello medlington-

You do not need to do all this. First of all, we advise you not to touch the core files, as this will hinder upgradability.
Open app/design/../../layout/page.xml and change the following:
<block type="page/html_header" name="header" as="header">

to this:
<block type="page/html_header" name="header" as="header" template="page/html/header2.phtml">

Thanks for the info but I’m still a bit confused.

I did what you said and it did apply the ‘header2.phtml’ template to the header but it did this for both ‘header’ and ‘header2’ I couldn’t seem to make them different.

This is the site that I’m trying to recreate in magento:

http://www.quickplaysport.com/index.php

I made it on Joomla but ran into too many problems and couldn’t finish it. I was splitting the header into 2 parts so that the first part would sit in the light grey bar at the top with the account links in and the other header would sit in the div below it with the logo in. I have now altered this part so that it is all one big div which can contain all the header content.
This is what I’ve got so far

http://82.38.173.237/magento/index.php

I have had some joy altering the current content blocks to get what I want but I know this isn’t the best way to do it

What I really need is an idiot’s guide to making a content block such as the ‘header’ from scratch and how to implement this new block within the template. I have read the designers guide but keep getting into a muddle.

Say I wanted to create the top right search box from my site, this is my current understanding of how to do it:

1. I would need to create a new .phtml file within app\design\frontend\default\default\template\page\htmlcalled something like ‘new_search.phtml’ this file would contain the XHTML structure

2. I then add this file into page.xml (is this the correct file?)
like this:

(I am also a bit confused about the block type, in the design guide it says not to alter this but if I am making a new content block which one do I start with)

3.Then I think I add it to my skeleton template 3columns.phtml like this:

I don’t seem to be having much joy with this though, there must be something simple that I’m missing or I’m doing it all wrong. Should I be making a new_search.xml file as well?

Sorry if this is something that should be straight forward but I’m really not a programmer and have got into such a mess with several versions of joomla and Oscommerce and have now come to magento all mixed up.

Thanks in advance

hi medlington-

Got you-
Ok, if I’m correct in my interpretations, the attached image is what you want to achieve and also a way you need to achieve it. I honestly don’t see a reason why you’d want to separate those parts into two separate templates, but since this is a reply on technicality, I’ll just focus on how to do what you want to do versus ‘why don’t you wanna do this?’

Before I get started, I want to remind you that this can be done in many different ways, but I’d use this method for better organization.
Basically you will use header.phtml only as the container template for the two separate header areas - I called it header_top and header_bottom for good representation.

Your page/html/header.phtml contain the following template tags.
<?php echo $this->getChildHtml('header_top') ?>
<?php echo $this->getChildHtml('header_bottom') ?>

The header_top and header_bottom doesn’t exists yet and the names does not in any way correlate to the name of the template. You will need to go into layout/page.xml and create those ‘blocks’ you just created before it actually holds any content. Think of it as this - you just created two little baskets called ‘header_top’ and ‘header_bottom’ - and now you need to give it functional properties like - what does it interact with? what’s its purpose? You will also need to place some eggs on those baskets too for content - this will all be done in the ‘layouts’, one of which is page.xml

One logic that will help you now is to understand that the ‘header_top’ and the ‘header_bottom’ blocks you’re about to create are located inside a block called ‘header’. That block is assigned via <?php echo $this->getChildHtml('header') ?> in one of the ‘skeleton templates’ which are either 3columns.phtml, 2colmuns-right.phtml, 2 columns-left.phtml...etc depending on which template is being used for your page structure. Just open up page/3columns.phtml and you will see <?php echo $this->getChildHtml('header') ?> somewhere in the template.

So now you’ve created:
header
--- header_top
--- header_bottom

Remember to make note of the hierarchy there, because now we’re moving on to page.xml.

In page.xml, search for= “page/html_header”. You’ll come across a block that looks something like this:

If you’ve changed template="page/html/header.phtml" to be template="page/html/header2.phtml" from the previous try, just revert it to header.phtml.

Now nest the following two new block into the ‘header’ block:

So now it will follow the following hierarchy (I’m abbreviating the above block assignment):
<block name="header">
<block name="header_top"/>
<block name="header_bottom"/>
</block>

Of course all the other stuff that was nested inside <block name="header"> will remain as is- I’d actually even comment out the blocks you won’t be using.

Now you need to make one more change to the XML in order to accommodate the ‘Home | View Cart | Your Account’ links in your header_top. Right now it’s indiscriminately placed inside the ‘header’ block. You will want to change that, so cut the part in page.xml that says ‘<block type="page/template_links" name="top.links" as="topLinks"/>’ and nest it INSIDE the ‘header_top’ block.
So now it’s looking like this (I’m abbreviating the way the block assignment would actually look):
<block name="header">
<block name="header_top">
<block name="top.links"/>
<block>
<block name="header_bottom"/>
</block>

Now you need to tell the block ‘top.links’ to show up in the header_top.phtml
In order to do that, all you need to do is place the following inside your header_top.phtml
<?php echo $this->getChildHtml('topLinks') ?>
All this is done for hierarchy reason. Remember this?:
header
--- header_top
------- top.links
--- header_bottom

That’s it for the header separation part. It may seem like a lot to digest, but keep paying close attention to every move you’re making with the above instruction, and things will start clicking for you soon :D

Click thumbnail to see full-size image

ohminu you are an absolute star!

I think Iv got my head around it now and almost finished my site.

I had chosen to duplictae the header more as an exercise than as a key part of making my site. The template from the old site was split into 2 at the top so I thought Id just duplicate the header to create the links in the top and then I would have learned how to create a new block from an old one.

Thanks again

@ohminu
Thank you SO MUCH for this great tutorial!!! I missing something like this in the Designer´s Guide. I´ve read it often, but don´t understand it really, how to create or move blocks in the structure. But this is a very good article! Thanks

I must agree, this is a rather comprehensive article. So the xml files...basically it doesn’t matter, WHERE we declare the stuff or as what we declare it. The ‘type’ has no impact on the functionality of the template. Is this correct? Nor does the location, it is only important for the overview. Did I get that right?

likewise, just want to leave my thanks for ohminu (and other helpful contributors). thanks a ton!

ok wait hold on did i miss something when you said....

“One logic that will help you now is to understand that the ‘header_top’ and the ‘header_bottom’ blocks you’re about to create are located inside a block called ‘header’. That block is assigned via <?php echo $this->getChildHtml('header') ?> in one of the ‘skeleton templates’ which are either 3columns.phtml, 2colmuns-right.phtml, 2 columns-left.phtml...etc depending on which template is bein’g used for your page structure. Just open up page/3columns.phtml and you will see <?php echo $this->getChildHtml('header') ?> somewhere in the template.”

do i need to add <?php echo $this->getChildHtml('header_top') ?> and <?php echo $this->getChildHtml('header_bottom') ?> after <?php echo $this->getChildHtml('header') ?> in each template (3 col, 2 col-right, 2 col-left, one col,and 1 col) ??? or will the ‘header’ tag call the other 2?

little confused here any help would be appreciated.Thank you.