Postcode and Suburb Selector

Add a postcode and suburb field to the registration form, so that more personal information can be collected.

Wireframe

Coding Instructions

Step 1: Open the login template

The login template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/customer/login.template.html.

Step 2: Add the code into the template

Paste the following code inside the registration form <form> tag:

<div class="col-xs-12 col-md-6">
    <div class="form-group">
        <label>Postcode</label>
        <input type="text" name="reg_bill_zip" id="reg_bill_zip" value="[%session id:'ship_zip'%][%/session%]" size="5" class="form-control" placeholder="Post Code">
    </div>
</div>
<div class="col-xs-12 col-md-6">
    <div class="form-group">
        <label class="control-label" for="bill_city">Suburb / City</label>
        <div class="n-wrapper-form-control">
            <span id="shloc_selector"></span>
        </div>
        <input type="text" id="reg_bill_city" name="reg_bill_city" class="form-control"  value="[%session id:'ship_city'%][%/session%]" size="50" maxlength="50"/>
        <input type="hidden" id="shloc_country" value="AU"/>
        <input type="hidden" name="shloc_state" id="shloc_state" value="[%session id:'ship_state'%][%/session%]"/>
    </div>
</div>

Paste the following code at the top of the template:

[%site_value id:'footer_javascript'%]
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $.postcode_selectorInit({
                'id':'shloc_selector',
                'country_id':'shloc_country',
                'city_id':'reg_bill_city',
                'state_id':'shloc_state',
                'zip_id':'reg_bill_zip'
            })
        });
    </script>
[%/site_value%]

Step 3: Repeat for the register template

This will also need to be done for the register template. This can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/customer/register.template.html.