はじめに
EC-CUBEのバージョン4.**の使い方について触れていきたいと思います。
EC-CUBEとは
私は名前だけは知ってるという感じでした。
本記事で書きたい内容とはズレるので簡単に説明してしまうと、「オープンソースのCMSでECサイトがだれでも簡単に作れる」といった感じ。
WordPressと同じく「 CMS」という括りですね。
誰でも簡単に基本機能を使って操作することができますが、こだわれば独自性の高いショップを作ることができるようです。
WordPressのカスタマイズは散々やってきたけど、EC-CUBEではどのくらいカスタムができるのか、EC-CUBE初心者がいろいろ触ってみました。
この記事はこんな方におすすめ
htmlなら少しわかる
wordpressなら触ったことあるよー
初心者だけど自分でやっていきたいよー
何から触る？
とりあえず登録して管理画面にログインしてみましたが、早速何から触ればいいかわからないレベル^^;
EC-CUBEはWordpressほどの情報量がネット上にはないようですが、日本製のため公式のドキュメントを読むのが一番の足掛かりになりそうです。
ダッシュボードはWordpressと同じように各管理ができるようになっていて、「ヘッダー部分のショップ名」をクリックすると実際のショップにジャンプすることができます。
リンク先へ飛んでみると、デフォルトテーマが適用されたサイトが表示されるかと思います。デフォルトでもかなり綺麗ですよね。
ただ、このままでは知っている方には「The EC-CUBE」というイメージを持たれてしまいますね。それが悪いというわけではないのですが。
しかし、EC-CUBEを使う＝独自のECサイトを構築して売り上げをアップさせたいというのが本質だと思いますので、目を惹くデザインにしていきたいところです。
EC-CUBEでデザインを変更する前に
レイアウトイメージを固める
デザインを実際に変更するまえに、こんなイメージというのを固めておくことで進めていきやすくなります。
ECサイトのレイアウトに参考になりそうなサイトへのリンクをいくつか下に載せておきます。
https://www.yamatofinancial.jp/learning/know-how/good-designed-online-store.html
https://www.weblab.co.jp/staff/design/6397.html
https://web-kanji.com/posts/fashionable-design-ecsite
デフォルトテーマのバックアップを取りつつ独自テーマを定義する
実際にブロックを編集していき、おかしくなったときに元に戻せるようにまずデフォルトテーマのバックアップを取ります。
ECCUBEの中の人に聞いたところ、テーマのダウンロードは「デフォルト状態と比べた差分のみ」しかダウンロードされないとのことなので、この手順は不要でした。
デフォルトテーマのダウンロード
ダウンロードしたテーマをアップロードします。
テンプレートコードと名称は任意の名前で。
アップロードが完了したら、テンプレート一覧に戻り、アップしたテーマを選択し登録ボタン。
これでブロックの編集などは新しいテーマに適用されます。
EC-CUBEでデザインの変更方法
ダッシュボードのサイドバーより、デザインを変更するために触れる箇所は主に上画像の①と②あたりになりそうです。
①は既存のテーマをカスタマイズする手法がメインで、②はプラグインで機能を拡張したり、既にできているテンプレートを適用してガラッとレイアウトを変更したり。
簡単便利そうなのは②のほうですが、よくわかっていない状態であれこれ入れたくない性格なので、まずは①からちょこちょこいじっていきたいと思います。
基本的な流れ
EC-CUBEでのデザインカスタムは、大きく「レイアウト管理」と、「ブロック管理」の２つに分かれます。
レイアウト管理ではページ全体のレイアウトをコンテンツごとに作ることができます。例えばトップページ用、商品詳細ページ用など。
ブロック管理では、レイアウト内に配置するパーツを作成、編集することができます。
そのため、既にあるブロックを使ってレイアウトを変更するにはGUI操作のみで行うことができ、新たに独自ブロックを追加するときなどはある程度コードを書く必要がでてきます。
EC-CUBEによるCSSのスタイルガイド
以下にありました。
http://eccube4-styleguide.herokuapp.com/#/
デフォルトテーマのスタイルはec-**といった形式で定義されているのですが、これをわざわざ確認しながら作っていくよりはbootstrapのクラスが使えるのでそっちのほうが早そう。。特にgridなどは。
ただ、bootstrapのバージョンが3.3.7を読み込んでいるので、現在主流の４ではないためちょっと古い書き方をしなくてはいけません。
bootstrapはcdnで読み込んでいるだけなので、該当箇所を変えてしまえばいいかと思いましたが、とりあえずそのままbootstrap3の書き方でやってみました。
ブロックを編集しレイアウトを変更してみる
元々あるロゴブロックをグリッド２列で表示できるように
変更前
<div class="ec-headerRole">
<div class="ec-headerRole__title">
<div class="ec-headerTitle">
<div class="ec-headerTitle__title">
<h1>
<a href="{{ url('homepage') }}">
{{ BaseInfo.shop_name }}
</a>
</h1>
</div>
</div>
</div>
</div>変更後
<div class="ec-headerRole">
<div class="col-xs-12 col-md-4">
<h1>
<a href="{{ url('homepage') }}">
{{ BaseInfo.shop_name }}
</a>
</h1>
</div>
<div class="col-xs-12 col-md-8">
おためし
</div>
</div>bootstrapが適用されているのが確認できます。
上記のようにブロックの編集＋css管理というところから独自のスタイルをどんどん加えていくことで、レイアウトに関してはわりと簡単に変更していけそうです。
定型文の定義はどこで？
例えば、トップページの「新入荷商品特集」ブロックの内容を編集し、独自の説明文を書こうとしたとき。
<div class="ec-eyecatchRole__intro">
<p class="ec-eyecatchRole__introEnTitle">{{ 'front.block.eyecatch.title__en'|trans }}</p>
<p class="ec-eyecatchRole__introTitle">{{ 'front.block.eyecatch.title__ja'|trans }}</p>
<p class="ec-eyecatchRole__introDescriptiron">{{ 'front.block.eyecatch.descriptiron'|trans|nl2br }}</p>
<a class="ec-blockBtn--top" href="{{ url('product_list') }}?category_id=4">{{ 'front.block.eyecatch.view_list'|trans }}</a>
</div>上記のようになっていて、文章そのままは別ファイルで定義していることがわかります。
そのファイルのパスは以下。
/src/Eccube/Resource/locale/messages.ja.yaml多言語対応用にファイルがわかれているので、必要なければ直接上書きしてしまってもいいかと思いますが、本来いじるのはこっちのファイルのようですね。