デザインのカスタマイズ方法

カスタマイズする際に、必ずコピーしてあるかチェックしてから作業します。

たとえば商品詳細の画面を編集する場合は以下のようにします。

商品詳細のテンプレート（コピー元）は、

/src/Eccube/Resource/template/default/Product/detail.twig

になります。

コピー先は、

/app/template/default/Product/

になります。

本当に変わっているかは、適当に書き換えれば分かります。

• 編集方法の例

「動的」な情報を追加してみたいと思います。

やることとしては、商品名の次の行に、「最終更新日」を追加してみたいと思います。最終更新日は、dtb_products の update_date より取得して表示します。update_dateの内容を表示するにあたり、まずは、twig へどの様な情報が渡されているか確認してみたいと思います。

商品詳細画面を表示するための処理は、「/src/Eccube/Controller/ProductController.php」に記述されています。

具体的な場所としては、「202」行目あたりの、「function detail」の部分になります。

この部分の twig へ情報をセットしている部分を探してみます。

場所は、「309」行目になります。

ProductController.php

return $app->render(‘Product/detail.twig’, array(

‘title’ => $this->title,

‘subtitle’ => $Product->getName(),

‘form’ => $form->createView(),

‘Product’ => $Product,

‘is_favorite’ => $is_favorite,

));

Twig 側へ渡されている値としては、

title

subtitle

form

Product

is_favorite

になります。

この中で、商品情報は、「Product」の部分になります。

商品情報（dtb_product のエンティティー）が渡されているようですので、この中のupdate_dateを表示すれば、最終更新日を表示することができそうです。

では、Twig 側へ、情報を表示したいと思います。

detail.twig

<section id=”item_detail_area” class=”col-sm-6″>

<!?★商品名★?>

<h3 id=”detail_description_box__name” class=”item_name”>{{ Product.name }}</h3>

<div id=”detail_description_box__body” class=”item_detail”>

<p>最終更新日：{{ Product.update_date|date(‘Y/m/d H:i’) }}</p>

<!?★通常価格★?>

商品名の下へ、最終更新日を追加しました。

画面を表示すると、次の様に商品名の下へ「最終更新日」が表示されるかと思います。

見せ方の良し悪しはあれですが、、最終更新日が表示されたかと思います。

基本的に、コピーして書き換えるだけですので、特に難しいところはなかったかと思います。

他のテンプレートも同じ要領でコピーして変更することにより、EC-CUBEの本体側はそのままで、独自のテンプレートを表示した状態とすることができます。

表示していくなかで、表示がおかしくなったり、エラーが発生した場合は、app配下のテンプレートを削除することにより、デフォルト状態へ戻すことができます。

編集するTwingファイルの一覧

[管理画面側 v3.0.9] ? パスは src/resource/template/admin 配下

ブロック管理（新規・編集）
Content/block_edit.twig
ブロック管理
Content/block.twig
キャッシュ管理
Content/cache.twig
ファイル管理
Content/file.twig
ページ管理
Content/layout.twig
新着情報管理（新規・編集）
Content/news_edit.twig
新着情報管理
Content/news.twig
ページ管理（新規・編集）
Content/page_edit.twig
ページ管理
Content/page.twig
コンテンツ管理ナビ部分
Content/subnavi.twig
会員登録（編集）
Customer/edit.twig
会員マスター
Customer/index.twig
会員管理ナビ部分
Customer/subnavi.twig
仮会員時メール本文
Mail/entry_confirm.twig
購入完了時メール本文
Mail/order.twig
受注登録（編集）
Order/edit.twig
受注マスター
Order/index.twig
受注マスターのメール通知（確認画面　※一括）
Order/mail_all_confirm.twig
受注マスターのメール通知（入力画面　※一括）
Order/mail_all.twig
受注マスターのメール通知（完了画面）
Order/mail_complete.twig
受注マスターのメール通知（確認画面　※個別）
Order/mail_confirm.twig
受注マスターの個別の送信完了メール確認
Order/mail_view.twig

受注マスターのメール通知（入力画面　※個別）
Order/mail.twig
受注マスターの商品検索部分
Order/search_product.twig
受注管理ナビ部分
Order/subnavi.twig
カテゴリ登録
Product/category.twig
規格編集（分類　※子規格）
Product/class_category.twig
規格編集
Product/class_name.twig
カテゴリCSV登録
Product/csv_category.twig
商品CSV登録
Product/csv_product.twig
商品マスター
Product/index.twig
商品マスター＞規格設定
Product/product_class_twig
商品マスター（編集）
Product/product.twig
商品管理ナビ部分
Product/subnavi.twig
CSV出力項目設定
Setting/Shop/csv.twig
会員規約設定
Setting/Shop/customer_agreement.twig
配送方法設定（編集）
Setting/Shop/delivery_edit.twig
配送方法設定
Setting/Shop/delivery.twig
メール設定
Setting/Shop/mail.twig
支払方法設定（編集）
Setting/Shop/payment_edit.twig
支払方法設定
Setting/Shop/payment.twig
ショップマスター
Setting/Shop/shop_master.twig
税率設定
Setting/Shop/tax_rule.twig
特定商取引法
Setting/Shop/tradelaw.twig
権限管理
Setting/System/authority.twig
EC-CUBE ログ表示
Setting/System/log.twig
マスターデータ管理
Setting/System/masterdata.twig
メンバー管理（編集）
Setting/System/member_edit.twig
メンバー管理
Setting/System/member.twig
セキュリティ管理
Setting/System/security.twig
システム情報
Setting/System/system.twig
管理画面テンプレートベース部分
default_frame.twig
管理画面TOP
index.twig