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

解決済
Highlighted
新規メンバー
7 0 0

 

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

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

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

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

 

<!-- 生年月日の取得 -->
     <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>

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
640 138 218

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

Screen Shot 2020-09-23 at 11.37.56 PM.pngScreen Shot 2020-09-23 at 11.38.33 PM.png

なぜでしょうね・・・

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

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

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

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

Technical Partner Manager, Japan
1 件の「いいね!」
Highlighted
観光客
22 0 0

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

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

 

0 件の「いいね!」
Highlighted
観光客
22 0 0

度々すみません。

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

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
640 138 218

その上に元々ある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 -%}

 

Screen Shot 2020-09-29 at 8.56.15 AM.png

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
観光客
22 0 0

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

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

 

感謝申し上げます!!

 

 

0 件の「いいね!」
Highlighted
観光客
22 0 0

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

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

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

 

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

EE43DDAA-42D5-4D45-89E8-8514C83BBADC.jpeg

 

0 件の「いいね!」
Highlighted
Community Manager
Community Manager
640 138 218

成功

ご質問の件は、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

 

Technical Partner Manager, Japan
0 件の「いいね!」
Highlighted
新規メンバー
7 0 0

岡村様

 

 お世話になります。

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

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

 

 

 

0 件の「いいね!」