Get new jQuery plugins just once a week

×

lightcheckout

November 1, 2015

Lightcheckout | jQuery plugin for autocomplete address form

Lightchekout is a jQuery plugin that simplify your address form reducing your form fields and increase conversion rate.

Created by Claudio Sperti

Download

Example

lightcheckout plugin

address


lightCheckout 1.1

Lightchekout is a jQuery plugin that simplify your address form reducing your form fields and increase conversion rate. It hide address, city, province and zipcode fields and replace them with Google Places Autocompleter, that autofill the form.

Why should I use lightCheckout?

For complete documentation, tons of examples, and a good time, visit:

http://www.lightcheckout.com

Written by: Claudio Sperti

License

Released under the MIT license - http://opensource.org/licenses/MIT

Let's get on with it!

Installation

Step 1: Link required files

First and most important, the jQuery library needs to be included. Next, download the package from this site and link the lightCheckout CSS file and the lightCheckout Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- lightCheckout Javascript file -->
<script src="/js/lightCheckout.min.js"></script>
<!-- lightCheckout CSS file -->
<link href="/css/lightCheckout.css" rel="stylesheet" />

Step 2: Starting HTML DOM

Initially your page contains a form (or just a fields wrapper)

<form class="addressForm">
   <div class="name">
      <input name="name" id="name" type="text" />
   </div>
   <div class="surname">
      <input name="surname" id="surname" type="text" />
   </div>
   <div class="address">
      <input name="address" id="address" type="text" />
   </div>
   <div class="city">
      <input name="city" id="city" type="text" />
   </div>
   <div class="zipcode">
      <input name="zipcode" id="zipcode" type="text" />
   </div>
   <div class="province">
      <select name="province" id="province" >
          <option value="NY">New York</option>
          <option value="CA">California</option>
         <option value="...">...</option>
      </select>
   </div>
   <div class="submit">
      <input type="submit" value="Continue">
   </div>
</form>

Step 3: Create an options js object and Call LightChekout

Before you have to create a js var that contains basic lightCheckout options:

Then call .lightChekout() on your

<

form> or wrapper. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
    var options = {
        inputWrapper: 'div',
        address: '#address',
        city: '#city',
        province: '#province',
        zip: '#zipcode'
    };
    $('.addressForm').lightCheckout(options);
});

Configuration options

General

inputWrapper Selector of input wrapper

default: 'div'
options: string, any jQuery selector

autocomplete Selector of autocomplete input, if you created it manually

default: null
options: string, any jQuery selector

address Selector of address input

default: '.address'
options: string, any jQuery selector

city Selector of city input

default: '.city'
options: string, any jQuery selector

province Selector of province input

default: '.province'
options: string, any jQuery selector

zip Selector of zip input

default: '.zip'
options: string, any jQuery selector

shortProvince Boolean, choose if province must be set with short name or long name (ex. Long Name: "California", Short name: "CA")

default: true
options: true, false

noNumberError Error to show when users not set street number in address input

default: 'Please, insert also street number.'
options: string, any message you want to show as error

language Language of Google Places libraries

default: 'en'
options: string, one of supported language from this list: https://developers.google.com/maps/faq#languagesupport

Events

setField When an address is set, you can override common fill of inputs

default: function ($input, value) {
                $input.val(value);
            }
options: function ($input, value) { // your code here }
arguments:
  $input: input element that must be changed
  value: new value of the input
lightcheckout

Related posts:

Toggle Switch
Tag-it
Virtual Keyboard
lightcheckout plugin

http://jquer.in/wp-content/uploads/2015/10/lightcheckout.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever