【Shopifyカスタマイズ】会員登録フォームに「業種」項目を追加して顧客管理を効率化する方法

<!-- ▼▼▼ ここからがタグ保存用のコードブロック ▼▼▼ -->
    <div class="field field--with-error">
      <label class="field__label">個人 ／ 法人・店舗 <span aria-hidden="true" class="required">必須</span></label><br>
      <!-- ↓ ラジオボタンが変更されたらJavaScriptの関数を実行するように変更 -->
      <input name="contact[customer_type_dummy]" type="radio" value="法人・店舗" checked onchange="updateCustomerTags()" />法人・店舗<br />
      <input name="contact[customer_type_dummy]" type="radio" value="個人" onchange="updateCustomerTags()" />個人<br />
    </div>

    <div class="field">
      <label class="field__label" for="RegisterForm-Industry">お客様の業種 <span aria-hidden="true" class="required">必須</span></label>
      <!-- ↓ selectメニューが変更されたらJavaScriptの関数を実行するように変更 -->
      <select name="contact[industry_dummy]" id="RegisterForm-Industry" onchange="updateCustomerTags()">
        <option value="" disabled selected>選択してください</option>
        <option value="製造業">製造業</option>
        <option value="建設業・工事業">建設業・工事業</option>
        <option value="自動車・二輪車・自転車関連業">自動車・二輪車・自転車関連業</option>
        <option value="運輸・通信業">運輸・通信業</option>
        <option value="農・林・水産業">農・林・水産業</option>
        <option value="飲食業">飲食業</option>
        <option value="サービス業">サービス業</option>
        <option value="卸売・小売業">卸売・小売業</option>
        <option value="医療・福祉・介護関連業">医療・福祉・介護関連業</option>
        <option value="教育・研究機関">教育・研究機関</option>
        <option value="電気・ガス・熱供給・水道業">電気・ガス・熱供給・水道業</option>
        <option value="不動産業">不動産業</option>
        <option value="金融・保険業">金融・保険業</option>
        <option value="鉱業">鉱業</option>
        <option value="公務(他に分類されないもの)">公務(他に分類されないもの)</option>
        <option value="分類不能の産業">分類不能の産業</option>
      </select>
    </div>

    <!-- タグ情報をShopifyに渡すための非表示の入力欄 -->
    <input type="hidden" id="customer_tags" name="customer[tags]" value="">

    <script>
      function updateCustomerTags() {
        // 「個人／法人・店舗」で選択されている値を取得
        const customerTypeInput = document.querySelector('input[name="contact[customer_type_dummy]"]:checked');
        const customerTypeTag = customerTypeInput ? customerTypeInput.value : "";

        // 「お客様の業種」で選択されている値を取得
        const industrySelect = document.getElementById('RegisterForm-Industry');
        const industryTag = industrySelect.value ? industrySelect.value : "";

        // 取得した2つの値をカンマで連結して、1つの文字列にする
        const tagsToApply = [customerTypeTag, industryTag].filter(Boolean).join(', ');

        // 非表示フィールド（customer_tags）のvalueに作成した文字列をセットする
        document.getElementById('customer_tags').value = tagsToApply;
      }

      // ページが読み込まれた時に、最初の状態（デフォルト値）をタグに反映させる
      document.addEventListener('DOMContentLoaded', function() {
        updateCustomerTags();
      });
    </script>
    <!-- ▲▲▲ ここまでを追加 ▲▲▲ -->


    <button>
      {{ 'customer.register.submit' | t }}
    </button>

{%- form 'create_customer', novalidate: 'novalidate' -%}

{%- form 'create_customer', novalidate: 'novalidate', onsubmit: 'return validateRegistrationForm();' -%}

// ▼▼▼ 新しく追加した必須チェック用の関数 ▼▼▼
      function validateRegistrationForm() {
        const industrySelect = document.getElementById('RegisterForm-Industry');
        if (industrySelect.value === "") {
          alert('お客様の業種を選択してください。');
          return false; // formの送信を中止
        }
        return true; // formの送信を許可
      }