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

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


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アプリもいくつかあるようですので、

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

ご参考まで。

(キュー田辺)