# EC-CUBE デザインテンプレートの基礎

EC-CUBE のデザインテンプレートは、カスタマイズが自由にできます。EC-CUBE の公式ドキュメントに記載されているテンプレート作成方法を参考に、独自のデザインテンプレートを作成することができます。

# デフォルト配置

本体の標準の Twig ファイルは以下のディレクトリに配置されています。

フロント画面の標準ディレクトリ
src/Eccube/Resource/template/default
管理画面の標準ディレクトリ
src/Eccube/Resource/template/admin
インストール画面の標準ディレクトリ
src/Eccube/Resource/template/install

オリジナルのデザインテンプレート配置時の標準ディレクトリ
app/template/[template_code]
→ [template_code]とは、テンプレートを識別するためのコード。
標準ではフロントの場合「default」、管理画面の場合「admin」が定義されている。

# テンプレート呼び出される順番

app/template -> src/Eccube -> app/Plugin の順番で呼び出されます。

フロント

app/template/[template_code]
src/Eccube/Resource/template/[template_code]
app/Plugin

管理

app/template/admin
src/Eccube/Resource/template/admin
app/Plugin

デフォルト

app/template/admin
app/template/default
app/template/plugin

# フロント画面デフォルトテンプレート

ディレクトリ＆ファイル名	説明
Block	ブロック
Cart	カート
Contact	お問い合わせ
Entry	エントリーフォーム
Forgot	パスワードリセットなど
Form	フォーム
Help	プライバシポリシなどの静的ページ
Mail	メール
Mypage	マイページ
Product	商品テンプレート
Shopping	支払いフロー
`block.twig`
`default_frame.twig`
`error.twig`
`index.twig`	トップページ
`meta.twig`
`pager.twig`
`sitemap.xml.twig`
`sitemap_index.xml.twig`
`snippet.twig`

# html assets フォルダ

管理画面
html/template/admin/assets/

フロント画面
html/template/default/assets/

使い方

    <!-- html/template/admin/assets/css/bootstrap.css -->
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css', 'admin') }}">

    <!-- html/template/admin/assets/css/app.css -->
    <link rel="stylesheet" href="{{ asset('assets/css/app.css', 'admin') }}">

    <!-- html/template/default/assets/img/common/favicon.ico -->
    <link rel="icon" href="{{ asset('assets/img/common/favicon.ico') }}">