会員登録や購入手続きの入力フォームに入力例を入れたいです。

入力フォームに初期値をセットするためのJavaScriptをご紹介します。

 

もくじ

コマースクリエイター未利用店舗様

コマースクリエイターご利用店舗様

 

コマースクリエイター未利用店舗様

※※ご注意ください※※ 本記事の内容は、JavaScriptを利用した実現方法となります。 その他JavaScriptとの干渉、ブラウザや弊社システムのバージョンアップ等により、 意図しない動作を起こす可能性がございます。 あらかじめご留意の上、管理者様のご判断でご利用ください。 設定後は問題なく会員登録や購入完了ができるかを必ずご確認ください。

 

Step1：コメントパターンを作成する

構築メニュー＞ページ設定＞コメントパターン一覧　より「パターン新規登録」をクリックします。
スマートフォンサイトに適用する場合は、モバイル＞ページ設定＞コメントパターン一覧　より「パターン新規登録」をクリックします。

コメント名には「入力フォーム補助」などわかりやすい名称を入力し、
□HTMLタグを使用する　にチェックを入れて、コメント内容には下記のタグを設定します。

サンプルタグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($) {
   $(function(){
       var phArray = [
           {tg:'[name="lastName"]',phValue:'＜例＞日本'},
           {tg:'[name="firstName"]',phValue:'＜例＞太郎'},
           {tg:'[name="lastNameKana"]',phValue:'＜例＞ニホン'},
           {tg:'[name="firstNameKana"]',phValue:'＜例＞タロウ'},
           {tg:'[name="email"]',phValue:'メールアドレスを入力'},
           {tg:'[name="emailConfirmation"]',phValue:'確認のためメールアドレスを再入力'},
           {tg:'[name="addressLine1"]',phValue:'市区町村'},
           {tg:'[name="addressLine2"]',phValue:'番地'},
           {tg:'[name="addressLine3"]',phValue:'建物名や部屋番号'},
                       ];
       for (var i=0; i<phArray.length; i++) {
           $(phArray[i].tg).attr('placeholder',phArray[i].phValue);
       }
   });
})(jQuery);
</script>

※住所3を使用していない場合は、 {tg:'[name="addressLine3"]',phValue:'建物名や部屋番号'},を削除してください。

Step2：入力補助したいページにコメントパターンを登録する

構築メニュー＞ページ設定＞各ページ設定　より該当ページに反映させます。
スマートフォンサイトの場合は、モバイル＞ページ設定＞各ページ設定　より該当ページに反映させます。

 

例1:会員登録画面に反映させたい場合

各ページ設定＞カート＞ご購入手続きの上部もしくは下部に作成したコメントパターンを選択してください。

 

例2:お客様情報入力画面に反映させたい場合　※非会員様のご購入時に表示される画面
各ページ設定＞カート＞お客様情報入力の上部もしくは下部に作成したコメントパターンを選択してください。

 

 

---

コマースクリエイターご利用店舗様

※※ご注意ください※※ 本記事の内容は、JavaScriptを利用した実現方法となります。 その他JavaScriptとの干渉、ブラウザや弊社システムのバージョンアップ等により、 意図しない動作を起こす可能性がございます。 あらかじめご留意の上、管理者様のご判断でご利用ください。 設定後は問題なく会員登録や購入完了ができるかを必ずご確認ください。 また、本方法はJavaScriptを利用してモーダルで表示している 「お届け先変更」の入力欄にはご利用いただけません。

 

Step1：フリーパーツを作成する

commerce creator＞パーツ＞パーツを追加する　より「フリーパーツ」をクリックします。
パーツ名は「入力補助表示用JS」など自身が分かりやすいものを入力し、
置換文字も「input_assistance」など任意のものを入力して、表示内容には下記のタグを設定します。

サンプルタグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($) {
   $(function(){
       var phArray = [
           {tg:'[name="items.name.lastName"]',phValue:'＜例＞日本'},
           {tg:'[name="items.name.firstName"]',phValue:'＜例＞太郎'},
           {tg:'[name="items.nameKana.lastName"]',phValue:'＜例＞ニホン'},
           {tg:'[name="items.nameKana.firstName"]',phValue:'＜例＞タロウ'},
           {tg:'[name="items.email"]',phValue:'メールアドレスを入力'},
           {tg:'[name="items.password"]',phValue:'パスワードを入力（パスワードの使いまわしはしないでください）'},
           {tg:'[name="items.zipCode"]',phValue:'郵便番号'},
           {tg:'[name="items.addressLine1"]',phValue:'市区町村'},
           {tg:'[name="items.addressLine2"]',phValue:'番地'},
           {tg:'[name="items.addressLine3"]',phValue:'建物名や部屋番号'},
           {tg:'[name="items.phoneNumber"]',phValue:'電話番号'},
                       ];
       for (var i=0; i<phArray.length; i++) {
           $(phArray[i].tg).attr('placeholder',phArray[i].phValue);
       }
   });
})(jQuery);
</script>

※住所3を使用していない場合は、 {tg:'[name="items.addressLine3"]',phValue:'建物名や部屋番号'},を削除してください。

Step2：利用中テーマにフリーパーツを配置する

commerce creator＞利用中テーマの「レイアウト」　より「レイアウト種類：会員登録」や「レイアウト種類：お客様情報入力」にパーツを配置します。

パーツの配置箇所は、現在配置されているパーツの最下段をお勧めします。

パーツ配置しても表示が変わらない場合、キャッシュの影響で変更されない可能性がございますので、
キャッシュの削除や普段利用していないブラウザでの確認などをお試しください。