Customer data

Customer data can get retrieved and set through methods called to the CF.customer object with data column keys. This will make the necessary requests to our backend API services to set the data. Only keys defined as data columns will be available.

Get data

To get data from the customer, call CF.customer.get("column_key", "column_key", ...). If you pass it a single column key, only the value of that column will be returned. Otherwise, an object containing multiple key/value pairs will be returned.

// Get a single column's data
var firstName = CF.customer.get("first_name");
//    -> "John"

// Get multiple columns' data
var data = CF.customer.get("first_name", "last_name");
//    -> { first_name: "John", last_name: "Smith" }

// Another way to accomplish getting multiple columns' data
data = CF.customer.get(["first_name", "last_name"]);
//    -> { first_name: "John", last_name: "Smith" }

Set data

Provide a data column key and value to apply with customer.set. When you set a value to a customer, any form (non-custom) on that page will automatically fill in any fields that use this data column automatically. Note these changes are “staged” for saving and not immediately pushed to the customer’s record.

// Set a single column's value, number type
CF.customer.set("some_column", 123);

// Date type
CF.customer.set("event_day", "2015-04-13");

// Datetime type
CF.customer.set("last_seen_at", "2019-12-24T05:32:06+11:00");

// Phone type
CF.customer.set("phone", "+112345677890");

// File type
CF.customer.set("file", {
  extension: "png",
  name: "color-light@4x.png",
  size: 58091,
  type: "image/png",
  url: ""

// List type
// Note: this does not accept objects as array elements (see group_list instead)
CF.customer.set("favorite_colors", ["red", "green", "blue"]);

// Group type
CF.customer.set("preferences", {
  "show_avatar": true,
  "homepage_url": "",
  "nickname": "Pete"

// Group list type
CF.customer.set("athletes", [
    "name": "Jim",
    "left_handed": false,
    "position": "forward"
    "name": "Joe",
    "left_handed": true,
    "position": "defender"
    "name": "Jake",
    "left_handed": false,
    "position": "mid"

Pass an object to CF.customer.set to merge new data into the existing data. This will also merge it into CF.customer.unsavedChanges.

// Set multiple columns' values
  some_column: 123,
  another_column: "woohoo!",

Save the customer

Call to submit customer data to our servers. The parameter of options is not required, however if you’d like to perform actions such as auto-login or redirecting, it is necessary. See this example:

// Each property here is optional!
var customerSaveOptions = {
  // If a customer account is created, determine whether or not to auto-login.
  login: true,

  // After the customer is successfully saved and/or automatically logged in, determine whether or not to redirect.
  redirect: true,

    Relative path on the storefront to redirect to after saving the customer.
    For example: `/account`, `/pages/some-page`, `/collections`, ...
  redirectUrl: "/account",

    List of specific data column keys to save. If this is defined, no keys outside
    of this array will be saved. Defaults to all unsaved changes if not provided.
  saveColumns: ["first_name", "last_name"],

    Tells our servers which form was submitted. Allows us to track form submissions and populate
    event details with form data. Obtain the form ID from the url when viewing the form builder:<form ID>
  formId: "a34Kl0"

  .save(customerSaveOptions) // Providing an options object in the first place is optional.
  .then(function(errorObj) {
    if (errorObj) {
        errorObj is an object containing data column key to string array pairs. 
        Here's an example of what it might look like:

          "phone": ["is invalid"],
          "email": ["has already been taken"],
    } else {
      // You're all set! Any unsaved changes that have been made 
      // to the customer's data have now been saved.
  .catch(function(err) {
    // Something wrong happened :(

    console.error("Could not save customer", err);

Error handling

On occasion, people don’t write perfect software (including us.) It’s crucial to handle errors if our servers respond with them. We strongly suggest you look into it.

Save specific keys of data

By default, the save function saves all unsaved changes. You can change this behavior to only submit certain keys. There are two ways to accomplish this, the first is to supply with a list of column keys to save:

CF.customer.set({ first_name: "John", last_name: "Smith" });{ saveColumns: ["first_name", "last_name"] })
  .then(function() {
    // only first_name and last_name were saved

The second is to use the short-hand CF.customer.update function:

    first_name: "John",
    last_name: "Smith"
  .then(function() {
    // Only first_name and last_name were saved!

Next up: Customer tags