[{"value":"Newsletter Sign-Up Form","id":"newsletter-sign-up-form","hLevel":2,"level":1},{"value":"Customer Registration Form Checkbox","id":"customer-registration-form-checkbox","hLevel":2,"level":1}]

Email Subscription

Customers can opt in to email marketing through the theme in two ways:

Newsletter Sign-Up Form
Checkbox Input in Customer Registration Form

You can add a basic newsletter sign-up form to your template using Handlebars form tags and the necessary parameters. In the form, include an input with the following attributes: 'customer'

Attribute	Value
`name`	`contact[email]`
`type`	`email`

{{#form 'customer' }}
  <div class="customer-email-box">
    <label for="email">Email address</label>
    <input type="email" name="contact[email]" />
  </div>
  <div class="customer-submit-btn">
    <input type="submit" value="Sign up" />
  </div>
{{/form }}

When customers sign up through this form, a customer is created using the provided email, and the accepts_marketing attribute of the associated customer object is set to true.

Note

For another example of a newsletter sign-up form, check out the Seed implementation.

Customer Registration Form Checkbox

In the customer registration form, you can include a checkbox to allow customers to opt in to email marketing. This requires the following input in the form:

Input	Type	name Value
Accepts Marketing	`checkbox`	`customer[acceptsEmailMarketing]`

{{#form 'create_customer'}}
  <div class="customer-account_box">
    <label for="email">{{ t 'user.username' }}</label>
    <input type="text" name="customer[email]" placeholder="{{ t 'user.username' }}" />
  </div>
  <div class="customer-password_box">
    <label for="password">{{ t 'user.password' }}</label>
    <input type="password" name="customer[password]" placeholder="{{ t 'user.password' }}" />
  </div>
  {{#if form.registerConfig.checkTag}}
    <div class="verifycode">
      <input type="text" name="customer[verifycode]" placeholder="{{ t 'user.code' }}" />
      <button class="verifycode-button">{{ t 'user.send' }}</button>
    </div>
  {{/if}}
  {{#if form.registerConfig.firstNameCheck}}
    <div class="customer-first-name">
      <label for="first-name">{{ t 'user.firstName' }}</label>
      <input type="text" name="customer[firstName]" placeholder="{{ t 'user.firstName' }}" />
    </div>
  {{/if}}
  {{#if form.registerConfig.lastNameCheck}}
    <div class="customer-last-name">
      <label for="last-name">{{ t 'user.lastName' }}</label>
      <input type="text" name="customer[lastName]" placeholder="{{ t 'user.lastName' }}" />
    </div>
  {{/if}}
  {{#if form.registerConfig.birthdayCheck}}
    <div class="customer-birthday">
      <label for="birthday">{{ t 'user.birthday' }}</label>
      <input type="date" name="customer[birthday]" placeholder="{{ t 'user.birthday' }}" />
    </div>
  {{/if}}
  <div class="age">
    <label for="age">{{ t 'user.age' }}</label>
    <input type="text" name="attribute[age]" placeholder="{{ t 'user.age' }}" />
  </div>
  <div class="customer-marketing">
    <input type="checkbox" name="customer[acceptsEmailMarketing]" value="true">
    <label for="accepts-marketing">Sign up for email marketing</label>
  </div>
  <div class="customer-submit-box">
    <input class="submit-button" type="submit" value="{{ t 'user.signUp' }}">
  </div>
{{/form}}
<script>
  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 failure scenario
          }
        })
        .finally(() => {
          if (!this.verifyCodeError) {
            this.verifyCodeButton.removeAttribute('aria-disabled');
          }
        })
    }
    // Registration logic
    onSubmitHandler(e) {
      e.preventDefault();
      this.register.submit()
        .then(response => {
          window.location.href = '/user/center';
        })
        .catch(error => {
          // Handle registration failure scenario
        })
    }
  }
  // Initialize the user login and registration JS SDK
  window.Shopline.loadFeatures(
    [
      {
        name: 'customer-account-api',
        version: '0.2'
      }
    ],
    function(error) {
      if (error) {
        throw error;
      }
      new Register();
    }
  );
</script>