EC-CUBEは無料で優れたECサイト用のCMSですが、まだまだ自分でカスタマイズしないといけない部分もたくさんあります。ECサイトを構築する際に、はじめから入れておくと便利なカスタマイズ＆便利なプラグインを残しておきたいと思います。製作途中で思ったことや改良した点などをそのままメモして記事にしちゃえ！なんてことを思った訳です。
目次
綺麗な画質で公開しよう！
ECCUBEの画質設定はデフォルトで75%なんです。100%の画質設定にすると、その分容量も大きくなってしまうのですが、ECサイトは画質が命です！
なので、75%と言っていないで100%の品質にするよ！ってことで、方法はこのような感じ。
ファイル： /data/module/gdthumb.php の220行目辺り
[php]imageJpeg($dst_im, $dst_file);[/php]
これを
[php]imageJpeg($dst_im, $dst_file, 100);[/php]
に修正するだけ。
たったこれだけで、品質を100に変更することができます。上記でも書きましたが、ECサイトの場合、写真はとても重要です。食品を扱うサイトなら尚更です！デフォルトの値と見比べると鮮明さが全然違うのが分かると思います。
管理画面のフォント変更
管理画面のフォントが、MS Pゴシックで見づらいんですよね（僕は…）。なので読みやすいメイリオあたりに変更してみます。
ファイル： html/user_data/packages/admin/css/admin_contents.css
のbody、font-familyを下記のように変更します。
[css]font-family: “ＭＳ Ｐゴシック”,”Hiragino Maru Gothic Pro”,”ヒラギノ丸ゴ Pro W4″,Osaka,sans-serif;[/css]
を
[css]font-family: “メイリオ”, Meiryo, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;[/css]
マウスオーバーで画像切り替えをオフに！
EC-CUBEってマウスオーバーで画像が切り替わるんですよね。ここはボタンだよ。っていう意味や動きが出るのでユーザーには優しいのかもしれません。
ですが、制作側からするとON・OFFのボタンを両方作るのは非常にめんどくさい…数も結構あるんですよねー。（こう思ってる時点でダメ？笑）なので、この機能は切ってしまいます。
ファイル： /js/eccube.jsの 602行あたりをコメントアウト。
[code]// マウスオーバーで画像切り替え
/* $(“.hover_change_image”).each(function(){
var target = $(this);
var srcOrig = target.attr(“src”);
var srcOver = srcOrig.substr(0, srcOrig.lastIndexOf(‘.’)) + ‘_on’ + srcOrig.substr(srcOrig.lastIndexOf(‘.’));
target.hover(
function(){
target.attr(“src”, srcOver);
},
function(){
target.attr(“src”, srcOrig);
}
);
});
*/[/code]
マウスオーバーでリンク付き画像を透過する
画像に動きが無くなってしまうので、簡単に動きを出すようにしてみます。リンク設定されている画像にマウスオーバーした時は、少し透過してあげることでココはリンクになっているんだ。という事を直感的に判断できるようにします。
マウスオーバーで画像を透過（薄く）する方法は下記の様に。
[css]a img:hover {
opacity:0.7;
}[/css]
カテゴリ別に詳細ページの内容を分岐する
例えば、業務用商品を扱いたくて価格は表示したくない。業務用商品に関してはお問い合わせして欲しい。という場合には、業務用のカテゴリに属した商品のカート部分を分岐し、カートではなく、お問い合わせのボタンを表示するようにすると便利♪
そんな時には、下記のように設定します。
管理画面：「デザイン管理」→「PC」→「ページ詳細設定」→「商品詳細ページ」
[php]<–{if count($arrRelativeCat) > 0}–>
ここにカテゴリID10に登録した商品ページに表示する文章を書きます。
<–{elseif $arrRelativeCat.0.0.category_id == 11}–>
ここにカテゴリID11に登録した商品ページに表示する文章を書きます。
その他のカテゴリの時の文章を書きます。
[/php]
カテゴリ別にカテゴリページの内容を分岐する
カテゴリの一覧ページで、カテゴリ毎に、表記を変えたい時に、下記のように設定します。あるカテゴリには、価格は表示しない。や、商品の表示形式を変えたいといった場合にも使えそうですね。
管理画面：「デザイン管理」→「PC」→「ページ詳細設定」→「商品一覧ページ」
[code]
カテゴリ１の場合に表示する内容
カテゴリ２の場合に表示する内容
その他のカテゴリの時の文章を書きます。
[/code]
お問い合わせの項目を削除
お問い合わせ画面で入力する項目に、住所や電話番号があります。必須ではないにしろ、お問い合わせの時点でこの情報が必要かどうか。入力項目が多いとお問い合わせしてくれにくくなります。
今回は郵便番号・住所・電話番号の項目を削除する方法です。
お問い合わせ入力ページのカスタマイズ
「デザイン管理」→「PC」→「ページ詳細設定」から、お問い合わせ(入力ページ)のページ詳細の「編集」をクリック！
下記のコード部分を削除します。
[code]郵便番号
〒
–
郵便番号検索
郵便番号を入力後、クリックしてください。
住所
住所は2つに分けてご記入ください。マンション名は必ず記入してください。
電話番号
–
–
[/code]
スマートフォンも同様に、
「デザイン管理」→「スマートフォン」→「ページ詳細設定」から、お問い合わせ(入力ページ)のページ詳細の「編集」をクリック！
下記のコード部分を削除します。
[code]郵便番号
〒
–
郵便番号検索
郵便番号を入力後、クリックしてください。
住所
住所は2つに分けてご記入ください。マンション名は必ず記入してください。
電話番号
–
–
[/code]
お問い合わせ確認ページのカスタマイズ
お問い合わせ確認ページは、管理画面から触れない為、FTPにてファイルを直接編集します。
パス：/data/Smarty/templates/default/contact/confirm.tpl
の下記部分を削除しましょう。
[code]郵便番号
〒–
住所
電話番号
––
[/code]
スマートフォンも同様に下記パスから削除します。
スマートフォンのパス：/data/Smarty/templates/sphone/contact/confirm.tpl
削除する部分は下記の部分です。
[code]住所
〒–
電話番号
––
[/code]
お問い合わせメールのカスタマイズ
送信されるメールにも郵便番号・住所・電話番号が載っているので、それも削除します。
こちらもFTPでアクセスします。
パス：/data/Smarty/templates/default/mail_templates/contact_mail.tpl
の、下記部分を削除しましょう。
[code]
■郵便番号：〒–
■住所 ：
■電話番号：––
[/code]
を削除します。
注文完了メールの注文者情報にお名前のカナ表記を実装する
注文メールのご注文者情報に読みが無いのでメールが届いた時に、メールを使って発送業務まで行う事を考えると、相手の名前を読めないのはキツイですね。ということで、フリガナを載せる方法です。
パス：/data/Smarty/templates/default/mail_templates/order_mail.tpl
下記の４行目（ハイライトした部分）を追加してあげるだけです。
[code highlight=”4″]
************************************************
ご注文者情報
************************************************
お名前 ： 様
お名前（フリガナ） ： 様
会社名 ：
[/code]
構築時に入れておくべきオススメプラグイン6選！
商品別METAタグ設定プラグイン(カテゴリも対応) (2.13系)
商品一覧ページのカテゴリと商品詳細ページごとに異なるmetaタグの設定ができるようになります。ECCUBE2.13系ではディスクリプションが細かく設定できないので、ありがたいプラグインです。SEO対策は必須ですよね。
価格帯一覧ブロック
商品を価格帯（予算）から選ぶ事が多くなっています。カテゴリからの選択も重要ですが、価格帯からも選べるとユーザーは選びやすく、早く目的の商品にたどり着けるので初期に導入したいプラグインです。
全ページ対応パンくずリスト表示プラグイン 無料版
今どの階層のどのページにいるのかをすぐ判断できるように、パンくずリストは必須ですね♪
商品情報追加プラグイン
商品情報の項目を増やせるプラグインです。項目名も好きなように決める事ができ、数も制限無いです。原材料や賞味期限などの項目を作って記載するだけで、見やすい形になるので、扱いも簡単！
のし対応
購入時に贈答品販売用の「のし」を選択して頂くことが可能となります。
プラグインを導入することで、贈答品販売の購入フローを減らし業務の短縮に繋がります。「贈答品販売時にお客様からの問い合わせで「のし」の対応を行なっているため、やり取りに手間がかかる」といった方にオススメのプラグインです。のし名も自由に決められるので自由度が高いですよ。
カテゴリ別MV(メインビジュアル)枠追加プラグイン (2.13系)
カテゴリページの上部に、フリーのエリアを追加することが出来るプラグインです。カテゴリの説明や、補足情報をカテゴリごとに書けるプラグインです。
まとめ
EC-CUBEはPHPでできているのでカスタマイズもそれほど難しくないですね。プラグインも豊富で安価で良いECサイトを作りやすいCMSです。カスタマイズする度にどんどん書き加えていきたいと思います。