EC CUBE

EC CUBEを使ってみよう

カスタム編はこちら

今日のテーマはEC CUBE。
WordPressと同様に、Web上のシステムが誰でも使えるオープンソースです。
ECの名前の通り、ショッピングサイトを(比較的)簡単に作る事ができます。

EC CUBE公式サイトからダウンロードして、自分のサーバーにアップして設置します。

サーバーはロリポップを使用します。
本来ロリポップにはEC CUBEの自動インストールがありますが、解説にならないので手動で行います。

まずデータベースが必要なので、前もってサーバーの説明書に沿って用意します。

データベース

このデータベースの情報は必要になるので、テキストエディタなどに控えておきます。

次にサーバのコントロールパネルからPHPの設定を行います。

ec_mbstringinternal_encoding特に難しい事はないのですが、「ec_mbstringinternal_encoding」という項目をUTF-8に変更します。
次にもしも「magic_quotes_gpc」と「safe_mode」がONになっていれば、これをOFFにします。

EC CUBE公式サイトからダウンロードした圧縮ファイルを解凍します。
たくさんのファイルができるのですが、とりあえず必要なのは「deta」と「html」だけなので、この2つだけでよいようです。

EC CUBE FTP「html」フォルダの名前は変更してもよいので、世の中的には「shop」がメジャーなようです。
個人的には、サイトのindexが下層フォルダにあるのは気持ち悪いので後ほど変更しますが、それは後で解説するのでとりあえず一般的にします。
なお、「html」内の「htaccsess」はいらないので削除します。

アップロードが完了すると、EC CUBEのインストーラに入れるようになります。
例えばこのブログで言うと「http://web-design.link/(ディレクトリの名前)/shop/install/」とURLを叩くとインストーラーに入ります。

ec_install

それでは、インストールを開始します。
まあ基本的に指示通りに入力するだけです。

この時データベースのログイン情報が必要なので、あらかじめ控えておきましょう。

データベース

EC CUBEログインこれで管理画面が開始します。
上にメッセージが出てますが、インストーラは作業が終わったら削除します。

で、
このままだとドメイン名の後に/html/index.phpとなってしまう
展開したファイルを見るとわかるんですが、indexファイルが「html」の中にあります。
すると、URLが「ドメイン/html/index.php」となってしまいます。
これはかっこ悪い。

そこで、「html」の中身を全てルートディレクトリに移動します。
その後、「data」のフォルダ内のdefine.phpを開き、

2行目くらいの
/** HTMLディレクトリからのDATAディレクトリの相対パス */
define(‘HTML2DATA_DIR’, ‘../data/’);

/** HTMLディレクトリからのDATAディレクトリの相対パス */
define(‘HTML2DATA_DIR’, ‘/data/’);

に変更します。
修正してアップロード。

これでまずURLは解決。

さて、改造します。
まず、画像類は

画像をオリジナルに変更する
/user_data/packages/default/img/の中に複数フォルダに分けられて収まっています。
オリジナルでテンプレートを作る事もできますが、これを上書きしても変更していけます。

ヘッダー画像をテキストに変更する
これは必要によりますが、
「新着情報」などのソースコードを編集する場合は、
「デザイン管理>PC>ブロック設定」でだいたい変更できます。
CSSはけっこうその場その場で変更したくなるので、個人的にはタグごとにstyle要素でCSSを入れた方が後で楽・・・な気がします。

新着情報、おすすめ商品の文字色
デフォルトだとグレイですが、本来画像なのでh2固有の指定は無いです。
h2タグに対して色を指定します。

ファビコンを変更する
まあ、上書きすればいいだけですね。
/coordinator/user_data/packages/default/img/commonの中にファビコンがあります。
上書きすればよいのですが、けっこう時間がかかります。

ヘッダー画像の商品を変更する
デザイン管理>PC>ページ詳細設定 でトップページを選び、

<div id=”main_image”>
<a href=”<!–{$smarty.const.P_DETAIL_URLPATH}–>” onmouseover=”chgImg(‘<!–{$TPL_URLPATH}–>img/banner/bnr_top_main_on.jpg’,’bnr_top_main’);” onmouseout=”chgImg(‘<!–{$TPL_URLPATH}–>img/banner/bnr_top_main.jpg’,’bnr_top_main’);”>
<img src=”<!–{$TPL_URLPATH}–>img/banner/bnr_top_main.jpg” alt=”詳細はこちら” id=”bnr_top_main” name=”bnr_top_main” />
</a>
</div>

という部分のhref=”<!–{$smarty.const.P_DETAIL_URLPATH}–>1″←この最後の数字を変更します。
リンクがいらない場合はaタグごと削除。
閉じタグの削除も忘れずに。

新規会員登録の必須項目を無しにする
個人情報を取得するのが不要の場合、
data/class/helper/以下にある「SC_Helper_Customer.php」を開き、
「’EXIST_CHECK’, ‘」を「’」へ検索置換します。
これで会員登録の必須項目が全て必須でなくなります。
全てでは困る場合、必須になる項目以外の「’EXIST_CHECK’, 」を削除します。

それだけだとフォームには必須マークが残っているので、
data/Smarty/templates/default/frontpartsにある「form_personal_input.tpl」と、
data/Smarty/Templates/default/entry/の中の「confirm.tpl」
を開き、
不要な場合は項目を消し、必須を外す場合は
<」を「<」に置換します。(スペース無くタグを消します)

これのスマートフォンページ用は
/data/Smarty/templates/sphone/frontparts
にある「form_personal_input.tpl」で追加削除します。

商品購入/お支払方法・お届け時間等の指定
shopping/payment.php
同様に、「お届け先の指定」は
/data/Smarty/templates/default/shopping内の「deliv.tpl」です。
このような感じで、「お支払方法・お届け時間等の指定」「商品購入/ご入力内容のご確認」
などはだいたいこの中にテンプレートがあります。

メールの動的部分を編集する
入力項目を編集したので、
購入時に送られるメールの内容も変わってないと不自然な事になってしまいます。
data/Smarty/templates/default/mail_templates内の「order_mail.tpl」が送信メールのテンプレートです。

これでかなりデフォルトから離れられるんじゃないでしょうか。