Adding a datepicker to checkout

Adding a datepicker to checkout

A custom sales order field to input additional content with a datepicker.

This tweak is regarded as advance, if you are doing this tweak you should have a good understanding of HTML and neto template structure. These changes are on the checkout so if you have a live site, it would be highly recommended doing this work on a staging theme to ensure if anything breaks it will not effect your customers.

This tweak can apply to both managed checkout and legacy checkout. If you are using managed checkout then you will want to do the following tweak first before continuing with this one.

Set up Custom Sale Order Field

In your Cpanel go to Setup and Tools > Custom Sales Order Fields, then setup the field with ID misc1 to have a field name of 'date picker', or any name you wish to identify this field with.

Add input field to checkout

Open up your onepage.template.html in your custom managed checkout directory;

  • /httpdocs/assets/checkout_themes/[THEME-NAME].

Or if you are using legacy checkout;

  • /httpdocs/assets/themes/[THEME-NAME]/templates/cart.

Depending on where you want the custom sales field to be and how you want it to display, your HTML will be different. The only element you need is an input field with the correct name/id attributes so your customers can add a value.

For consistency with managed checkout, we are going to add in a form-group under the Phone Number form-group, which is around line 204.

  • Add in the following code to your template:
<div class="form-group">
    <label class="control-label col-xs-12 col-sm-4" for="cusref1">
    Custom Date Picker
    </label>
    <div class="col-xs-12 col-sm-8">
        <input class="form-control nDatepicker" type="text" name="cusref1" id="cusref1" maxlength="50" />
    </div>
</div>

We now have a custom sales field in our checkout! This will work as a text input right now and add to the order if given a value when filling out the checkout details.

Add datepicker functionality

To change the custom sales field to a date picker we are going to use a function in jQuery UI; datepicker();

At line 4 of onepage.template.html you should see an [%END SITE_VALUE%]. After that line, place the following code:

[%SITE_VALUE id:'footer_javascript'%]
    <script type="text/javascript">
        $(document).ready(function(){
            if($('.nDatepicker').length > 0){
                $( ".nDatepicker" ).datepicker();
            }
        });
    </script>
[%/ SITE_VALUE%]

This will initialise the datepicker function when the page has loaded and transform the sales order field to a date picker.

And now you're done! When the checkout is successfully filled out and this field is given a value, you will be able to see the value in the order via the Cpanel:

jQuery's datepicker is highly customisable to fit particular needs, which can be found on the jQuery datepicker API:


Was this article useful?

Be notified when this page is updated. Optional.