2014年10月12日日曜日

EC-CUBE管理画面の幅を広げる

SYSTEM_KDです。
最近は、ワイドディスプレイが主流ですので、ワイドディスプレイを利用されている方も多いと思いますが、EC-CUBEの管理画面は幅が決まっていますので、ワイドディスプレイで見ると、何も表示されない領域ができてしまい、少しもったいなく感じます。

ec_admin01

こんな感じですね。

ということで、CSSを少しさわって横幅を広げる小ネタを紹介したいと思います。

まず、次のCSSを変更します。
html/user_data/packages/admin/css/admin_contents.css

以下の部分を見つけて同じ様にコメント化します。
(2.13系だと500行目あたりかな)

#navi-wrap {
// width: 1030px;
}

次に、同ファイルの以下の部分を見つけて、これまた同様にコメント化します。

#contents {
padding: 20px 20px 100px;
// width: 1000px;
}

この状態で管理画面を表示すると、


ec_admin02


かなり無理やりですが、一応広がりました!(^^;


幅の上限をとっただけなので、登録画面とかは、ただ広がっただけになりますが、一覧画面に関しては若干見やすくなるかと思います。

2014年10月11日土曜日

EC-CUBE決済モジュールGMOペイメントを導入する

SYSTEM_KDです。

以前宣言した通り、今回はGMOペイメントを導入してみたいと思います。

GMOのテスト環境の設定部分だけまとめようかと考えていたのですが、前回より時間が空いてしまいましたので、モジュールの取得から行いたいと思います。

手順としては、以下になります。

1.GMO決済モジュール(無料)の取得
2.テスト環境(無料)の取得
3.EC-CUBEへ接続情報を設定

では、早速「1.GMO決済モジュールの取得」ですが、EC-CUBEオーナーズストアより、決済モジュールをダウンロードしたいと思います。
決済モジュールをダウンロードするには、どのサイトとに対してダウンロードを行うか設定する必要がありますので、「メンバーMYページ」より「サイトの追加」を行います。

gmo_02

サイト名に好きな名前を設定します。
サイトURLにつきましては、「localhost」を設定されても特に問題ないかと思います。

gmo_03

※サイトを追加した際に発行される「認証キー」をメモしておきます

上記設定ができたら、決済モジュールのダウンロード(無料購入)を行います。
(※お使いのEC-CUBEのバージョンに合わせた決済モジュールをダウンロード下さい)

gmo_01

流れにそって進んでいけば良いです。
途中、どのサイトと紐付けるかという選択がありますので、任意のもの(追加したサイト)を選択します。

これで、決済モジュールの無料購入は完了です。
と言っても、実際の決済モジュールはまだ取得できておりません。

実際に決済モジュールをEC-CUBEへ設定するには、EC-CUBE側でダウンロードを行う必要があります。

手順としましては、EC-CUBE管理画面の「オーナーズストア>認証キー設定」画面を開き、上の手順でメモした「認証キー」を設定します。

gmo_04

認証キーが設定できたら、EC-CUBE管理画面の「オーナーズストア>モジュール管理」を開きモジュール一覧を取得します。

gmo_05

そうすると、「GMOペイメント」が表示されますので、「ダウンロード」ボタンを押します。

gmo_06

これで決済モジュールの取得は完了です。

次は「2.テスト環境の取得」ですが、こちらのページより、指示に従い登録を行います。
登録が完了すると、メールで「1.サイト管理画面」と「2.ショップ管理画面」の情報が送付されてきます。

続けて、「3.EC-CUBEへ接続情報を設定」へ進みます。

EC-CUBE管理画面の「オーナーズストア>モジュール管理」をみると、「GMOペイメント」欄のダウンロードリンクの右側へ「設定」というリンクが表示されていると思います。
このリンクを押して、設定画面を表示させます。

設定画面を開くと、接続情報等を入力するようになっております。

gmo_07

接続先はテストですので、「テスト環境」で良いですが、以下の項目についてはGMO側の管理画面より取得を行う必要があります。

  • サイトID
  • サイトパスワード
  • ショップID
  • ショップパスワード

具体的に、どこから取得するかといいますと、「2.テスト環境の取得」で登録を行った際にメールで送られてきた、「1.サイト管理画面」と「2.ショップ管理画面」より取得を行います。

まず、「1.サイト管理画面」に記載されているページへアクセスします。
(※接続する際はIEから行った方が問題がないかもしれません)

サイト管理画面が開けたらメニューより「サイト管理」を選択します。

gmo_08

そうすると、サイトIDとパスワードが表示されますので、EC-CUBE側の設定画面のサイトIDとパスワードの部分へコピーします。

コピーできたら、「2.ショップ管理画面」に記載されているページへアクセスします。

ショップ管理画面が開けたらメニューより「ショップ管理」を選択します。

gmo_09

そうすると、今度はショップIDとパスワードが表示されますので、EC-CUBE側の設定画面のショップIDとパスワードの部分へコピーします。

設定できたら、「有効にする決済方法」で「クレジットカード決済」を選択し、「この内容で登録する」ボタンを押します。

接続情報の設定は、これで完了です。

それでは、実際にクレジットカード決済でテスト購入を行ってみましょう!
と言いたいとこですが、このままではまだ利用できません。EC-CUBEの管理画面にていくつか設定が必要です。

具体的には、「基本情報管理>配送方法設定」画面を開き、クレジット決済を追加した配送業者の編集ボタンを押します。
すると、「取扱支払方法」の項目へ「クレジットカード決済」という項目が追加されていると思いますのでこちらにチェックを入れます。

gmo_10

チェックを入れたら、登録ボタンにより設定を更新します。

次に「基本情報管理>支払い方法設定」を開きます。
そうすると、こちらにも「クレジット決済」の項目が追加されていますので、編集ボタンを押します。

この画面で、決済に関する細かい設定が行えるようになっております。
それでは、以下のように設定してみます。

  • 支払方法 ・・・ 変更不要
  • 手数料 ・・・ 変更不要
  • 利用条件 ・・・ 変更不要
  • 処理区分 ・・・ 仮売上を設定
  • 支払い種別 ・・・ 一括払いにチェック

設定できたら登録ボタンにて設定内容を反映します。
これで、クレジットカード決済でテスト購入を行うための設定は完了です。

では、実際に購入してみましょう。

正しく設定できていれば、お支払方法の設定へ「クレジットカード決済」が追加されます。

gmo_11

無事カード情報入力画面へ遷移しました。

gmo_12

※ちなみにテスト用のカード情報も用意されており、GMO管理画面のドキュメントより確認することができます。

といことで、無事GMOの決済モジュールを導入することができました。

せっかく決済モジュールを導入しましたので、今後クレジット決済に関する語句の説明もできればと思います。

2014年10月10日金曜日

EC-CUBEの定数(パラメータ)設定について

SYSTEM_KDです。

前回の投稿で、次回はGMOの決済モジュール導入と書いたのですが、時間の都合で小ネタにします。

ということで、EC-CUBEの定数(パラメータ)設定(2.11系以降)についてという話になります。

EC-CUBEでパラメータ設定を変える場合、管理画面の「システム設定>パラメータ設定」より変えれると思いますが、この値がどこから取得されているかといいますと、もちろんデータベース上のテーブル「mtb_constants」なのですが、実際に動作するときには、このテーブルからは読み込まれていません。

では、どこから読み込まれているかといいますと、
data/cache/mtb_constants.php
というファイルから取得しています。

ですので、定数を直接変更したいという場合は、こちらをさわることになります。

ですが、このファイルはファイルがある場所から分かるかもしれませんが、キャッシュファイルになりますので、常にそのままではありません。
それこそ、管理画面からパラメータを更新すると、設定内容で書き換わってしまいます。

このままですと、わけがわからないと思いますので、整理しますと以下のような状態になっております。

[パラメータファイルにつてい]
まず、EC-CUBEインストール直後ですが、このタイミングでは、キャッシュフォルダへはパラメータのファイルがない状態になります。

では、キャッシュはどこから作成されるかといいますと、
data/mtb_constants_init.php
ファイルをもとに作成が行われます。

すなわち

1.EC-CUBEが動作開始

2.キャッシュのパラメータファイルを参照にいく

3.キャッシュにパラメータファイルがある場合は、パラメータファイルを読み込む。ファイルがない場合は、「data/mtb_constants_init.php」をキャッシュへコピーし読み込む

といった流れになっております。

ですが、上記とは別系統として、データベースへも定数情報を保持しており(mtb_constants)、管理画面よりパラメータの設定変更を行った場合は、このマスターの内容でキャッシュファイルを作成するといった流れになります。

ですので、カスタマイズにより、新たに定数値(パラメータ)を追加する場合は、「data/mtb_constants_init.php」へ追加すると共に、マスターテーブル「mtb_constants」へも同様に値を追加してやる必要があります。
また、それとともにキャッシュのファイルを削除してやるというのが、無難な変更方法になるかと思います。

2014年10月7日火曜日

導入側からみたEC-CUBE決済(モジュール)

SYSTEM_KDです。

今回は決済(モジュール)についての話。
EC-CUBEで使える決済はかなりの数がありますが、選択肢が多いと逆に選ぶのが大変になってしまいますね。

どの決済が良いかは、店舗や現行のサービスとの兼ね合いによって違ってくると思いますが、そういう視点ではなく、導入のしやすさに絞って考えてみると、ずばり!

EC-CUBE公式のEC-CUBEペイメントもしくは、GMOペイメントが一押しです!
(ちなみに、EC-CUBEペイメントとGMOペイメントのモジュールの中身は同じだったり・・・)

やはり、公式だけあって、決済モジュールとしての機能も導入のしやすさも抜群ですね。

基本的に、クレジット決済等を導入するには、色々な手順が必要です。

  1. クレジット決済を導入したい
  2. 決済代行会社の選定と決定
  3. 決済代行会社へ問い合わせて、テスト環境を提供してもらう
  4. EC-CUBEへ決済モジュールを導入しテスト環境でテスト
  5. 本番の決済環境へ接続変更し導入完了

本番環境しかない場合はどうするの?とか、色々とはしょってる部分もありますが、大雑把な流れとしては、この様な形かと思います。

基本的に「4.」の決済モジュールのダウンロードは、オーナーズストアより簡単に行えるかと思います。

ですが、「3.」の部分では、決済代行会社のテスト環境を利用するために、決済代行会社へ申し込みを行い、接続情報をもらう必要が有るため、すぐにはテストを開始できません。

(導入する側からしてみると、ちょっと試そうにもハードルが高くなりますね)

ですが、EC-CUBE公式決済モジュールを提供しているGMOさんは、24時間いつでも、ネットから登録するだけで、テスト環境をすぐに利用することができます!!

こんな感じですね。

gmo

導入目線で考えるとこれは、気軽にテストができて、かなりうれしいですね。

という、訳で導入目線で考えた場合に一番オススメできる決済は、EC-CUBE公式の決済になるかと思います。

完全に個人的な意見ですが、決済モジュールの導入を検討されている方の参考になればと思います。
(ちなみに、テスト環境の申し込みは、こちらから行うことができます)

ということで、せっかくなので次回辺り、実際にどうやってGMOモジュールを導入するのか?という話をやりたいと思います。

2014年10月5日日曜日

EC-CUBEプラグインでテンプレートを変更するサンプル

SYSTEM_KDです。

今回は、久々にプラグインを作成したいと思います。
作成するプラグインは、テンプレート変更プラグインになります。

これまで、テンプレートフックについて簡単に説明させて頂きましたが、やはり実際に動作するものがあった方がわかりやすいと思いますので、簡単なプラグインにはなりますが、作成したいと思います。

まず、プラグインの作成のため、(久々に)以前作成したプラグインのベースを利用したいと思います。
(ソースはこちらのになります)
(上記を作成した際の記事はこちらです)

ちなみに今回のプラグインは「おすすめ商品情報」ブロックのタイトル部分へおすすめ商品情報の最終更新日付を表示してやるといったものになります。

今回は以下の手順で進めたいと思います。

1.ファイル名および設定の整備

2.処理の追加

3.テンプレートの書き換え処理実装

ではさっそく、ダウンロードしてきたプラグインのベース(PluginBase.tar.gz)をどこかへ解凍し、ファイル名の変更と設定の整備を行いたいと思います。

おすすめ商品へ日付を追加するプラグインですので、「RecommendDate」プラグインという名前にしたいと思います。

ということで、「plugin_info.php」と「PluginBase.php」を開いてファイル名を「PluginBase」を「RecommendDate」へ置換します。

続いて、「plugin_info.php」の内容を今回のプラグインにそったものへ書き換えます。

class plugin_info{
/** プラグインコード(必須):プラグインを識別する為キーで、他のプラグインと重複しない一意な値である必要がありま. */
static $PLUGIN_CODE = "RecommendDate";
/** プラグイン名(必須):EC-CUBE上で表示されるプラグイン名. */
static $PLUGIN_NAME = "テンプレートと変更サンプル";
/** クラス名(必須):プラグインのクラス(拡張子は含まない) */
static $CLASS_NAME = "RecommendDate";
/** プラグインバージョン(必須):プラグインのバージョン. */
static $PLUGIN_VERSION = "0.1";
/** 対応バージョン(必須):対応するEC-CUBEバージョン. */
static $COMPLIANT_VERSION = "2.12.0";
/** 作者(必須):プラグイン作者. */
static $AUTHOR = "SYSTEM_KD";
/** 説明(必須):プラグインの説明. */
static $DESCRIPTION = "おすすめ商品情報ブロックのタイトルへ最終更新日時を設定";
/** プラグインURL:プラグイン毎に設定出来るURL(説明ページなど) */
static $PLUGIN_SITE_URL = "http://systemkd.blogspot.jp/";
/** ライセンス */
static $LICENSE = "LGPL";
}

これで、「1.ファイル名および設定の整備」は完了です。

次は処理を追加していきたいと思いますが、その前にEC-CUBEへインストールしておきましょう。

インストールすうるには、次のファイルを「tar.gz」で圧縮してプラグイン用のファイルにします。


  • logo.png
  • plugin_info.php
  • plugin_update.php
  • RecommendDate.php

後は、EC-CUBEの管理画面からインストールするだけです。

rd_02

ちなみに、上の画像で表示される情報は、「plugin_info.php」で設定したものですが、表示する際のデータは「plugin_info.php」から取得しているのではなく、データベースから取得しています。
(インストール時にDBへ格納されている)
どのテーブルに入っているかと言いますと、「dtb_plugin」テーブルになります。

インストールできたら、次へ進みたいと思います。


2.処理の追加

少し脱線しましたが、気を取り直して処理の追加へ進みたいと思います。

処理を追加するソースは、
data/downloads/plugin/RecommendDate/RecommendDate.php
になります。

今回はテンプレートの表示をフックしたプラグインになりますので、処理の介入点(フックポイント)としてテンプレートの表示をフックするように「register」へ処理を追加します。

function register(SC_Helper_Plugin $objHelperPlugin) {
// テンプレートトランスフォーム
$objHelperPlugin->addAction('prefilterTransform', array(&$this, 'prefilterTransform'));
}

ここで1点、定数の設定を変更しておきたいと思います。

変更するファイルは、
data/cache/mtb_constants.php
になります。

この定数の「SMARTY_FORCE_COMPILE_MODE」を「true」に設定します。

/** SMARTYコンパイルモード */
define('SMARTY_FORCE_COMPILE_MODE', true);

詳細な説明は別途行いたいと思いますが、この設定は、プラグインにてテンプレート変更を行う場合は、trueに設定しておいた方が何かと便利なものになります。

(定数の設定場所とかも、phpとcacheとDBがありちょっとややこしいので、そのうちまとめれたらと思います)

次に、実際の処理(おすすめ商品の最終更新日の取得)部分を実装したいと思います。

といっても、たいした処理ではないですが。。

取得処理は、グローバルフックへ実装したいと思いますので、下記のコードを「RecommendDate.php」へ追加します。

function preProcess(LC_Page $objPage) {
// 新着情報の最終更新日時取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$result = $objQuery->getRow("MAX(update_date) as max_update_date", "dtb_best_products");

// yyyy/mm/dd形式で設定
$this->bp_last_update = date("Y/m/d", strtotime($result['max_update_date']));
}

おすすめ商品が格納されているテーブル「dtb_best_products」から「update_date」の最大値を取得しているだけです。

処理は実装しましたので、今回のキモのテンプレートの変更部分に移ります。


3.テンプレートの書き換え処理実装

さきに、ソースをのせます。

function prefilterTransform(&$source, LC_Page_Ex $objPage, $filename) {
$objTransform = new SC_Helper_Transform($source);
$template_dir = PLUGIN_UPLOAD_REALDIR . 'PluginBase/templates/';
switch($objPage->arrPageLayout['device_type_id']){
case DEVICE_TYPE_MOBILE:
break;
case DEVICE_TYPE_SMARTPHONE:
break;
case DEVICE_TYPE_PC:
break;
case DEVICE_TYPE_ADMIN:
default:
if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}
break;
}
$source = $objTransform->getHTML();
}

