Most e-commerce sites provide a way for customers to add comments to the order when they are checking out. Surprisingly, Magento does not provide built in functionality to deal with this simple requirement. This means that we will need to add this functionality as a custom extension and there are several extensions on the Magento extensions directory that provide this functionality.
So why are we adding yet another customer comment extension to the mix? We feel that our solution achieves the task with minimal and unobtrusive code and is in line with the Magento order management workflow.
Let’s see in a few screenshots how this extension shows up once it is installed.
1. Extension Configuration
The extension has a configuration section under: System > Configuration > Sales > Checkout > Magebase Checkout Comment Options:
All it controls is whether the extension functionality is enabled or disabled. No rocket science there.
2. Checkout – Shipping Step
The extension comes with a layout file under
app/design/frontend/base/default/layout/magebase/checkoutcomment.xml and a couple of phtml files under
app/design/frontend/base/default/template/magebase/checkoutcomment/. Out of the box, the extension will automatically display the Customer Comment field on the shipping methods step in the one page checkout. No action should be necessary to make this field show unless you have a heavily customized checkout or you are using a custom checkout extension.
To make the comments box display on the shipping step, we will need to override
checkout/onepage/shipping_method.phtml to add:
<?php echo $this->getChildHtml('mbcomments') ?> in the place where we want the comments box to appear. Please note that the comments box must be placed on the shipping method step in order to save the comment correctly. If you want to move the comments box you will need to find another event to observe.
Note that the extension doesn’t supply its own CSS so you will need to style appropriately.
3. Order Administration
Once the customer has completed the checkout and placed the order, we need to know where the customer comment information will be shown on the order management page. This is where the extension is ‘clever’ and keeps in line with the Magento order workflow. The extension will simply add the customer comment to the Comments History as shown in the screenshot to the right. This means that the extension doesn’t alter the default database to add custom columns to any Magento entities but uses the built in functionality to its advantage.
From an order workflow perspective, this makes sense as any notes and comments around the order are kept in the same area.
4. Order Confirmation Email
Another serendipitous consequence of using the built in Comments History functionality is that the customer comment is automatically sent out in the order confirmation email without any extra effort or additional template changes.
How it works
If you lift the ‘hood’ off this extension, you will see that the code is very simple. It leverages off built in Magento features to provide this simple functionality in an unobtrusive way by using an event observer, the comments history method and the
output="toHtml" layout attribute to force itself to render on the checkout template. The phtml is structured based on the Magento customer widget field implementation.
UPDATE: Due to an issue highlighted in the comments below, the toHtml output won’t work since it seems to interfere with the progress block updates. Therefore, we have changed the approach to a more manual one where we add our comments block in the
<checkout_onepage_index> handle, reference
name="checkout.onepage.shipping_method" and then we need to override
checkout/onepage/shipping_method.phtml to add:
<?php echo $this->getChildHtml('mbcomments') ?> to render the comments field. Please download the latest version below and apply the changes as instructed manually.
Suffice to say, the single line of code (in
Observer.php) that makes it all happen is:
Hopefully, we have supplied the community with a simple, free and useful extension and shown how to utilize built in Magento features to minimize our own programming effort and create efficient, performance conscious code.
Note: This extension was developed and tested on Magento 220.127.116.11 but should work fine for Magento CE 1.4.x and up, PE, EE 1.8.0 and up. There is no warranty or guarantee for the functionality and I don’t provide support for this extension. Use at your own risk and ALWAYS backup your database before installing.
Originally published on magebase.com. Copyright © 2012 Magebase - All Rights Reserved.