タグリファレンスにLPフォームを追加
テンプレートの登録
まず、インデックステンプレートでコーディングされたHtmlを利用して一つのテンプレートとして登録します。
そのインデックステンプレートからモジュールテンプレートを読み込みます。
画像の通り、モジュールテンプレートに入ります。
この画像で、赤いところはフォームに必要な部分です。
以下のコードを読み込んみます。
・landing_page_module_common
・jsModule
・ajaxModule
・card_token_module
それぞれのデフォルトファイルを読み込んでご利用ください。
|
1 |
{% TemplateInclude "landing_page_module_common" %} |
読み込むタグは以下の通りです。
|
1 2 3 |
{% TemplateInclude "card_token_module" %} {% TemplateInclude "ajaxModule" %} {% TemplateInclude "jsModule" %} |
これを読み込むだけで通常に動きます。
LPページにログインフォームの挿入
まず、landing_page_module_commonにログインフォームを読み込みます。
注意 – 今のサンプルはTWDの利用の場合です。ほかの通過を利用する場合はtwig code “”{{ }}” (または) html tag <h3>,<main>,<section> で変更して利用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<main class="content-main"> <!-- 折扣碼欄位開始 --> {% if is_authorized() %} <p id="lp-btn"><a target="_blank" rel="noopener noreferrer">會員頁面</a></p> {% else %} <p id="lp-btn"><a href="#collapse1" class="btn-toggle">會員請按此</a></p> <p class="guidance" style="font-weight:bold;">※從未登錄過會員者請直接填寫訂單資料</p> <div id="collapse1" style="display:none"> <article> <h2>登入</h2> <div id="lcContent"> <div class="loginBox"> <form name="form1" id="form1" method="post" action="{{ path("application_frontend_auth_login_check") }}"> <h3 class="inBox">以會員身分登入</h3> <p style="color:red"> {% if error is defined %} {% if error == "Bad credentials" %} 帳號或者密碼錯誤！請重新輸入 {% elseif error != "" %} {{ ('consumer.'~error) | trans({}, 'validators') }} {% endif %} {% endif %} </p> <dl> <dt><label for="mail">Email: </label></dt> <dd><input type="text" id="username" name="_username" istyle="3" format="*m" mode="alphabet" value="" class="text" /></dd> <dt><label for="pass">密碼: </label></dt> <dd><input type="password" id="password" name="_password" istyle="3" format="*m" mode="alphabet" class="text" /></dd> </dl> <div class="btnArea"> <button type="submit" class="button cartButton btnLogin fa fa-lock" name="login_btn" id="btn-login">登入</button> </div> </form> <p class="note">如您已是本站會員請用註冊時的Email和密碼登入</p> <p class="note"><a class="markArrow" target="_blank" rel="noopener noreferrer">忘記密碼請點此</a></p> </div> <!-- loginBox end --> <!-- /#lcContent --> </div> </article> </div> {% endif %} </main> |
ログインフォームのデザインなどは自由に調整できます。ログインフォームのためにjsコードを設置する必要があります。
なお、ログインフォームを隠して、ボタンクリックで表示したい場合は以下のコードを設定する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function() { $('.btn-toggle').click(function(){ //get collapse content selector var collapse_content_selector = $(this).attr('href'); //make the collapse content to be shown or hide var toggle_switch = $(this); $(collapse_content_selector).toggle(function(){ if($(this).css('display')=='none'){ //change the button label to be 'Show' toggle_switch.html('會員請按此'); }else{ //change the button label to be 'Hide' toggle_switch.html('隱藏'); } }); }); </script> |
次にLPページには以下のコードを編集します。以下のコードが書かれているところを調べてください。
|
1 2 |
<span class="formParts required">{{ form_widget(form.last_name, { 'attr': {'placeholder': "姓",'class':"checkZen"} }) }}</span> <span class="formParts required">{{ form_widget(form.first_name, { 'attr': {'placeholder': "名",'class':"checkZen"} }) }}</span> |
|
1 |
<section class="payForm"> |
このところにそれぞれの値を設定して変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 |
<section class="payForm"> {% if is_authorized() %} <h3>收貨地址</h3> <table class="spForm01"> <tbody> <tr> <td> {{ form_widget(form.consumer_address, { 'class':"refer"}) }} {{ form_errors(form.consumer_address) }} </td> </tr> <tr> <td> <span class="checkbox-field"> <a class="fa fa-pencil-square-o" target="_blank" rel="noopener noreferrer">如想追加配送地址</a> <p style="font-size: 16px;font-weight: bold;margin-top: 20px;">追加配送地址後，網頁即會重新整理並讓您從中選擇。</p> </span> </td> </tr> </tbody> <script> $(document).ready(function() { for ( var i = 0; i < $("#ec_client_landing_page_type_consumer_address option").size(); i++ ) { $("#ec_client_landing_page_type_consumer_address option").eq( i ).html( $("#ec_client_landing_page_type_consumer_address option").eq( i ).html().replace( "国外", "" ) ); $("#ec_client_landing_page_type_consumer_address option").eq( i ).html( $("#ec_client_landing_page_type_consumer_address option").eq( i ).html().replace( "street", "" ) ); } }); </script> <input id="{{ form.country.vars.id }}" name="{{ form.country.vars.full_name }}" type="hidden" value="11" /> <input id="{{ form.district.vars.id }}" name="{{ form.district.vars.full_name }}" type="hidden" value="{{ form.district.vars.value }}" /> <input id="{{ form.street.vars.id }}" name="{{ form.street.vars.full_name }}" type="hidden" value="{{ form.street.vars.value }}" /> <input id="{{ form.tel.vars.id }}" name="{{ form.tel.vars.full_name }}" type="hidden" value="{{ form.tel.vars.value }}" /> <input id="{{ form.zipcode.vars.id }}" name="{{ form.zipcode.vars.full_name }}" type="hidden" value="{{ form.zipcode.vars.value }}" /> <input id="{{ form.last_name.vars.id }}" name="{{ form.last_name.vars.full_name }}" type="hidden" value="{{ form.last_name.vars.value }}" /> <input id="{{ form.first_name.vars.id }}" name="{{ form.first_name.vars.full_name }}" type="hidden" value="{{ form.first_name.vars.value }}" /> <input id="{{ form.locality.vars.id }}" name="{{ form.locality.vars.full_name }}" type="hidden" value="{{ form.locality.vars.value }}" /> <input id="{{ form.email.vars.id }}" name="{{ form.email.vars.full_name }}" type="hidden" value="{{ form.email.vars.value }}" /> </table> <!--<h3>如要更換住址</h3> <table class="spForm01 checkboxArea"> <tbody> </tbody> </table>--> <table id="addAddress" class="spForm01" style="display:none"> <tbody> <tr > <th>姓名<span class="required">需要</span></th> <td class="required"> <div class="col2"> <span class="formParts formParts--name required"><input type="text" id="ec_client_landing_page_type[option4]" name="ec_client_landing_page_type[option4]" required="required" maxlength="255" class="checkZen" placeholder="Ex)Mali" value="{{ app.request.get('ec_client_landing_page_type[option4]') }}"></span> <span class="formParts formParts--name required"><input type="text" id="ec_client_landing_page_type[option5]" name="ec_client_landing_page_type[option5]" required="required" maxlength="255" class="checkZen" placeholder="Ex)Mali" value=""></span> <span id="firstError" class="error" style="display: none;">請輸入名字</span> <span id="lastError" class="error" style="display: none;">請輸入姓氏</span> </div> </td> </tr> <tr> <th>縣市鄉鎮村<span class="required">需要</span></th> <td class="required"> <span class="formParts required widLong"><input type="text" id="ec_client_landing_page_type[option7]" name="ec_client_landing_page_type[option7]" required="required" maxlength="255" class="add" placeholder="Fill in the address" value="{{ app.request.get('ec_client_landing_page_type[option7]') }}"></span><span id="localityError" class="error" style="display: none;">Please enter the address.</span> </td> </tr> <tr> <th>省市縣鄉鎮村<span class="required">需要</span></th> <td class="required"> <span class="formParts required widLong"><input type="text" id="ec_client_landing_page_type[option7]" name="ec_client_landing_page_type[option7]" required="required" maxlength="255" class="add" placeholder="Fill in the address" value="{{ app.request.get('ec_client_landing_page_type[option7]') }}"></span><span id="localityError" class="error" style="display: none;">請輸入市區村</span> </td> </tr> <tr id="zipcode_tr"> <th>郵遞區號<span class="required">需要</span></th> <td class="required"> <span class="formParts required widHalf"><input type="text" id="ec_client_landing_page_type[option6]" name="ec_client_landing_page_type[option6]" size="4" maxlength="5" placeholder="5 digits" class="yubin" value="{{ app.request.get('ec_client_landing_page_type[option6]') }}"></span><span id="zipError1" class="error" style="display: none;">輸入的郵遞區號不正確</span><span id="zipError2" class="error" style="display: none;">請輸入5位的</span> </td> </tr> <tr class="section"> <th>手機號碼<span class="required">需要</span></th> <td> <span class="formParts widLong"><input type="text" id="ec_client_landing_page_type[option8]" name="ec_client_landing_page_type[option8]" maxlength="10" size="20" placeholder="EX) 01234567890" value="{{ app.request.get('ec_client_landing_page_type[option8]') }}"></span> <span id="tel_error" class="error" style="display: none;" class="error" for="ec_client_landing_page_type[option8]">Please enter the phone number.</span> <span id="tel_error1" class="error" style="display: none;">電話號碼不正確</span> <span id="tel_error2" class="error" style="display: none;">請輸入10位的手機號碼</span> </td> </tr> </tbody> </table> {% else %} <h3>客戶資訊</h3> <table class="spForm01"> <tbody> <tr class="sex"> <th>姓名<span class="required">需要</span></th> <td class="required"> <div class="col2"> <span class="formParts required">{{ form_widget(form.last_name, { 'attr': {'placeholder': "姓",'class':"checkZen"} }) }}</span> <span class="formParts required">{{ form_widget(form.first_name, { 'attr': {'placeholder': "名",'class':"checkZen"} }) }}</span> </div> {{ form_errors(form.last_name) }} {{ form_errors(form.first_name) }} </td> </tr> <!-- <tr class="div"> <th>性別</th> <td> <div class="col2"> <span class="formParts required">{{ form_widget(form.sex, { 'attr': {'placeholder': "姓",'class':"checkZen"} }) }}</span> </div> {{ form_errors(form.sex) }} </td> </tr> <tr class="section"> <th>生日</th> <td> <div class="calender"> <span class="formParts required widLong">{{ form_widget(form.birthday, { 'attr': {'placeholder': "年-月-日"} }) }}</span> </div> {{ form_errors(form.birthday) }} </td> </tr> --> {% if overseas_shipment_use_flg %} <input type="hidden" name="ec_client_landing_page_type[country]" value="11" id="ec_client_landing_page_type_country"> {% else %} <input id="#{{ form.country.vars.id }}" name="#{{ form.country.vars.full_name }}" type="hidden" value="1" /> {% endif %} <input type="hidden" id="ec_client_landing_page_type_district" name="ec_client_landing_page_type[district]" value="lp_district"> <tr> <th>縣市區鄉鎮村<span class="required">需要</span></th> <td class="required"> <span class="formParts required widLong"> <select id="city" name="city"> <option value="">縣市</option> <option value="臺北市">臺北市</option> <option value="基隆市">基隆市</option> <option value="新北市">新北市</option> <option value="宜蘭縣">宜蘭縣</option> <option value="新竹市">新竹市</option> <option value="新竹縣">新竹縣</option> <option value="桃園市">桃園市</option> <option value="苗栗縣">苗栗縣</option> <option value="臺中市">臺中市</option> <option value="彰化縣">彰化縣</option> <option value="南投縣">南投縣</option> <option value="嘉義市">嘉義市</option> <option value="嘉義縣">嘉義縣</option> <option value="雲林縣">雲林縣</option> <option value="臺南市">臺南市</option> <option value="高雄市">高雄市</option> <option value="澎湖縣">澎湖縣</option> <option value="屏東縣">屏東縣</option> <option value="臺東縣">臺東縣</option> <option value="花蓮縣">花蓮縣</option> <option value="金門縣">金門縣</option> <option value="連江縣">連江縣</option> </select> <select id="street" name="street"> <option value="">區域</option> </select> <input type="hidden" id="ec_client_landing_page_type_locality" name="ec_client_landing_page_type[locality]" required="required" value="{{ form.locality.vars.value }}"> </span> {{ form_errors(form.locality) }} </td> </tr> <tr id="zipcode_tr"> <th>郵遞區號<span class="required">需要</span></th> <td class="required"> <span class="formParts required widLong"> {{ form_widget(form.zipcode, { 'attr': {'placeholder': "104",'class':"yubin"} }) }}<br> </span> {{ form_errors(form.zipcode) }} </td> </tr> <tr class="section"> <th>地址<span class="required">需要</span></th> <td class="required"> <span class="formParts required widLong">{{ form_widget(form.street, { 'attr': {'placeholder': "地址"} }) }}</span> {{ form_errors(form.street) }} </td> </tr> <tr class="section"> <th>手機號碼<span class="required">需要</span></th> <td> <span class="formParts required widLong"> {{ form_widget(form.tel, { 'attr': {'placeholder': "數字10碼，不需要【–】橫槓記號。"} }) }} </span> {{ form_errors(form.tel) }} </td> </tr> <tr class="section"> <th>Email<span class="required">需要</span></th> <td class="required"> {% if is_authorized() %} {{ form.email.vars.value }} {% endif %} <span class="formParts required widLong">{{ form_widget(form.email, { 'attr': {'placeholder': "xxxx@xxxx",'class':"checkMail",'onpaste':"return false;" , 'onCopy':"return false"} }) }}</span><br> <!-- メールアドレス二重チェック --> {{ form_errors(form.email) }} <input type="hidden" id="ec_client_landing_page_type_password" name="ec_client_landing_page_type[password]" autocomplete="off" placeholder="" value="{{ form.vars.value.password }}"> </td> </tr> </tbody> </table> {% endif %} </section> |
ここまでがログインフォームの設定になります。
次にフォームの入力データー検証について設定します。
validationInitのところが検証するjsコードになります。
必要に応じて編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{% if is_authorized() %} var validationInit = { "ec_client_landing_page_type_consumer_address": {"required": false}, "{{form.payment.vars.id}}": {"required": true}, "{{form.delivery_abroad.vars.id}}": {"required": true} } {% else %} var validationInit = { "{{form.last_name.vars.id}}": {"required": true,}, "{{form.first_name.vars.id}}": {"required": true,}, //"{{form.locality.vars.id}}": {"required": true}, "city": {"required": true}, "street": {"required": true}, "{{form.zipcode.vars.id}}": {"required": true,"number": true}, "{{form.street.vars.id}}": {"required": true}, "{{form.tel.vars.id}}": {"required": true,"number": true,"eq":10}, "{{form.email.vars.id}}": {"required": true,"email": true}, "{{form.payment.vars.id}}": {"required": true}, "{{form.delivery_abroad.vars.id}}": {"required": true} } {% endif %} |
ここまでがLPフォームにログインフォームの設定になります。