One of our most recent projects required us to get a grip on the Magento e-commerce platform. The client was request a "How did you hear about us" feature on the Magento onepage checkout form. Rather than spend the time to learn exactly how Magento is setup and learn a new flavor of PHP, we figured a module would be best. Luckily, we found free module that did the trick!

Inchoo is the company that created this module. The module essentially places a drop down option by default under it's own tab in the Magento onepage checkout.

Here is an example of the default usage of this module:

In order to get this module to work properly in Magento 1.5, we need to edit some files.

Configuration

First, we need to download the extension and unzip the files. Open your favorite FTP client and drag and drop the files into the root directory of your Magento 1.5 installation.

Once the extension is in place, log into the admin side of Magento and navigate to System > Configuration > Design > Admin Theme. We need to enter in custom into the admin theme field and save.

Once that is done, we need to dig around in the files to make this extension compatible with our English-speaking users and allow the extension to actually work!.

Our first matter of business is we need to change the text which appears on the onepage checkout form. Go to app/code/local/Inchoo/Heared4us/Block/Onepage/heard4us.phtml

Change this:

$this->getCheckout()->setStepData('heared4us', array(
        'label'     => Mage::helper('checkout')->__('Where did you heared for us'),
        'is_show'   => true
));

To this:

$this->getCheckout()->setStepData('heared4us', array(
        'label'     => Mage::helper('checkout')->__('How did you hear about us?'),
        'is_show'   => true
));

Next, we want to alter the text in the admin view to display correctly. Open app/design/adminhtml/default/custom/template/sales/order/view/info.phtml

Around line 134 (if you have line numbers, if not then search for "Where did you heared about us") we want to replace this:

<h4 class="icon-head head-heared4us"><?php echo Mage::helper('sales')->__('Where did you heared about us') ?></h4>

With this:

<h4 class="icon-head head-heared4us"><?php echo Mage::helper('sales')->__('How did you hear about us?') ?></h4>

The code above will change the text on the checkout form with proper English syntax and grammar...

Open your favorite IDE or text-editing program (notpad or textedit) so we can edit this code.
Note: if you don't have access to edit the files before you place them on the server then edit the files on your local system and then upload them to the server.

One of the first lines of PHP code we will see is the following:

<?php 
$_options = array(
	$this->__('Unterwasserwelt.de'),
	$this->__('Sea Star Online'),
	$this->__('Sea Star Magazine'),
	$this->__('Google'),
	$this->__('YouTube'),
	$this->__('Referral')
);
?>

This block of code controls the items that are in our drop down menu on the onepage checkout form. If you would like to use this drop down, the continue on reading how to customize it. If you would like to use a text field, then click here

Editing these drop down items is very easy. All we have to do is replace the text between the ' and ' inside of the parenthesis. For example:

<?php 
$_options = array(
	$this->__('A Friend'),
	$this->__('Twitter'),
	$this->__('Facebook'),
	$this->__('Google'),
	$this->__('YouTube'),
	$this->__('Referral'),
        $this->__('Saw it in a Store')
);
?>

We edited the text to suit our needs and we even added an option to the drop down. It's important that each item in the array have a comma after it with the exception of the last item in the array. Be sure the structure is always as follows:

$_options = array(
       $this->__('Item 1'), //first item,
       $this->__('Item 2'), //second item, many more items,
       $this->__('Item 100), //100th item,
       $this->__('Last Item') //final item (no comma after this)
);

 
If you want a text field where the user can enter in their information just like this:


Then we only need a few minor tweaks before we can achieve this feature!

First, we need to comment out the array which contains our drop down menu options.

<?php 
/*$_options = array(
	$this->__('Unterwasserwelt.de'),
	$this->__('Sea Star Online'),
	$this->__('Sea Star Magazine'),
	$this->__('Google'),
	$this->__('YouTube'),
	$this->__('Referral')
);*/
$_options = '';
?>

Next, we want to comment out the drop down menu itself:

<?php /*
	<select id="getvoice" name="getvoice">
		<?php foreach($_options as $_option): ?>
			<option value="<?php echo $_option ?>"><?php echo $_option ?></option>
		<?php endforeach; ?>
		<option id="getvoice-other" value="<?php echo $this->__('Other') ?>"><?php echo $this->__('Other') ?></option>
	</select>
*/ ?>

Finally, we want to put in our text input field, here is an example:

<div class="field">
	<div class="field-label"><label for="getvoice">How did you hear about us?<em>*</em></label></div>
	<div class="field-field"><input type="text" name="getvoice" id="getvoice" /></div>
</div>

Note: there are extra div's in here that were created for formatting purposes. Here is the css that wwas used to style this field. If you decide to use this css, be sure to put it in /skin/frontend/default/yourtheme/css/skin.css

#checkoutSteps #opc-heared4us .field {width:100%;}
#checkoutSteps #opc-heared4us .field .field-label {font-weight:bold; color:#00c4ff;}
#checkoutSteps #opc-heared4us .field .field-label em {color:red;}

Typically, it's good just to keep the variable set to an empty string, you never know if it is being used by something else and an error will occur.

Getting the Values to show in the Admin Area

There are few things we must do in order to enable either of options or the user input value to show in the admin side. We must navigate to app/code/local/Inchoo/Heared4us/sql/mysql4-install-0.1.0.php and open the file with your favorite IDE of text editor.

Replace this line:

$row = Mage::getSingleton('core/resource')->getConnection('core_read')->fetchRow($sql);

with this

$row = Mage::getSingleton('core/resource')->getConnection('core_read')->addColumn(Mage::getSingleton('core/resource')->getTableName('sales/order'), 'giftaid', 'TEXT NULL');

Next, we need to add a new field to a table so we need database access with a tool like phpMyAdmin. If you do not have database then contact your administrator and request the following change.

ALTER TABLE sales_flat_order ADD heared4us TEXT;

If you don't know your database login info you can find it at app/etc/local.xml. If you have SSH access you can do the following:

mysql -u mage_user -p mage_db
USE mage_db;
ALTER TABLE prefix_sales_flat_order ADD heard4us TEXT;

Be sure you add semi-colons otherwise MySQL will complain. It is imperative you know your prefix as well. You can find this information in your local.xml file along with your database credentials.

If you do have database access with phpMyAdmin, select your magento database and click on the SQL field. Copy and paste the SQL above and then press "Go". See the image for details.

img

The end result should be under each new order. You will see a "How did you hear about us?" field and the option/text the user typed in will show as follows:

img

Be Sociable, Share!