ここでは、デザインテンプレートを変更方法を身につけるための課題を紹介させていただきます。
3-1. 【課題】申込確認画面≫カート編集/削除
無料のセミナーを開催するときに参加費を表示したくない、またはそもそも申込内容は表示させず、申込者情報だけ表示させれば良い、という場合を想定します。下記のafterのように、申込内容(「カート」と呼ぶ)から「参加費」を削除、また、「お申込内容」を削除してみましょう。
▽before
図1:お申込内容 |
▽after1: 「お申込内容」≫「参加費」欄を削除
図2:お申込内容の編集 |
▽after2: 「お申込内容」を削除
図3:お申込内容の削除 |
3-2. 【課題】キャンペーン詳細画面≫キャンペーン追加項目の表示
キャンペーン詳細画面に表示させる項目として、新たに「後援」という情報を追加する場合を想定します。なお、手順としてはキャンペーン項目として「後援」を新たに追加し、その項目に対応する変数をHTMLに記載する必要がありますが、これら項目追加および変数確認の方法は本項で後述します。
▽before:「後援」という項目がない状態
図4:キャンペーン詳細 |
▽after: 「後援」という項目がある状態
図5:キャンペーン詳細に後援を追加 |
MEMO≫ キャンペーン項目「後援」の追加方法
[キャンペーン]≫[項目追加]メニュー≫[新規登録]ボタン
から追加してください(新規登録画面で設定する「表示/非表示」は「表示」を選択)。
図6:キャンペーンの項目追加 |
MEMO≫ 追加した項目に対応する変数の確認方法
テンプレートの登録画面から[システムテンプレート変数簡易一覧]ボタンをクリックし、設定項目と変数の対応表をダウンロードしてください(以下はシステムテンプレートの図だが、キャンペーンテンプレートの場合も同様)。
図7:[システムテンプレート変数簡易一覧]ボタン |
3-3. 【課題】キャンペーン詳細画面≫申込ボタンの変更
アンケートフォームを作るため、キャンペーン詳細画面からフォームに遷移させるためのボタンを、「申込」ボタンから「回答」ボタンに変更します。
▽before
図8:[申込]ボタン |
▽after
図9:[申込]ボタンから[回答]ボタンへ変更 |
MEMO≫ 変数のファイルパスへの利用(「回答」ボタン画像のありか)
「申込」ボタン/「回答」ボタンとして、画像が標準で用意されています。これらの画像のファイルパスについて補足します。
申込ボタンのファイルパスを見ると、下記のようになっています。
seminar_base/application/application_flow_master_id/application_button_at_seminar_view/
application_link.html
さらに、application_link.htmlの中身を見ると、ボタンのファイルパスが下記のように記載されており、btn_form_o.gifを読み込んでいることが分かります。
<input type="image" src="__base_seminar_path__/shared/themes/$FORM{theme}/img/btn_form_o.gif"
alt="申込" onclick="location='/public/application/add/$FORM{id}'" >
この「$FORM{theme}」が分かれば、テンプレートのフォルダ階層が分かり、画像の置き場所を探すことができます。
下記GIFのように画像のアドレスを見ると、この$FORM{theme}の箇所には"skyblue"が格納されていることが分かります。
図10:画像置き場の確認方法 |
以下の階層で探せば画像ファイルが見つかります
shared¥themes¥skyblue¥img¥btn_form_o.gif
※$FORM{theme}はSMPの公開画面のテーマカラーの設定であり、以下「ヘッダーフッター編集」画面で設定可能です。設定するとどうなるか、ぜひ試してみてください。
図11:テーマカラーの変更 |