21 February, 2024
Add custom field in magento

How to Add Custom Field in Apptha’s One Step Checkout?

Are you a Magento ecommerce entrepreneur? Then often times you might wish to customize checkout page features based on your business needs. Customization isn’t only limited to designing but even adding a new feature or enhancing existing feature also falls under this. Well, today, I’ll be guiding you to add custom fields in Magento one step checkout page for better optimizing your website to achieve improved customer conversions.

Find below the simple and easy steps to “Add a New Field ‘Mobile’” on your one step checkout page with relevant coding.

Also Read: 120% Increase in Ecommerce Conversions Using One Step Checkout

Step 1: Adding a new field in checkout page’s Billing Address

First you need to add a label and text box to get the ‘Mobile’ Numbers of the customers. To do this Go to app\design\frontend\default\default\template\onestepcheckout\onestep\billing.phtml. Add the following lines of code to display the Field in Billing address.

<?php if (!$this->settings['display_mobile']): ?><li class="fields">

<div class="field">

<label for="billing:mobile" class="required"><em>*</em><?php echo $this->__('Mobile') ?></label>

<div class="input-box">

<input type="text" name="billing[mobile]" value="<?php echo $this->htmlEscape($this->getAddress()->getMobile()) ?>" title="<?php echo $this->__('Mobile') ?>" class="input-text required-entry" id="billing:mobile" />

</div>

</div>

</li>

<?php endif; ?>

Step 2: Adding a new field in checkout page’s Shipping Form

 Now in the Billing form ‘Mobile’ field will be displayed. But in case the Shipping Address is different from the billing address your new field ‘Mobile’ won’t get displayed. For that reason we need to add a label and text field in the Shipping form too.

To do this Go to app\design\frontend\default\default\template\onestepcheckout\onestep\shipping.phtml. Add the following lines of code to display the Field in Shipping address.

<?php if (!$this->settings['display_mobile']): ?><li class="fields" >

<div class="field">

<label for="shipping:mobile" class="required"><em>*</em><?php echo $this->__('Mobile') ?></label>

<div>

<input type="text" name="shipping[mobile]" value="<?php echo $this->htmlEscape($this->getAddress()->getMobile()) ?>" title="<?php echo $this->__('Mobile') ?>" class="input-text required-entry" id="shipping:mobile" onchange="shipping.setSameAsBilling(false);" />

</div>

</div>

</li>

<?php endif; ?>

Step 3: Upgrading existing one step checkout installation in Magento

Now your new field ‘Mobile’ gets displayed in the front-end. Next you have to configure it to store the value in database and to show the details in admin panel. For this you need to upgrade your ‘config.xml’ file so that you can add your new attribute and new field into the database.

To upgrade our installation Go to app\code\local\Apptha\Onestepcheckout\etc\config.xml and find the following line of code.

<modules><Apptha_Onestepcheckout>

<version>0.1.7</version>

</Apptha_Onestepcheckout>

</modules>

and change the code as

<modules>

<Apptha_Onestepcheckout>

<version>0.1.8</version>

</Apptha_Onestepcheckout>

</modules>

and to show our new custom field in  invoice, manage customers, checkout page add the following lines of code inside <global> </global>

<fieldsets>

<sales_copy_order_shipping_address>

<mobile><to_order>*</to_order></mobile>

</sales_copy_order_shipping_address>

 <sales_convert_quote_address>

 <mobile>

 <to_order_address>*</to_order_address>

<to_customer_address>*</to_customer_address>

</mobile>

</sales_convert_quote_address>

<sales_convert_order_address>

<mobile><to_quote_address>*</to_quote_address></mobile>

</sales_convert_order_address>

<customer_address>

<mobile><to_quote_address>*</to_quote_address></mobile>

</customer_address>

<checkout_onepage_billing>

<mobile><to_customer>*</to_customer></mobile>

</checkout_onepage_billing>

</fieldsets>

Step 4: Adding new attribute and fields in Magento Database

Now your installation is upgraded from version 0.1.7 to version 0.1.8. Next you’ve to add upgraded SQL file to add new attribute and field in database. For that, add a new php file in the following path  app\code\local\Apptha\Onestepcheckout\sql\onestepcheckout_setup\ mysql4-upgrade-0.1.1-0.1.8.php and add the following coding.

mysql4-upgrade-0.1.1-0.1.8.php:

<?php$installer = $this;

$installer->startSetup();

$addressHelper = Mage::helper('customer/address');

$store         = Mage::app()->getStore(Mage_Core_Model_App::ADMIN_STORE_ID);

$eavConfig = Mage::getSingleton('eav/config');

// Add custom attribute 'Mobile'

$attributes = array(

'mobile'           => array(

'label'    => 'Mobile',

'frontend_input'    => 'text',

'backend_type'                => 'int',

'is_user_defined'   => 1,

'is_system'         => 0,

'is_visible'        => 1,

'sort_order'        => 130,

'is_required'       => 1,

'multiline_count'   => 0,

'frontend_label'    => 'Mobile',

'validate_rules'    => array(

'max_text_length'   => 12,

'min_text_length'   => 10

),

),

);

foreach ($attributes as $attributeCode => $data) {

$attribute = $eavConfig->getAttribute('customer_address', $attributeCode);

$attribute->setWebsite($store->getWebsite());

$attribute->addData($data);

$usedInForms = array(

'adminhtml_customer_address',

'customer_address_edit',

'customer_register_address'

);

$attribute->setData('used_in_forms', $usedInForms);

$attribute->save();

}

//Add a new field 'mobile' in 'sales_flat_quote_address' and 'sales_flat_order_address' tables

$installer->run("

ALTER TABLE {$this->getTable('sales_flat_quote_address')} ADD COLUMN `mobile` INT(12) CHARACTER SET utf8 DEFAULT NULL AFTER `telephone`;

ALTER TABLE {$this->getTable('sales_flat_order_address')} ADD COLUMN `mobile` INT(12) CHARACTER SET utf8 DEFAULT NULL AFTER `telephone`;

");

$installer->endSetup();

?>

Step 5: Adding new field details in Invoice, Checkout Page, etc.

Finally log in to your admin panel and go to System/Configuration/Customers/Customer Configuration/Address Template.

In Text Field add this line of code at the end.{{depend mobile}} <br/>Mobile: {{var mobile}}{{/depend}}

In HTML Field add this line of code at the end.

{{depend mobile}}<br/>Mobile:{{var mobile}}{{/depend}}

In PDF Field add this line of code at the end.

{{depend mobile}}<br/>Mobile:{{var mobile}}|{{/depend}}

Now your new field will be displayed in Customer Address, Invoice, Checkout page, etc.

If you wish to learn about Magento One Step Checkout, its features and how it can be useful to your business, please click here: http://www.apptha.com/category/extension/Magento/OneStepCheckout

I hope now you’d have developed a clear idea on how to add a custom field in one step checkout page, database, shipping form, etc. If you’ve any queries over this, please feed your comments in the below section for solutions.

Alex Sam is a digital marketer by choice & profession. He munches on topics relating to technology, eCommerce, enterprise mobility, Cloud Solutions and Internet of Things. His other interests lies in SEO, Online Reputation Management and Google Analytics. Follow Me Socially: Habr , Dev.to & Viblo .

One Comment

  1. Xubin Saxen Reply

    Every eCommerce store needs an easy way to fill up the customer’s information while proceeding to payment gateway. With Apptha’s one step check out, it’s easy to fill up and customized easy to add extra fields, this post explain well. Just implemented two fields to add my native language customers. Informative one.

Leave a Reply

Your email address will not be published. Required fields are marked *