Automatically Set Title Case on One Page Checkout

Last modified by Discovery on Thu, June 24, 2010 17:02
Source|Old Revisions  

This is an old revision of the document!


Introduction

In times gone past, i.e. the era of handwriting, people used to spell their name in title-case, i.e. ‘John Smith’. Nowadays people tend not to bother, it is ‘john smith’ (all in smalls) or, with ‘AOL IE6 users’, ‘JOHN SMITH’ (all in caps).

If building a customer database and having to dispatch orders, it is helpful to do it properly, i.e. to use title-case. This applies to names and addresses, but not to postcodes, these need to be in all-capitals.

By default the Magento templates do not have any validation to correct these minor data entry issues. Furthermore, it is not easy to edit fresh orders to tweak the names/addresses to the preferred title-case.

The one-page checkout templates can be amended to ensure that only tidy names/addresses are entered. This needs to be done for the billing as well as the shipping addresses, however, the method outlined here is only for the ‘billing’ address.

(This separate billing address was not required for the site this was developed on, if you allow your customers a different shipping address then the methods used here can be applied. Note, that this wiki article can be updated too, should you get title-case working for supplemental shipping addresses.)

Names

Backup and open DOCROOT/app/design/frontend/default/THEME/template/customer/widget/name.phtml, look for the form input for the first name and add onChange=”Titlecase(this)”:

   <div class="input-box name-firstname">
        <label for="<?php echo $this->getFieldId('firstname')?>">
            <?php echo $this->__('First Name') ?>
            <span class="required">*</span>
        </label>
        <br />
        <input type="text"
            id="<?php echo $this->getFieldId('firstname')?>"
            name="<?php echo $this->getFieldName('firstname')?>"
            value="<?php echo $this->htmlEscape($this->getObject()->getFirstname()) ?>"
            title="<?php echo $this->__('First Name') ?>"
            class="required-entry input-text"
            onChange="Titlecase(this)"
            <?php echo $this->getFieldParams() ?> />
    </div>

For the last name add the same onChange=”Titlecase(this)” line:

   <div class="input-box name-lastname">
        <label for="<?php echo $this->getFieldId('lastname')?>">
            <?php echo $this->__('Last Name') ?>
            <span class="required">*</span>
        </label>
        <br />
        <input type="text"
            id="<?php echo $this->getFieldId('lastname')?>"
            name="<?php echo $this->getFieldName('lastname')?>"
            value="<?php echo $this->htmlEscape($this->getObject()->getLastname()) ?>"
            title="<?php echo $this->__('Last Name') ?>"
            class="required-entry input-text"
            onChange="Titlecase(this)"
            <?php echo $this->getFieldParams() ?> />
    </div>

If you are taking people’s middle names or titles then you can amend the file accordingly.

Now add some Javascript to the end and save the file:

<script type="text/javascript">
//<![CDATA[
function Titlecase(obj) {
        val = obj.value;
        newVal = '';
        val = val.split(' ');
        for(var c=0; c < val.length; c++) {
                newVal += val[c].substring(0,1).toUpperCase() +
val[c].substring(1,val[c].length) + ' ';
        }
        obj.value = newVal;
}
//]]>
</script>

Address Fields

With the address fields only selected entries need to be ‘validated’. The email address can stay as it is, if using company name, this can be set to be kept ‘as is’.

Open [DOCROOT]/app/design/frontend/default/THEME/template/checkout/onepage/billing.phtml and add onChange=”Titlecase(this)” to where you need to be using title-case:

            <li><label for="billing:street1"><?php echo $this->__('Address') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('Street Address') ?>" name="billing[street][]" id="billing:street1" value="<?php echo $this->htmlEscape(
$this->getAddress()->getStreet(1)) ?>" class="required-entry input-text" onChange="Titlecase(this)" /></li>
<?php for ($_i=2, $_n=$this->helper('customer/address')->getStreetLines(); $_i<=$_n; $_i++): ?>
            <li><input type="text" title="<?php echo $this->__('Street Address '.$_i) ?>" name="billing[street][]" id="billing:street<?php echo $_i?>" value="<?php ech
o $this->htmlEscape($this->getAddress()->getStreet($_i)) ?>" class="input-text" onChange="Titlecase(this)" /></li>
<?php endfor ?>
            <li><div class="input-box">
                <label for="billing:city"><?php echo $this->__('City') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('City') ?>" name="billing[city]" value="<?php echo $this->htmlEscape($this->getAddress()->getCity()) ?>" class="required-entry input-text" id="billing:city" onChange="Titlecase(this)" /></div>
                <div class="input-box">
                <label for="billing:region"><?php echo $this->__('State/Province') ?> <span class="required">*</span></label><br/>
                <select id="billing:region_id" name="billing[region_id]" title="<?php echo $this->__('State/Province') ?>" class="validate-select" style="display:none">
                    <option value=""><?php echo $this->__('Please select region, state or province') ?></option>
                </select>
                <script type="text/javascript">
                    $('billing:region_id').setAttribute('defaultValue',  "<?php echo $this->getAddress()->getRegionId() ?>");
                </script>
                <input type="text" id="billing:region" name="billing[region]" value="<?php echo $this->htmlEscape($this->getAddress()->getRegion()) ?>"  title="<?php echo $this->__('State/Province') ?>" class="input-text" style="display:none" onChange="Titlecase(this)" />
                </div></li>

Further down, for the postcode/zip add onChange=”CAPITALIZED(this)”, e.g.:

                <label for="billing:postcode"><?php echo $this->__('Zip/Postal Code') ?> <span class="required">*</span></label><br />
                <input type="text" title="<?php echo $this->__('Zip/Postal Code') ?>" name="billing[postcode]" id="billing:postcode" value="<?php echo $this->htmlEscap
e($this->getAddress()->getPostcode()) ?>" class="validate-zip-international required-entry input-text" onChange="CAPITALIZED(this)" /></div>

Now add a snippet of Javascript to the bottom of the .phtml file and save:

script type="text/javascript">
//<![CDATA[
function Titlecase(obj) {
        val = obj.value;
        newVal = '';
        val = val.split(' ');
        for(var c=0; c < val.length; c++) {
                newVal += val[c].substring(0,1).toUpperCase() +
val[c].substring(1,val[c].length) + ' ';
        }
        obj.value = newVal;
}
function CAPITALIZED(jbo){
  jbo.value=jbo.value.toUpperCase();
}
//]]>
</script>

Put some test orders together to make sure that the all-important checkout page functions correctly. If everything is going to plan then the orders should now come through with neatly presented names/addresses. The confirmation/invoice/delivery/newsletter emails should also be equally neat.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs