ショップテンプレート管理
ショップ テンプレート管理
ショップ テンプレート管理では、ショップに設定するショップのテンプレートを作成・編集できます。
ショップテンプレートについて
ecforceではショップ購入フォーム（サンクスオファー）を管理画面からHTML・CSS・JavaScript・画像より自由自在にデザインできます。
作成したショップテンプレートはショップテンプレート管理画面から設定すると利用可能になります。
※ショップページにテーマを適用している場合、テーマ管理のコード編集からサンクスオファー画面（ec_force/shop/orders/cv_upsell）を選択して、HTMLやスタイルを編集することも可能です。
編集した内容が適用される優先順位は「テーマ管理で編集した内容」＞「ショップテンプレート管理で編集した内容」となりますのでご注意ください。
ショップテンプレート管理画面
ショップテンプレート管理は「ショップ管理 > ショップテンプレート管理」で表示されます。
ショップテンプレート一覧の確認・編集
登録されているショップテンプレートの一覧を確認・編集できます。
ステータスはショップテンプレートが商品に紐づく、またはデフォルトに設定された場合に利用中になります。
ショップテンプレートを新規作成する場合は「新規作成」をクリックします。
登録済みのショップテンプレートを編集する場合は「編集」をクリックします。
登録済みのショップテンプレートを複製して作成する場合は「コピー作成」をクリックします。
ショップテンプレートの表示順を変更する場合は「並び順」にてドラッグ&ドロップを行う、もしくは「先頭」「末尾」をクリックします（ショップテンプレート作成時は最上部に表示されます）。
各コードに対する検索条件
以下の検索条件にコードを入力して、コードによる検索が行えます。
- ヘッダー編集
- ボディー編集
- フッター編集
- CSS編集
- Javascript編集
テキストボックス内に入れたコードで検索可能です。
改行して複数のコードで検索が行えます。
※複数のコードを検索した場合「or検索」になります。検索したコードのどれか1つでも入力されているショップテンプレートが検索結果に表示されます。
ショップテンプレート管理画面における各項目
ショップ テンプレート管理に関する設定として、以下項目を確認・編集できます。
基本情報
CSSを追加で定義する場合は、本項目で追記も可能です。
| ID | ショップテンプレートを一意に特定する管理用のIDです。 |
| ショップテンプレートタイプ | ショップテンプレートのタイプを設定できます。 |
| ショップテンプレート名 | ショップテンプレートの名前です。 |
| デフォルト | デフォルト設定の有効・無効を設定します。 有効に設定したテンプレートがショップに適用されます。 ※「有効」に設定できるショップテンプレートは１つのみです。 ※テナントを利用の場合は各テナント毎に設定が適用されます。 |
| 説明 | テンプレートの管理用の説明です。 |
| タイトル(SEO) | テンプレートが表示された際のページのtitleタグです。 |
| メタディスクリプション(SEO) | テンプレートが表示された際のページのmeta descriptionタグです。 |
| メタキーワード(SEO) | テンプレートが表示された際のページのmeta keywordタグです。 |
| ヘッダー編集 | <head></head>に表示するコードです。 |
| ボディー編集 | <body></body>の内側に表示するコードです。 記述に関する詳細は「ボディー編集」をご確認ください。 |
| フッター編集 | <body></body>の内側に表示するコードです。 ボディー情報のあとに出力されます。 |
| CSS編集 | テンプレートに適用するCSSです。 |
| Javascript 編集 | テンプレートに適用するJavaScriptです。 |
| テナント | テンプレートが作成されたテナントが表示されます。 ※テナントをご利用のショップでマスターのテナントでのみ表示されます。 |
| 作成日 | ショップテンプレートが作成された日時です。 |
| 更新日 | 作成されたショップテンプレートが更新された日時です。 |
- 「ショップテンプレートタイプ」を選択すると、フォーム部分に関するデフォルトデザインの記述が「ボディー編集」と「CSS 編集」に入力されます。
- デフォルトのデザインを利用する場合は「ボディー編集」と「CSS 編集」にすでに入力されている記述を削除しないでください。
使用されている商品一覧
ショップテンプレートが使用されている商品の一覧です。
| ID | 商品を一意に特定する管理用のIDです。 クリックで対象商品の「基本設定」ページに遷移します。 |
| 商品名 | 商品の名前です。 |
| オファー商品名 | 商品に紐づくオファー商品の名前です。 クリックで対象オファー商品の「基本設定」ページに遷移します。 |
プレビュー
作成中のテンプレート内容を確認できます。
※「パスワード保護機能：有効」の場合は、プレビュー時にパスワードの入力を求められます。
Caution!!
__PAYMENT_FORM_CV_UPSELL__ はプレビューでは表示されず、確認できません（グレーの枠で表示されるのみ）。
テーマ管理画面のプレビューから実施します。
編集画面でプレビュー表示する場合
「保存前プレビュー」ボタンをクリックしてテンプレート内容を確認します。
※プレビュー前に必須項目に値を入力します。
詳細画面でプレビュー表示する場合
「プレビュー」ボタンをクリックしてテンプレート内容を確認します。
※プレビュー前に必須項目に値を入力してください。
ファイルアップロード
画像、css、js等のファイルをアップロードできます。
すべてのファイルは{{ file_root_path }} 以下に設置されます。
（例）<script src='{{ file_root_path }}/test.js'></script>
Caution!!
- フォルダ名やファイル名には「半角英数字、-（ハイフン）、_（アンダーバー）、.（ドット）」が使用可能です（その他の記号などは非推奨です）。
- フォルダに存在するファイルと同名のファイルをアップロードした場合、もともと存在していたファイルは新しい同名のファイルに上書きされます。
各項目の補足事項
ボディー編集
購入画面内で表記する箇所（フォーム部分など）は、以下の値で入力します。
| テンプレートタイプ | 記述 | 表示内容 |
|---|---|---|
| サンクスオファーページ | __PAYMENT_FORM_CV_XSELL__ | サンクスオファー（クロスセル訴求） |
使用できる変数一覧
ショップテンプレートはLiquidというテンプレートエンジンを採用していて、テンプレート内容に「受注情報」を変数で動的に呼び出せます。
使用できる変数一覧は、ショップテンプレート管理の「新規作成/編集」画面の右上「使用できる変数一覧」をクリックして確認できます。
※テンプレート内の「__PAYMENT_FORM__」はひとつのテンプレートエンジンより呼び出しているecforce全体のデフォルト設定のため、編集することはできません。
高度な機能になりますが、Liquidを利用することでショップテンプレートの条件分岐が可能です。
ただし、Liquidの使い方についてはカスタマーサポートのサポート対象外です。以下、参考例ベースでの情報公開になります。
参考イメージ
ショップテンプレートの各項目は以下参考イメージのように呼び出されます。
（例）参考イメージ
この記事の目次
このセクションの記事
ショップテンプレート管理