Using Cartfunnel’s Form API, you can add Google Places API to auto-populate a customer’s shipping address. This makes it easier for your customers to complete the checkout.

How to get started

Cartfunnel will automatically activate the Google Place API in your checkout pages.

Shipping address form fields include the following components:

  • address1 (the street number and street name)
  • address2 (for unit/apartment number)
  • city
  • province or state
  • country
  • postal or zip code

To enable the autocomplete feature, you will need to add a “data” attribute to the address1 input field, which typically looks like this in our default theme:

Without the data attribute:

<input type="string" name="cart[shipping_address][address1]" placeholder="Address" class="form-control" value="{{ order.shipping_address.address1 }}">

With the data attribute:

<input type="string" name="cart[shipping_address][address1]" placeholder="Address" class="form-control" value="{{ order.shipping_address.address1 }}" data-cf-form-input-google-address-autocomplete>

Cartfunnel will recognize the extra attribute (data-cf-form-input-google-address-autocomplete) on the address1 input tag and will activate the autocomplete feature.

To complete the setup, Cartfunnel also needs to know where to populate the values that the Google Places API returns.

In order to do this, you’ll need to attach several additional data attributes to the following input and select fields:

  • address1
  • city
  • province
  • country
  • zip

Note: Not all addresses returned by the Google Places API have values for all these fields. 

To properly identify where to insert the autocomplete values, we’ll need to add the following data attributes:

  • data-cf-form-input-address1
  • data-cf-form-input-city
  • data-cf-form-input-province
  • data-cf-form-input-country
  • data-cf-form-input-zip

Each of these data attributes correspond to the aforementioned input and select fields.

Sample Code

Here’s an example of the complete code that you might have. Extra HTML markup has been removed for illustration purposes:

Important to Know

This feature asks the user for permission to know his or her location. This helps the Google Place API in geolocating the user’s address during the querying process.