FROM CACHE - jp_header

Re: 会員登録画面で[note]と[tags]の共存はできるのか

解決済

会員登録画面で[note]と[tags]の共存はできるのか

track
Shopify Partner
13 1 4

会員登録画面のカスタマイズをしています。

使用テーマ:Dawn

 

その中で職業を選択できるようにしたいので

<div class="field">
<select
name="customer[note][tags]"
id="RegisterForm-Profession"
>
<option hidden>職業を選択してください</option>
<option value="医者">医者</option>
<option value="医療従事者ではない">医療従事者ではない</option>
</select>
</div>
とコードを書きました。
実際に会員登録して顧客情報をみてみるとメモ欄には何も記載されずタグには記載されていました。
 
この際、メモとタグにどちらにも表示させる方法はありませんか?
試してみましたができませんでした。
 
困っています。詳しい方、教えていただければ幸いです。
 
1 件の受理された解決策

Qcoltd
Shopify Partner
1058 435 427

成功

 @track 様

 

ご質問いただいている、「メモ」と「タグ」にselectタグの内容を入れる件ですが、

selectタグのnameだけでの対応は難しいように感じます。

ですので、selectタグで選択した内容をJavaScriptで別のinput(hidden状態)にデータを渡すことで、管理画面の「メモ」と「タグ」双方に情報を挿入することが可能かと思います。

 

selectタグは記載いただいているコードからname部分のみ修正し、inputタグ以下が追加分となります。

 

下記サンプルコード

 

 

<select
name="customer[note]"
id="RegisterForm-Profession"
>
<option hidden>職業を選択してください</option>
<option value="医者">医者</option>
<option value="医療従事者ではない">医療従事者ではない</option>
</select>
<input type="hidden" name="customer[tags]" id="RegisterForm-Profession-Tags" />
<script>
  const select = document.getElementById("RegisterForm-Profession");
  const input = document.getElementById("RegisterForm-Profession-Tags");
  input.value = select.value;
  select.addEventListener("change", () => {
    input.value = select.value;
  });
</script>

 

 

 

また、JavaScriptを使用しなくてもShopify Flowを使用することでも対応が可能そうでしたので、そちらもご検討いただければと思います。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1058 435 427

成功

 @track 様

 

ご質問いただいている、「メモ」と「タグ」にselectタグの内容を入れる件ですが、

selectタグのnameだけでの対応は難しいように感じます。

ですので、selectタグで選択した内容をJavaScriptで別のinput(hidden状態)にデータを渡すことで、管理画面の「メモ」と「タグ」双方に情報を挿入することが可能かと思います。

 

selectタグは記載いただいているコードからname部分のみ修正し、inputタグ以下が追加分となります。

 

下記サンプルコード

 

 

<select
name="customer[note]"
id="RegisterForm-Profession"
>
<option hidden>職業を選択してください</option>
<option value="医者">医者</option>
<option value="医療従事者ではない">医療従事者ではない</option>
</select>
<input type="hidden" name="customer[tags]" id="RegisterForm-Profession-Tags" />
<script>
  const select = document.getElementById("RegisterForm-Profession");
  const input = document.getElementById("RegisterForm-Profession-Tags");
  input.value = select.value;
  select.addEventListener("change", () => {
    input.value = select.value;
  });
</script>

 

 

 

また、JavaScriptを使用しなくてもShopify Flowを使用することでも対応が可能そうでしたので、そちらもご検討いただければと思います。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
track
Shopify Partner
13 1 4

実装してみたら実現できました!Flowを使えないプランでしたのでとても嬉しいです。感謝いたします。貴重なお時間いただきありがとうございました!