futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 1569
  • 公開日時 : 2017/11/06 14:00
  • 更新日時 : 2019/12/27 20:13
  • 印刷

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

回答

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

 

 

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

 

もくじ

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

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

 

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

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

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

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

サンプルタグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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:お客様情報入力画面に反映させたい場合 ※非会員様のご購入時に表示される画面
 各ページ設定>カート>お客様情報入力の上部もしくは下部に作成したコメントパターンを選択してください。

 

 


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

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

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

サンプルタグ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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>利用中テーマの「レイアウト」 より「レイアウト種類:会員登録」や「レイアウト種類:お客様情報入力」にパーツを配置します。

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

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

 

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

 

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
 弊社では通販サイトの運営は一切行っておりません。

ページ
トップへ