会員登録時に、複数の情報をタグ付けする方法について

[GOENINC]

いつもお世話になっております。

【相談内容】
会員登録ページに追加した複数のフォームの情報を
顧客情報のタグに反映させたい。

shopifyの会員登録時に、
誕生日や性別などの情報をフォームに追加して、
メモ欄に追加できるようにしました。

この情報を、メモではなくタグに直接追加したいのですが、
複数の情報をタグ付けする方法がわからずにいます。

▼
例えば、会員情報時の誕生日入力コードの中で
「月」のみname="customer[tags]"を付与した場合は
月に入力してもらったデータがタグ付けされ、

年と日に入力した情報はメモに反映されます。

※ valueはjavascriptで出力していますのでコードだけだとoptionの値は0です。

<div class="customer-birthday">
<p>生年月日</p>
<ul class="grid grid--3-col">
<li class="grid__item"><select id="year" name="customer[note][年]"><option value="0">年</option></select></li>
<li class="grid__item"><select id="month" name="customer[tags]"><option value="0">月</option></select></li>
<li class="grid__item"><select id="day" name="customer[note][日]"><option value="0">日</option></select></li>
</ul>
</div>

▼
name="customer[tags]"を年と日にも付与する
（customer[tags]が複数存在する）
場合はタグ付けがされません。

<div class="customer-birthday">
<p>生年月日</p>
<ul class="grid grid--3-col">
<li class="grid__item"><select id="year" name="customer[tags]"><option value="0">年</option></select></li>
<li class="grid__item"><select id="month" name="customer[tags]"><option value="0">月</option></select></li>
<li class="grid__item"><select id="day" name="customer[tags]"><option value="0">日</option></select></li>
</ul>
</div>

会員登録情報の「複数」のフォーム情報を顧客情報のタグに入れるには

どのようにすればよいか教示いただけないでしょうか。

どうぞよろしくおねがいします。

[Qcoltd · Accepted solution]

customer[tags] を使用して、複数のタグを追加する場合、次のような書き方になるようです。

<input type="hidden" id="customer_tags" name="customer[tags]" value="VIP,てすてす,hogehoge"/>

valueに、カンマ区切りで値を設定します。

上の例ですと、

1. VIP

2. てすてす

3. hogehoge

の3つの顧客タグが会員登録時に付与されます。

上記踏まえ、質問者様のご質問に回答しますと、

customer[tags]で複数タグを設定するには、

JavaScriptで、

タグとして設定したいインプットフィールドの変化に応じて、

input type="hidden" 要素のvalueを調整する、

と良いかと思います。

生年月日以外をどのようにマークアップされているか分からないので、

生年月日の部分だけ記載しますと、下記のようになりそうです。

(十分な検証はしておりませんので、ご参考まで。)

document.addEventListener('DOMContentLoaded', function() {
  // タグ管理用のオブジェクト
　　　　const tags = {
    birthday: '',
    gender: ''
  };

　　　　// input hiddenの要素のIDをcustomer_tagsとした場合
  const inputCustomerTags = document.querySelector('#customer_tags');

  // 誕生日のselect要素を取得
　　　　const selectsBirthday = document.querySelectorAll('.customer-birthday select');

  // 誕生日のselect要素の内容が変化した際に、tag用のinput hidden要素に、変更を加える
  selectsBirthday.forEach(select => {
    select.addEventListener('change', function() {
      let birthday = new Array();
      selectsBirthday.forEach(select => {
        birthday.push(select.value);
      });
      tags.birthday = birthday.join('-');
      inputCustomerTags.value = Object.entries(tags).map(([key, value]) => (`${key}:${value}`));
    });
  })
});

こちらを参考に、性別などについてもscriptを追加いただくと良いかと思います。

なお、

上記のスクリプトでは、

input type="hidden"の要素のvalueには、

birthday:1990-01-05,gender:male

のような値が設定されますので、

うまく動作すれば、

birthday:1990-01-05

gender: male

の2つのタグが顧客情報に追加されるはずです。

上記のような処理を構築するのが難しい場合、

タグ付けに特化したShopifyアプリもいくつかあるようですので、

そちらの使用を検討されても良いかもしれません。

ご参考まで。

(キュー田辺)

[GOENINC]

株式会社Q (キュー)

田辺さま

お返事遅くなって申し訳ありません。

丁寧でしかもコード例を交えたご回答、本当にありがとうございます。

なるほど、valueの中に複数のタグをカンマ区切りで入力するのだったのですね。

田辺様にご提案してもらったコードを元にタグに挿入したい情報について設定できるか試してみたいと思います！

今後ともよろしくおねがいします。