ここでは、「デザインテンプレートを変更してみよう 課題編」の具体的な変更手順について解説させていただきます。
4-1．【課題】申込確認画面≫カート編集/削除
STEP1：デザインテンプレートをダウンロードする
テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。
ダウンロードされたZIPファイルは解凍しておきます。
|
図1:デザインテンプレートのダウンロード |
STEP2：修正したい画面のHTMLファイルパスを確認する
今回はカートのすぐ上に表示された3つのパスが対象です。
seminar_base/application/application_flow_master_id/confirm/cart.html
seminar_base/application/application_flow_master_id/confirm/cart_record.html
seminar_base/application/application_flow_master_id/confirm/cart_sum.html
※キャプチャでは 管理画面(テンプレート一覧)≫管理画面(キャンペーン詳細)≫キャンペーン詳細画面≫フォーム入力画面≫フォーム確認画面≫カート関連パス選択...と操作しています。
|
図2:修正したい画面のHTMLファイルパスを確認 |
STEP3：HTMLファイルを修正する
「STEP1」で展開しておいたフォルダ/ファイルをテキストエディタで開きます。事前に編集するファイルをコピーしておきます。(例)cart.html→cart_bkup.html
①まずはカートのテーブルの一行目三列目「参加費」のヘッダーを削除します
seminar_base/application/application_flow_master_id/confirm/cart.html
|
図3:カートのテーブルの<th>参加費</th>を削除 |
②カートのテーブルの二行目三列目「***円」のセルを削除します。
seminar_base/application/application_flow_master_id/confirm/cart_record.html
|
図4:カートのテーブルの<td>$FORM{unit_price}円</td>を削除 |
③カートのテーブルの三行目をすべて削除します。
seminar_base/application/application_flow_master_id/confirm/cart_sum.html
|
図5:カートのテーブルの三行目を削除 |
MEMO≫ テンプレート編集のシミュレーション
SMPの機能ではありませんが、ブラウザの開発者コンソール(F12ボタン)を使えば、HTMLのどの箇所を編集するとページがどう変わるかのシミュレーションができます。
|
図6:テンプレート編集のシミュレーション |
STEP4：デザインテンプレートを圧縮し、アップロードする
|
図7:デザインテンプレートの圧縮(zip)、アップロード |
STEP5：修正した画面を確認する
|
図8:来場側詳細WEBページから編集した画面を確認 |
もし反映されない場合、ブラウザのキャッシュクリア、システム設定のキャッシュクリアをお試しください。
4-2．【課題】キャンペーン詳細画面≫キャンペーン追加項目の表示
事前準備1：キャンペーン項目「後援」の追加
(全キャンペーン)[キャンペーン]≫[項目追加]メニュー≫[新規登録]ボタン
キャンペーン項目「後援」を追加し、キャンペーンの詳細設定で該当の項目に値を登録します。
|
図9:キャンペーン項目の追加と該当項目の値を入力 |
事前準備2：追加した項目に対応する変数の確認
[キャンペーン]≫[キャンペーンテンプレート変更]メニュー≫[テンプレート変数簡易一覧]ボタン
|
図10:テンプレートの変数一覧から項目変数の確認 |
STEP1：デザインテンプレートをダウンロードする
テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。
ダウンロードされたZIPファイルは解凍しておきます。
|
図11:デザインテンプレートのダウンロード |
STEP2：修正したい画面のHTMLファイルパスを確認する
以下のHTMLがキャンペーンの詳細情報を直接出力していることを確認します。
seminar/preview.html
|
図12:修正したい画面のHTMLファイルパスを確認 |
STEP3：HTMLファイルを修正する
「事前準備2：追加した項目に対応する変数の確認」で分かった変数をテンプレートに埋め込みます。
|
図13:テーブルの<tr></tr>を追加、項目名と変数を編集 |
STEP4：デザインテンプレートを圧縮し、アップロードする
|
図14:デザインテンプレートの圧縮(zip)、アップロード |
STEP5：修正した画面を確認する
|
図15:来場側詳細WEBページから編集した画面を確認 |
4-3．【課題】キャンペーン詳細画面≫申込ボタンの変更
STEP1：デザインテンプレートをダウンロードする
テンプレート一覧画面で最新登録日時の[ダウンロード]リンクをクリックします。テンプレートが登録されていない場合は、[デフォルトダウンロード(seminar.zip)]ボタンをクリックします。
ダウンロードされたZIPファイルは解凍しておきます。
|
図16:デザインテンプレートのダウンロード |
STEP2：修正したい画面のHTMLファイルパスを確認する
以下のパスでボタンを出力していることを確認します。
application/application_flow_master_id/application_button_at_seminar_view/application_link.html
また、このボタンはCSSではなく画像(gif)で作られていることから、画像を差し替えることで変更できることが分かります。
https://(ドメイン名)/static/upload/(ドメイン名)/seminar/(キャンペーンID)/shared/themes/skyblue/img/btn_form_o.gif
|
図17:画像置き場の確認方法 |
STEP3：HTMLファイルを修正する
①HTMLファイルを確認する
HTMLファイルを見ると以下のようなコードで画像が出力されていることが分かります。
<input type="image" src="__base_seminar_path__/shared/themes/$FORM{theme}/img/btn_form_o.gif"
alt="申込" onclick="location='/public/application/add/$FORM{id}'" >
この"btn_form_o.gif"を別ファイルの画像名に変更すれば画像が差し替わります。
|
図18:HTMLファイルから画像を確認 |
この画像のパスの「$FORM{theme}」部分ですが、STEP2で画像のURLを確認したとおり「skyblue」が入るので、「skyblue」≫「img」フォルダからこの「申込」ボタンに代わる「回答」ボタンの画像を探しましょう。
https://(ドメイン名)/static/upload/(ドメイン名)/seminar/(キャンペーンID)/shared/themes/skyblue/img/btn_form_o.gif
「回答」ボタンを見つけたら、HTMLのパスをその画像名に書き替えます。
|
図19:HTMLのパスを画像名に変更 |
STEP4：デザインテンプレートを圧縮し、アップロードする
|
図20:デザインテンプレートの圧縮(zip)、アップロード |
STEP5：修正した画面を確認する
|
図21:来場側詳細WEBページから編集した画面を確認 |