EC-CUBE3デザインテンプレート解説:プログラムファイルの入れ替え

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

 LoginController.phpの入れ替え

ダウンロード商品に同梱されている下記ファイルを入れ替えます。
■src/Eccube/Controller/Block/LoginController.php
LoginController.phpは、グローバルメニュー(login.twig、ブロック名:ログイン)をコントロールしているファイルです。
グローバルメニューで、「カテゴリー」を読み込むためにファイルの入れ替えが必要です。
▼LoginController.phpの変更点
「カテゴリ読み込み」2箇所を追加します。


$email = $request->cookies->get('email');
/* @var $form \Symfony\Component\Form\FormInterface */
$form = $app['form.factory']
->createNamedBuilder('', 'customer_login')
->getForm();
//▼カテゴリ読み込み
$Categories = $
app['eccube.repository.category']
->findBy(
array('Parent' => null),
array('rank' => 'DESC')
);
return $app->render('Block/login.twig', array(
'error' => $app['security.last_error']($request),
'email' => $email,
'form' => $form->createView(),
'Categories' => $Categories /*■カテゴリ読み込み */
));

こうすることで、カテゴリブロックを「#header」から外し、自由に配置することができます。

EC-CUBEカスタマイズBootstrap版(10)商品詳細ページ

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼商品詳細ページ

001

(1)レイアウトの変更

テンプレートファイルのコードを入れ替えることでレイアウトを変更することが可能です。
■data/Smarty/templates/default/products/detail.tpl

002

(2)商品ステータス

管理画面、システム設定>マスターデータ管理の[mtb_statua]で登録されている値が表示されます。
[mtb_status_image]は使用していません。
EC-CUBEの通常の動作に戻す(mtb_status_imageを使用)場合は、パラメータ設定[STATUS_IMAGE_TEXT ]の値をtrueに変更して下さい。

005

ステータスの背景色を変更する場合、あるいは追加する場合は、CSSを編集してください。
■html/user_data/packages/default/css/contents.css
865行目付近、「商品詳細」の箇所
———-
ul.detail_status_icon li#status1 {
background: #FFD1BB;
}
ul.detail_status_icon li#status2 {
background: #FFD2E9;
}
ul.detail_status_icon li#status3 {
background: #FAA;
}
ul.detail_status_icon li#status4 {
background:#E2F2FA;
}
ul.detail_status_icon li#status5 {
background:#D7E8CA;
}
———-

 

(3)商品情報

デモサイトの「サイズ」「材質」「耐荷重」等は、管理画面の商品登録画面で設定された内容が反映されています。

006

「サイズ」「材質」「耐荷重」等の項目は、システム設定>マスターデータ管理の[mtb_product_head]で登録します。
登録数は10個までです。

007

(4)規格の選択方法

パラメータ設定[CLASS_PULL_TABLE]の値を「false」に変更すると、プルダウン形式で表示されます。

008

009

(5)規格ごとの詳細を表示

パラメータ設定で詳細の表示・非表示を設定できます。
▼MATRIX_NORMAL_PRICE
商品詳細ページのマトリクス表示:通常価格(true:表示, false:非表示)
▼MATRIX_POINT
商品詳細ページのマトリクス表示:ポイント(true:表示, false:非表示)
▼MATRIX_PRODUCT_CODE
商品詳細ページのマトリクス表示:商品コード(true:表示, false:非表示)
▼MATRIX_STOCK
商品詳細ページのマトリクス表示:在庫数(true:表示, false:非表示)
▼MATRIX_SALE_LIMIT
商品詳細ページのマトリクス表示:一度に購入できる数(true:表示, false:非表示)
▼MATRIX_CLASS_IMAGE
商品詳細ページのマトリクス表示:規格画像確認リンク(true:表示, false:非表示)

010

すべて表示した場合、下図のようになります。

011

(6)数量選択のプルダウン

① パラメータ設定[QUANTITY_PULLDOWN_USE]の値を「false」に変更すると、プルダウン化は解除されEC-CUBE通常のテキストボックスで表示されます。

003

② [QUANTITY_PULLDOWN_MAX]で、プルダウンの数値の最大値を設定します。インストール時はデフォルト「100」に設定されています。

③ 商品に在庫数または販売制限数が設定されている場合は、プルダウンの数値の最大値は、在庫数または販売制限数となります。

012

(7)お気に入り追加ボタン

ユーザーがログイン前にクリックした場合は、MYページログイン画面に遷移します。

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

EC-CUBEカスタマイズBootstrap版(9)商品一覧ページ

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼商品一覧ページ

001 続きを読む EC-CUBEカスタマイズBootstrap版(9)商品一覧ページ

EC-CUBEカスタマイズBootstrap版(8)ブロック解説⑤

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ブロック解説⑤

001 続きを読む EC-CUBEカスタマイズBootstrap版(8)ブロック解説⑤

EC-CUBEカスタマイズBootstrap版(7)ブロック解説④

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ブロック解説④

001 続きを読む EC-CUBEカスタマイズBootstrap版(7)ブロック解説④

EC-CUBEカスタマイズBootstrap版(6)ブロック解説③

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ブロック解説③

001

(1)ティッカー

管理画面、コンテンツ管理>ティッカー管理の登録が反映されます。

002

(2)新着情報

管理画面、コンテンツ管理>新着情報管理の登録が反映されます。

003

・「URL」欄を入力すると、「詳しくはこちら」が表示されます。
・本文作成欄では、CKEditorを利用できるので、HTMLで内容を表示することができます。

004

(3)クーポン情報

管理画面、コンテンツ管理>多機能クーポン管理でクーポンが登録されると自動で表示されます。
登録されたクーポンの内容が反映されます。

005

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

EC-CUBEカスタマイズBootstrap版(5)ブロック解説②

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ブロック解説②

001 続きを読む EC-CUBEカスタマイズBootstrap版(5)ブロック解説②

EC-CUBEカスタマイズBootstrap版(4)ブロック解説①

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ブロック解説①

001

続きを読む EC-CUBEカスタマイズBootstrap版(4)ブロック解説①

EC-CUBEカスタマイズBootstrap版(3)トップページスライド画像の解説

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼トップページスライド画像

001

続きを読む EC-CUBEカスタマイズBootstrap版(3)トップページスライド画像の解説

EC-CUBEカスタマイズBootstrap版(2)ヘッダー部の解説

EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト

インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。

詳しくはこちらをご覧ください。

▼ヘッダー部の解説

001

 

(1)[ログイン]をクリック

002

【ヘッダー】ログイン:ブロックが読み込まれます。
■data/Smarty/templates/default/frontparts/bloc/login_header.tpl

続きを読む EC-CUBEカスタマイズBootstrap版(2)ヘッダー部の解説