[{"value":"JavaScript Functions","id":"javascript-functions","hLevel":3,"level":1}]

Collect Additional Customer Information

When customers create accounts using the customer registration form, you can gather more information from them.

This information can be collected using any HTML input type except file. The input needs the attribute name="attribute[Information title]", where Information title is the title of the information you are collecting. You can have multiple inputs to collect various details.

For example, the following allows you to collect the customer's age:

{{#form 'create_customer'}}
  <form method="post" id="create-customer-form">
    <div class="account">
      <label for="email">{{ t 'user.username' }}</label>
      <input type="text" name="customer[email]" placeholder="{{ t 'user.username' }}" />
    </div>
    <div class="password">
      <label for="password">{{ t 'password' }}</label>
      <input type="password" name="customer[password]" placeholder="{{ t 'password' }}" />
    </div>
    <div class="age">
      <label for="age">{{ t 'age' }}</label>
      <input type="text" name="attribute[age]" placeholder="{{ t 'age' }}" />
    </div>
    <div class="submit">
      <input class="submit-button" type="submit" value="{{ t 'signUp' }}">
    </div>
  </form>
{{/form}}

JavaScript Functions

User registration requires JavaScript functions to handle form submission.

class Register {
  constructor() {
    this.form = document.querySelector('#create-customer-form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.verifyCodeButton = this.form.querySelector('.verifycode-button');
    this.verifyCodeButton.addEventListener(
      'click', this.onSendVerifyCodeHandler.bind(this)
    );
    this.register = new window.Shopline.customerAccount.Register(this.form)
  }
  // Logic to send email or SMS verification code
  onSendVerifyCodeHandler(e) {
    e.preventDefault();
    if (this.verifyCodeButton.getAttribute('aria-disabled') === 'true') return;
    this.verifyCodeButton.setAttribute('aria-disabled', true);
    this.register.sendVerifyCode()
      .then(response => {
        if (response.errorMessage) {
          this.verifyCodeError = true;
          // Handle verification code sending failure
        }
      })
      .finally(() => {
        if (!this.verifyCodeError) {
          this.verifyCodeButton.removeAttribute('aria-disabled');
        }
      })
  }
  // Registration logic
  onSubmitHandler(e) {
    e.preventDefault();
    this.register.submit()
      .then(response => {
        window.location.href = window.routes.account_url;
      })
      .catch(error => {
        // Handle registration failure
      })
  }
}
// Initialize the customer account registration JS SDK
window.Shopline.loadFeatures(
  [
    {
      name: 'customer-account-api',
      version: '0.1'
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    new Register();
  }
);

In this example:

The form submission is handled by the Register class, which manages form interactions and validation.
The onSendVerifyCodeHandler method handles the logic for sending a verification code.
The onSubmitHandler method manages the registration process, ensuring that the form is submitted correctly.
The window.Shopline.loadFeatures function initializes the necessary features for customer account registration.

Was this article helpful to you?

SHOPLINE

Legal

Error loading component.

Collect Additional Customer Information​

JavaScript Functions​

Collect Additional Customer Information

JavaScript Functions