EC-CUBE4:デザインテンプレートのインストール

この記事のインデックス

3種類のデザインテンプレートから選択

まず初めに、3種類のデザインテンプレートの中から適用するテンプレートを決めて下さい。
—————————-
DT4A100-No1.tar.gz
DT4A100-No2.tar.gz
DT4A100-No3.tar.gz
—————————-
3種類のテンプレートは、ヘッダー部のデザインが異なりますが、その他は同じです。
グローバルメニューには3つのデザインがあり、インストール後に変更することができます。

↓DT4A100-No1.tar.gz 

001

↓DT4A100-No2.tar.gz

002

↓DT4A100-No3.tar.gz

003

デザインテンプレートのアップロード

004

(1)オーナーズストア > テンプレート > アップロード
(2)コード・名称の入力とファイルのアップロード
テンプレートコード:半角英数字、名称は自由。
テンプレート名:日本語可、名称は自由。
テンプレートファイル:********.tar.gzを選択
(3)右下の「登録」をクリック。

005

(4)テンプレート一覧のラジオボタンをチェックし、「登録」。
上図のように3種類のテンプレートをアップロードし、実際のデザインを確認してから確定することも可能です。

テンプレートを登録するとテンプレートコード名でフォルダが2つ生成されます。
カスタマイズを行う際は、このフォルダのファイルを編集することになります。
■app/template/[テンプレートコード] ←twigファイル
■html/template/[テンプレートコード] ←assets(css icon img js scss)

プラグインがインストールされている場合の注意

006

プラグインによっては、twigファイルが生成されるものがあります。生成されているtwigファイルをデザインテンプレートのフォルダにコピーしないとシステムエラーとなりますので注意して下さい。
▼たとえば上図では
デザインテンプレート適用前にインストールされた「おすすめ管理プラグイン」のrecommend_product_block.twigがdefaultフォルダに生成されているので、それをテンプレートフォルダにコピーしています。
また、管理画面のブロック管理で作成したtest.twigも同様にコピーしています。