どーも 黒ブタ です。
今までずっと避け続けてきたのですが、仕事でECサイトの構築案件が来そうな感じなので、嫌々ながらもEC-CUBEの勉強を始めた。
EC-CUBEはWordPressと違って独自のコードばかりで癖があってやりづらいけど仕方ない・・・。
とりあえず、デフォルトのテーマをカスタマイズするところから始めようと思う。
コードもさわって配置などもいじってみたいが、それは後回しでとりあえずCSSをいじるところから始めてみようと思う。
カスタマイズ用のCSSを追加読み込みする
元ファイルをガツガツいじっていくのはリスクがあるので、管理画面からデフォルトのテーマをコピーする。
管理画面にログインして、オーナーズストア → テンプレート → テンプレート一覧 → デフォルト
デフォルトを選択してダウンロード
そうすると「default.tar.gz」というファイルがダウンロードされるので、ファイル名を変更する
(例) default.tar.gz → original.tar.gz
ファイル名を変更したら、そのまま上記管理画面で【新規作成】
テンプレートコード：original
テンプレート名：original
ファイル(original.tar.gz)を選択してアップロード → 【登録】
カスタマイズ用のoriginalテーマのCSSを編集する為にパスの確認を行う。
html/template/テンプレート名(original)
上記ディレクトリに格納されているので、そこにカスタマイズ用のCSSを格納する。
html/template/original/assets/css/
または
html/user_data/assets/css/
今回はec-customize.cssというファイル名をつけて編集していく。
CSSを記述し、アップロード。
html/template/original/assets/css/ec-customize.css
(html/user_data/assets/css/ec-customize.css)
ただ、これだけでは反映されない。
テーマの変更とheadにcssの追加読み込みをしないといけない。
まずはテーマの変更。
先ほどの管理画面(オーナーズストア→テンプレート)でoriginalテーマに変更する。
次にcssの読み込み。
headの記述は【default_frame.twig】というファイルにある。
こちらのファイルの格納場所
src/Eccube/Resource/template/default/default_frame.twig
上記ファイル(default_frame.twig)をコピーして編集する。
55行目付近に
<link rel="stylesheet" href="{{ asset('assets/css/customize.css', 'user_data') }}">という記述があるので、その下に追加記述。
<link rel="stylesheet" href="{{ asset('assets/css/customize.css', 'user_data') }}">
<link rel="stylesheet" href="{{ asset('assets/css/ec-customize.css', 'user_data') }}">そうしたらdefault_frame.twigをアップロードする。
アップロードする場所は
元ファイルの「src/Eccube/Resource/template/default/default_frame.twig」ではなく、
【app/template/original/default_frame.twig】に格納してアップロードする。
アップロードが終わったら、CSSが反映されているか確認しよう。
ファビコンを変更しよう
EC CUBEの場合ファビコン は何もしていないデフォルトの状態だとEC CUBEのファビコン が自動で入ってしまう。
なので、自社サイトのロゴなど、オリジナルのファビコンに変更しないといけない。
元ファイル(ファビコン)のパスは下記
html/template/default/assets/img/common/favicon.ico
オリジナルを設置するには
html/template/original/assets/img/common/favicon.ico
(html/user_data/assets/img/common/favicon.ico)
オリジナルのブロックを作成しよう
とりあえず、空のブロックを作成してみる
コンテンツ管理→ブロック管理→新規作成
ブロック名：マイブロック- 新着アイテム
ファイル名：myblock_new_item.twig
コード：<div>test</div>
※ コードの中身が空だと保存できないので空divを入れてとりあえず保存する
ちゃんと出力されるか確認する為に、管理画面でブロックの設定する
今回はトップページをいじっていく
コンテンツ管理→レイアウト管理→トップページ用レイアウト
デフォルトの状態だとside_left、side_right,main_top,main_bottom,contents_topなどにゴチャゴチャいろいろ入っているのでヘッダーやフッターなど大事なところだけ残して、途中にあるコンテンツ部分を全て未使用のブロックにドラッグアンドドロップで移動してスッキリさせる。
また、未使用のブロックに自身で作成したファイル(マイブロック- 新着アイテム)があるか確認し、確認できたらそれをmain_bottomに設置し、登録する
自身で作成したmyblock_new_item.twigはどこにあるのか？
app/template/original/Block/myblock_new_item.twig
※基本は管理画面でコードを記述していく
トップページを開いてみるとコンテンツを削除してもスライダーが出力されたままになっているのは、元ファイル(index.twig)に直接コードが埋め込まれている為なので、それはとりあえず放置して、その下に設置したブロックの中身が出力されているか確認する