Shopifyの会員登録画面で独自の入力フィールドを設置する方法【誕生日と会員番号】

[YokoOyama]

Shopifyの会員登録画面で誕生日と会員番号の入力フィールドを設置したいのですが、

テンプレートはプレステージを使用し、コード編集画面にてcustomers/register.liquidを開き、
{%- endform -%}
</div>
</div>
</section>

のすぐ上に下記のコードを入力いたしましたが、会員登録の画面にて表示がされません。

原因が不明のため、設置方法に誤りがあるのかを教えていたｄ

<!-- 生年月日の取得 -->
　　　　　<label for="birthday" class="label">お誕生日</label>
　　　　　<input type="date" value="" name="customer[note][誕生日]" id="birthday">
　　　　　　<!--//End 生年月日の取得 -->

<!-- コメントの取得 -->
　　　　<label for="comment" class="label--hidden">顧客番号</label>
　　　　<input type="text" name="customer[note][コメント]" id="comment" placeholder="スタッフへのコメント">
　　　　<!--//End コメントの取得 -->

<button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'customer.register.submit' | t }}</button>

[junichiokamura]

共有いただいたコードをそのままprestageの同じ場所に貼り付けて、プレビューしてみましたが、添付のようにちゃんと表示されています。

なぜでしょうね・・・

共有いただいた最後のボタンのコードは元々あるもので、<% end form%> の直前に２つのコードを挿入する場合、コードはボタンの下になります（配置は関係ないと思いますが。。）

あとは、ボタンコードを２つ貼り付けていたりしていませんでしょうか？

なお、表示されるのはログイン画面ではなくて、create oneのリンク先です。

ブラウザコンソールで何かエラーが出ていないかもチェックしてみてください。

[ようこ]

ご回答ありがとうございました。

設置することができました！！

[ようこ]

度々すみません。

お誕生日と顧客番号の配置を左に揃えるにはどうしたら良いでしょうか？

[junichiokamura]

その上に元々あるdivと、classを同じように追加すると添付のようになります。（buttonの上に移動すれば、登録ボタンの上に表示されます）。

       <div class="Form__Item">
          <!-- 生年月日の取得 -->
　　　　　<input type="date" class="Form__Input" value="" name="customer[note][誕生日]" id="birthday">
           <label for="birthday" class="Form__FloatingLabel">お誕生日</label>
　　　　　　<!--//End 生年月日の取得 -->
        </div>
      
      
        <div class="Form__Item">
           <!-- コメントの取得 -->　　　　
　　　　   <input type="text" class="Form__Input" name="customer[note][コメント]" id="comment" placeholder="スタッフへのコメント">
           <label for="comment" class="Form__FloatingLabel">顧客番号</label>
　　　　    <!--//End コメントの取得 -->
        </div>

        <button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'customer.register.submit' | t }}</button>
      
      
      {%- endform -%}

[ようこ]

タグを書いてくださりありがとうございます！

完成することができました！！！

感謝申し上げます！！

[ようこ]

お誕生日の項目について追加の質問です。

iosだと問題ないのですが、Androidだと下記のようなカレンダー表記になり、登録者が60歳の場合60かける12ヵ月分、戻るボタンを押す必要があるようで、困っています。

 

Androidでも、記入かスクロールでお誕生日を選ぶ方法をご存知でしたら教えてください。

よろしくお願いいたします。

 

[junichiokamura · Accepted solution]

ご質問の件は、Shopifyテーマの使用ではなくて、<input type="date"> についての一般的なHTMLタグの質問になるかと思いますが、以下の記事をみるとこのtypeはブラウザや機種依存があるので推奨されないようです。
https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a

公式チュートリアルにあるように、jQueryなどのライブラリをご利用になられるのが良いと思います。

https://shopify.dev/tutorials/customize-theme-add-date-picker-for-delivery-dates

[YokoOyama]

岡村様

　お世話になります。

ご回答ありがとうございます。

そういうことなのですね！！やってみます！ありがとうございます！