Javascript Callbacks

To customize the user registration and account updating experience you can provide custom methods that will get called at various points in the process. 

onFieldsLoaded(form)

Called after fields have been successfully loaded and rendered on the page. Takes a "form" parameter.

Example of how to include custom callbacks in the initFields() method in: 
snippets/cf-app.customers.register.liquid

CustomerFieldsApp.initFields("#cf-app-customer-fields", {       
  base_url: "https://apps.bonify.io/",       
  styles_url: "https://cdn.apps.bonify.io/customer_fields/public/live/cf-app-form.css",       
  site_id: "{{ shop.metafields.cf_app.internal_site_id }}",       
  shop_domain: "{{ shop.permanent_domain }}",       
  {% if customer %}         
  customer_id: "{{ customer.id }}",        
  customer_token: "{{ customer.metafields.cf_app.api_token }}",       
  {% endif %}

  // Example 1.       
  onFieldsLoaded: function (form) {         
    // React when a field has loaded.       
  },

  // Example 2.
  onFormSubmit: MyAppJs.onCustomerFieldsFormSubmit,

  // Example 3.
  validateBeforeSubmit: function(form) {
    // Custom validation logic for the form submission.
    // Return false to cancel submission.
  },

  // Example 4.
  redirectAfterRegister: function(form) {
    // Logic to determine where the user should be redirected to.
    // Should return a URL path starting with a slash.
    return '/account?view=edit';
  }
});

beforeFormSubmit(form)

Called when the user submits the form and before any call is made to the server. Takes a "form" parameter.

validateBeforeSubmit(form)

Create your own validation logic here. If validation fails, return false. Form submission will stop. 
Example:

validateBeforeSubmit: function(form){
  if($('input[name="customer[first_name]"]', form).val() !== 'test'){
    CustomerFieldsApp.displayMessage($, $(form), 'First name must contain "test".', 'error');
    return false;
  }
}

onFormSubmit(form)

Called after the user submits the form and the customer has already been successfully created or updated. Takes a "form" parameter.

onNewCustomerSuccess(data)

Called after a new customer has been created successfully. Data contains a "result" and "form".

onNewCustomerSuccess: function(data) {
  // Get the new Customer ID in the callback...
  var customer_id = data.result.customer.id;
}

onNewCustomerFailure(data)

Called after a new customer attempt failed. Data contains a "result" and "form". The result should include responseJSON, such that data.responseJSON.errors is an array of errors.  

onUpdateCustomerSuccess(data)

Called after an existing customer has been updated successfully. Data contains a "result" and "form".

onUpdateCustomerFailure(data)

Called after an existing customer update attempt failed. Data contains a "result" and "form". The result should include responseJSON, such that data.responseJSON.errors is an array of errors.

beforeUserLoginRedirect(data)

Called after a new user has been created and before they are redirected to their account page. Data contains a "result" and "form".

redirectAfterRegister(form)

Return a path to redirect the user after registration. By default users are redirected to "/account".

onDisplayMessage(form, message, message_type)

Called after a message is displayed. message_type will be "success" or "error".

onFieldError(error)

Called when a field has an error. "error" is an object containing "field" (the field name), and "error", the error text.

Block-based Themes

To use the methods outlined above on block-based themes, we recommend creating a custom Javascript file in the assets folder of your theme and calling the callbacks within the following function:

/**
 * Wait for the CustomerFieldsApp object to be ready.
 */
function customerFieldsAppReady() {
  return new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      if (typeof window['CustomerFieldsApp'] !== 'undefined') {
        clearInterval(checkInterval);
        resolve(window['CustomerFieldsApp']);
      }
    }, 100);
  });
}

/**
 * The CustomerFieldsApp object is ready and callbacks can be added to it.
 */
customerFieldsAppReady().then((cf_app) => {
  cf_app.settings.onFieldsLoaded = function (form) {
    console.log('onFieldsLoaded');
  };
});