今日のテーマはEC CUBE。
WordPressと同様に、Web上のシステムが誰でも使えるオープンソースです。
ECの名前の通り、ショッピングサイトを(比較的)簡単に作る事ができます。
EC CUBE公式サイトからダウンロードして、自分のサーバーにアップして設置します。
サーバーはロリポップを使用します。
本来ロリポップにはEC CUBEの自動インストールがありますが、解説にならないので手動で行います。
まずデータベースが必要なので、前もってサーバーの説明書に沿って用意します。
このデータベースの情報は必要になるので、テキストエディタなどに控えておきます。
次にサーバのコントロールパネルからPHPの設定を行います。
特に難しい事はないのですが、「ec_mbstringinternal_encoding」という項目をUTF-8に変更します。
次にもしも「magic_quotes_gpc」と「safe_mode」がONになっていれば、これをOFFにします。
EC CUBE公式サイトからダウンロードした圧縮ファイルを解凍します。
たくさんのファイルができるのですが、とりあえず必要なのは「deta」と「html」だけなので、この2つだけでよいようです。
「html」フォルダの名前は変更してもよいので、世の中的には「shop」がメジャーなようです。
個人的には、サイトのindexが下層フォルダにあるのは気持ち悪いので後ほど変更しますが、それは後で解説するのでとりあえず一般的にします。
なお、「html」内の「htaccsess」はいらないので削除します。
アップロードが完了すると、EC CUBEのインストーラに入れるようになります。
例えばこのブログで言うと「http://web-design.link/(ディレクトリの名前)/shop/install/」とURLを叩くとインストーラーに入ります。
それでは、インストールを開始します。
まあ基本的に指示通りに入力するだけです。
この時データベースのログイン情報が必要なので、あらかじめ控えておきましょう。
これで管理画面が開始します。
上にメッセージが出てますが、インストーラは作業が終わったら削除します。
で、
このままだとドメイン名の後に/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」が送信メールのテンプレートです。
これでかなりデフォルトから離れられるんじゃないでしょうか。