実際、変更を行っている部分は「13行目~17行目」の以下の部分になります。
(今回はブロックの表示を変更するので、モバイルでもスマホでもPCでもない、部分に処理を記述しています)

if (strpos($filename, 'bloc/recommend.tpl') !== false) {
$html = "

";
$html .= "(最終更新日:" . $this->bp_last_update . ")

";
$objTransform->select('div#recommend_area h2')->appendChild($html);
}

では、この抽出部分について、順に説明していきます。

1行目ですが、今回はおすすめ商品ブロックのタイトルを変更しようとしていますので、変更を行うテンプレートファイルは「おすすめ商品ブロック」のテンプレートである、「data/Smarty/templates/default/frontparts/bloc/recommend.tpl」になります。
ですので、「bloc/recommend.tpl」の場合にテンプレートの変更処理を行う様な条件を設定しています。

2行目と3行目は、変更する内容(追加する表示内容)を設定しております。
ここで「preProcess」にて取得した、おすすめ商品の最終更新日を設定しています。

4行目ですが、ここがテンプレートの変更部分になります。
selectにて、「おすすめ商品ブロックのタイトル」を指定し、その要素の子として「2行目・3行目」のHTMLを追加しています。

これを実装してやり、ページを表示すると

rd_03

この様な感じで、おすすめ商品情報の右側へ最終更新日時が表示されます。
(とりあえず表示する形なので、ブロックの位置を変えた場合等は綺麗に表示されなくなります)

プラグインで実装しておりますので、試しにEC-CUBEの管理画面よりプラグインを無効化するとこの表示変更は反映されなくなります。

どうでしょうか?表示内容や表示方法によって難易度は変わってきますが、以外に簡単に表示を追加できたのではないでしょうか?

ということで、テンプレートを変更するプラグインのサンプル作成は終了です。
本日の成果物はこちらになります。