EC-CUBE3デザインテンプレート解説:Body背景やヘッダー背景を簡単に変更

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

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

019

詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/design_ec3.php

EC-CUBE3デザインテンプレート解説:TOPページの画像スライド(画像カルーセル)

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

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

018

スライドの動作パターンを21種類の中から選択することができます。
詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/ec3top_slider.php

EC-CUBE3デザインテンプレート解説:プラグインのインストール

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

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

(1)オーナーズストア>プラグイン>プラグイン一覧の「独自プラグイン」で、ダウンロード商品に同梱されているプラグインをアップロードします。

006

(2)プラグインをすべてアップロードした状態

007

(3)コンテンツ管理>ページ管理>TOPページ>レイアウト編集(プラグイン有効直後)

008

(4)各ブロックを配置します。
おすすめ商品ブロックの全ページチェックは外してます。

009

(5)TOPページ

010

① おすすめ商品:管理画面で登録すると反映されます。
② 売上ランキング:商品が購入されると反映されます。
③ 最近チェックした商品:商品詳細ページを閲覧すると反映されます。
④ ショッピングガイド:基本情報設定>特定商取引法で登録した内容が反映されます。
「送料について」と「配送について」は、「ショッピングガイド」プラグインの「設定」が反映されます。

(6)コンテンツ管理>ページ管理>商品一覧ページ>レイアウト編集
「#side_left」にカテゴリブロック等を配置します。

011

(7)商品一覧ページ

012

EC-CUBE3デザインテンプレート解説:テンプレート適用後

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

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

(1)テンプレートは管理画面には適用されません。
EC-CUBE3のデフォルト状態で、TOPページのブロック配置は下図のようになっています。

003

(2)テンプレート適用後のTOPページ

004

(3)カテゴリブロックは「#header」に配置してあっても表示されません。
下図のように、カテゴリブロックを未使用ブロックに置いたとしてもグローバルメニューには読み込まれていないので、フロントページのレイアウトには影響しません。

005

EC-CUBE3デザインテンプレート解説:テンプレートのアップロード

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

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

(1)オーナーズストア>テンプレート>アップロード
(2)コード・名称の入力とファイルのアップロード
テンプレートコード:半角英数字、名称は自由。
テンプレート名:名称は自由。
テンプレートファイル:[.tar.gz]拡張子のダウンロード商品を選択

001

 

(3)オーナーズストア>テンプレート>テンプレート一覧で、テンプレートを選択後「登録」する。

002

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

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-CUBE3:インストール方法

1 データベースを作成

EC-CUBE3をインストールする前に、データベースを作成しておきます。
MySQLまたはPostgreSQL

2 EC-CUBE3アップロード

ダウンロードしたすべてのファイルをサーバにアップロードする必要はありません。
サーバにアップロードするファイルは次の通り。

app
html
src
vendor
autoload.php
cli-config.php
▼シェルスクリプトインストーラーを利用する場合
eccube_install.sh

001

続きを読む EC-CUBE3:インストール方法