`templates/customers/register.liquid`

77 lines
<div class="customer-section">
  <h1 class="page-title">{{ 'customers.register.header' | t }}</h1>

  {% render 'breadcrumbs' %}

  <div class="customer-wrapper">

    {% form 'create_customer', class: 'customer-register' %}

      {% if form.errors %}
        {{ form.errors | default_errors }}
      {% endif %}

      {% if form.posted_successfully? %}
        <script>
          try {
            if (sessionStorage.getItem('dw_trade')) {
              sessionStorage.removeItem('dw_trade');
              window.location.replace('/pages/trade-only-benefits');
            }
          } catch (e) {}
        </script>
      {% endif %}

      <div class="input-wrapper">
        <label class="label" for="customer[first_name]">{{ 'customers.general.first_name' | t }}</label>
        <input type="text" placeholder="" value="{{ form.first_name }}" name="customer[first_name]" class="{% if form.errors contains "first_name" %}error input{% else %}input{% endif %}">
      </div>

      <div class="input-wrapper">
        <label class="label" for="customer[last_name]">{{ 'customers.general.last_name' | t }}</label>
        <input type="text" placeholder="" value="{{ form.last_name }}" name="customer[last_name]" class="{% if form.errors contains "last_name" %}error input{% else %}input{% endif %}">
      </div>

      <div class="input-wrapper">
        <label class="label" for="customer[email]">{{ 'general.general.email' | t }}</label>
        <input type="text" placeholder="{{ 'general.general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]" class="{% if form.errors contains "email" %}error{% endif %} input">
      </div>

      <div class="input-wrapper">
        <label class="label" for="customer[password]">{{ 'general.general.password' | t }}</label>
        <input type="password" class="input" placeholder="" value="" name="customer[password]">
      </div>

      <div class="input-wrapper dw-professional-wrapper" style="display:flex;align-items:flex-start;gap:10px;margin:6px 0 14px;">
        <input type="checkbox" id="dw-professional" name="dw_professional" value="1" style="width:18px;height:18px;margin-top:2px;flex-shrink:0;cursor:pointer;">
        <label for="dw-professional" style="cursor:pointer;font-size:14px;line-height:1.4;">
          I'm a trade professional (designer, architect, or industry pro) &mdash; unlock up to <strong>10 free samples</strong>. Retail customers receive 3.
        </label>
      </div>

      <div class="input-wrapper">
        <input type="submit" class="input" value="{{ 'customers.register.submit' | t }}">
      </div>

      <div class="or-separator">
        <span class="or-text">OR</span>
      </div>

    {% endform %}
  </div>
</div>

<script>
  (function () {
    var form = document.querySelector('form.customer-register');
    var cb = document.getElementById('dw-professional');
    if (!form || !cb) return;
    form.addEventListener('submit', function () {
      try {
        if (cb.checked) { sessionStorage.setItem('dw_trade', '1'); }
        else { sessionStorage.removeItem('dw_trade'); }
      } catch (e) {}
    });
  })();
</script>