Despatch Date Module – part 9: Add field to ‘My Account’

In this post, we are going to add our newly created despatch date field to the customer’s ‘My Account’ area for any orders they have made. For this, we’ll take a similar approach to the one taken in part 2 of this series, when we set up the layout for the field within Magento Admin.

Here’s an image of how we want the despatch date field to appear for an order within ‘My Account’.

When we set up layout in ‘Admin’ (in part 2), we built a template (phtml file) containing the despatch date, and we amended an existing template to make it a container template for our new template. We want to follow that approach again here for ‘Frontend’. In the diagram you can see these templates in red where fields.phtml is the template we need to create, and info.phtml is an existing template that we need to amend. Also shown in red is local.xml, the layout file that we’ll need to create and shown in orange are the new directories we need.

When we set up layout within ‘Admin’, we specified a new layout file (despatchdate.xml) in Admin’s only layout directory, and we had to tell Magento that is was there within our module’s config.xml using <adminhtml> <layout>. By contrast, in ‘Frontend’, we store local.xml in our theme layout directory ‘app/design/frontend/default/mytheme/layout’ separate from the core files in ‘app/design/frontend/base/default/layout’. And unlike ‘Admin’, in Frontend we won’t need to specify the location of local.xml in config.xml, because Magento will automatically look for a file name local.xml after applying all other layout to a page.

We would still have some changes to config.xml if we needed a new block class to work with our new template, but in this post we use the existing block class that we set up in part 6 of this series, which we set up to support the new template in ‘Admin’.

OK let’s build the new template. Here’s the code for app/design/frontend/default/mytheme/template/blessthemoon/despatchdate/fields.phtml.

The important line here is line 6 in orange ‘<?php echo $this->getDestDate(); ?>’. We’ll need to make sure within our layout xml file that we link this template to the block class containing the method ‘getDestDate()’. This block class is the one created in part 6 of this series, and we used it already for our ‘Admin’ template ‘fields.phtml’ (see part 2 to refresh your memory).

In line 3 we’ve specified a heading using ‘echo $this->__()’. We looked at using this function to translate phrases in part 2 of this series under the heading ‘Building the Form’.

By inspecting the divs on the ‘My Account’ ‘Order Information’ page in our browser, we’ve used the same css classes to format our template for ‘Estimated Despatch Date’ (“box”, “box-title” and “box-content”). In addition, we’ve added the css id “despatch-date-padding” to distance this div from the ‘Shipping Method’ div above. The amendment then made in ‘skin/frontend/default/mytheme/css/styles.css’ to achieve this is shown in the following markup.

That’s our template built and formatted. We now want to amend the container template to make a ‘getChildHtml()’ call on the block associated with the template ‘fields.phtml’ that we just created. (See part 2 of this series for more depth on layout.) In order to discover the relevant container template, we’ll turn on template hints for Magento ‘Frontend’ in our ‘Admin’ area – with System : Configuration : Advanced : Developer : Debug, and set ‘Template Path Hints’ to yes (also covered in part 2). With templates hints on, we can see that the path of the container template file is frontend/default/mytheme/template/blessthemoon/despatchdate/sales/order/ info.phtml. We’ll amend this theme file by adding the line shown in red:

We’ve positioned our new block immediately below the ‘Shipping Method’ div. Finally, in order to identify the changes made to our templates and identify the block class associated with fields.phtml, we need to specify our layout file. We talked a little about ‘local.xml in part 2 of this series. We said that the simplest and cleanest way to update frontend layout is with the file local.xml stored in the theme’s layout folder. Magento loads local.xml last overriding and updating other xml. The beauty of this approach is that no modifications to other layout files are needed. Here’s the code for local.xml.

If you were with us in part 2 of the series, you saw for ‘despatchdate.xml’ how we referenced the name of the containing block and (re)set its template. Then we identified the child block, identified its block class type and set its template. Well we’ve done the same here in local.xml. In line 3, we’ve specified the page to which the changes apply. You can readily see what this should be in the url for this page, i.e. ‘/sales/order/view/’. Line 4 uses the ‘reference’ tag to identify the name of the block that we want to change. In lines 5 through 7, we (re)set its template to the container template we’ve just amended. In line 8, we identify the child block with the template ‘fields.phtml’ that we just created. Note the block type, which identifies the same class we used in conjunction with fields.phtml in ‘Admin’ (see part 2 of this series). This will allow us to use our method call ‘getDestDate()’.

We’ve done all we need to do. Assuming a despatch date has been specified for the order we’re viewing, we should now see it displayed for that order in the customer’s ‘My Account’ area.