Versions Compared

Version Old Version 6 New Version 7
Changes made by

Thibault Galharret

Thibault Galharret

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can take personnalisation a step further by adding custom fields to the customer form

...

. To do this, add the required fields to the configuration customer.custom_fields.{sales_channel}[{custom_fields_structure}] in the Configuration > Store App > Pages > Catalog > Specific settings page in the Options section.

If the fields added are to be applied to all the project's sales channels, then the field "_ALL_" must be given in the {sales_channel} part.

Here is a configuration applied to all the sales channels with ... being the structure of the custom fields that we will see below.

Code Block
languagejson
{
    "customer": {
        "custom_fields": {
            "_ALL_": [
                {
                  ...
                }
            ]
        }
    }
}

Custom fields structure

Inside the {sales_channel} entity ( or "_ALL_") there is an array of objects. Each object corresponds to a custom field to be added to the form. Here is the configuration to be entered for each custom field.

Field

Type

Mandatory

Description

name

string

Yes

This key is used to give the identifier of the field.

This id must match with parameters used in POST /customers request or PATCH /customers/<id>

Expand
titleAllowed values

  • Contact fields: title, first_name, last_name, phone_number, email, company_name, mobile_number

  • Address fields: address_1, address_2, address_3, city, zip_code, country

  • Custom fields: information.{custom_field}, external_id

target

string

No

Indicates whether the field should be saved in the customer structure or the address structure. By default, customer is applied.

Only used for information.{custom_field} and external_id names, the others are automatically redirected to the right structure.

Expand
titleAllowed values

  • customer

  • address

type

string

No

Type of the field. By default, the text type is used.

Expand
titleAllowed values

  • text - returns a string

  • email - returns a string

  • tel- returns a string

  • password - returns a string

  • flip-switch - returns a boolean

  • list - returns a string or an array of string depending on the ‘multiple’ value

Note

If the field type is a list, then other fields will need to be configured. See below.

required

boolean

No

Indicates whether the field is mandatory or not. By default, custom fields are optional.

position_after

string

No

This key defines the name of the form element to which it must be placed after. Please note, the form element must be in the default form or declared before in the same form.

It it also possible to place the element on the top of the form with the value :first. If multiple elements are placed in first position, they will be placed in the order in which they are configured.

If not defined, the element form will be placed at the bottom of the form.

Expand
titleExamples

  • If I want my field to appear after the country field of the default form : "position_after": "country"

  • If I want my field to appear at the top of the form : "position_after": ":first"

  • If I want my field to appear at the bottom of the form, I leave it blank.

validation

object

No

Enables to add custom validation to the field, which will be checked when the create button is clicked.

Expand
titleAllowed values

These 3 types of validation can be configured alone or together.

  • min_characters (int) - minimum number of characters required

  • max_characters (int) - maximum number of characters required

  • regex (string) - Custom regular expression used to verify the field. More information Here.

  • error_translation_key (string) - Overrides the default translation key of the error message with a custom one if the regex is invalid.

Info

The error_translation_key specified here must then be translated with the pattern form.validation.{error_translation_key} from the Configuration > Store App > Translations page.

Note

Regexes with ‘\’ must escape by doubling it "\\"

Expand
titleExamples

  • Require a 5-digit postcode

Code Block
languagejson
"validation": {
  "min_characters": 5,
  "max_characters": 5
}

  • Use a custom validation for UK postcode and add a custom message if the field is invalid

Code Block
languagejson
"validation": {
  "regex": "^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zAZ][0-9][0-9]|[a-zAZ][0-9]|[0-9][a-zAZ]){1}([ ])*([0-9][a-zA-z][a-zA-z]){1}$",
  "error_translation_key": "UK_postcode_error_message"
}
Note

Regexes with ‘\’ must escape by doubling it "\\"

...

And then translate the key form.validation.UK_postcode_error_message in the Configuration > Store App > Translations page.

Image Added

In case of lists

If the type of field added is a list, then additional configurations must be added inside the structure.

Field

Type

Mandatory

Description

options

array[string]

NoYes

List of values displayed in the drop down.

Options inside will be translated with the key crm.information._{name}_options.{option}

Expand
titleExample

List of options for the title custom field

Code Block
"options": [
    "MR",
    "MRS"
],

multiple

bool

No

Indicates if multiple selection can be done.

searchable

bool

No

Indicates if drop down elements are searchable.

initial_value

string

No

Indicates the pre-selected option.

...