ECコンサル アラタナはeコマースを中心とした「新たな○○を創造する」会社です!

【今日のEC-CUBEプラグイン】カートブロック明細表示プラグイン

EC-CUBEをご利用中の皆様、こんにちは。高見@フロントエンドエンジニアです。

シリーズでお送りします「今日のEC-CUBEプラグイン」第1回目は、「カートブロックに明細を表示するプラグイン」です。テキストは14ページをご覧ください。

え?何々?EC-CUBE?プラグインって?何言ってるの?高見こわい。とお思いの方に少しEC-CUBEとプラグインのお話をしてからスタートしたいと思います。

今更ながらEC-CUBEって?

EC-CUBEは、株式会社ロックオンが開発したECサイト構築システムECKitを元に、2006年9月1日にオープンソースとして公開されたものです。(出展:wikipedia

アラタナのECサイト構築パッケージ「カゴラボ」もEC-CUBEをベースにアラタナ独自のカスタマイズを盛り込んでパッケージ化したものです。

EC-CUBE × プラグイン

EC-CUBEはオープンソースとして公開されてから、何度もバージョンアップを重ねてきました。そして、ついに!Ver.2.12系より新機能としてプラグインが導入されました。WordPressやMovableTypeなどの他のCMSと同様に、プラグインのファイルを管理画面からインストールするだけで、簡単に機能の拡張ができます。EC-CUBEの公式サイトにあるオーナーズストアに既に沢山のプラグインが公開されています。

EC-CUBEオーナーズストア

「EC-CUBE」オーナーズストア より

ECサイト構築パッケージ「カゴラボ」もプラグイン機能を実装したEC-CUBE2.12系をベースに「カゴラボ4」を昨年リリースしました。もちろん、プラグイン機能を活かした構築ができるようになったわけです。カゴラボのご利用を検討されるお客様もご利用中のお客様も販売される商品は様々で、アパレル・食品・雑貨・コスメ・サプリメントetc…と業種も様々。しかし、ECサイトとして共通の機能は当然ありますので、そういった部分をプラグインで基本機能を作成しておき、お客様に合わせたデザイン、コーディングを行います。ケーキのスポンジだけ焼いておいて、デコレーションをお客様毎に変えるようなイメージ。それだけでもかなりの工数を削減できるようになりました。

こんなEC-CUBEのプラグインを作りたい

さてさて、前置きはこれぐらいにしておいてフロントエンドエンジニアである高見は、主にECサイトの表側の機能をカスタマイズするのを生業にしています。ですので、プラグインも当然JavaScriptやCSSを操作して「ECサイトとして」見た目を変えるようなプラグインを考えます。「ECサイトとして」と言ったのは、ECサイトのゴールは商品の購入(コンバージョン)ですので、そこに誘導するまでの使い勝手や商品の選びやすさが最優先と考えるべきで、派手にアニメーションしたりするようなプラグインではECサイトに向かないです。まぁ、プロモーション商品等は別でしょうけど、そういった類の物はスクラッチで構築したほうが良いでしょうね。フロントエンドエンジニアが作るECサイトのプラグインはあくまでコンバージョンを得るためのユーザビリティに重点をおきたいものです。

今日のEC-CUBEプラグインは、カートブロックにカートに入れた商品の明細を表示したいなぁと思い作ろうと考えました。EC-CUBE標準では、カートブロックは数量と金額の合計しか出ません。ということは、「カゴに何を入れたっけ?」と思った時に、いちいちカートの中を見るページに移動しないと中身の確認ができません。商材にもよりますが、僕は少なくとも買い物する時にネットショッピングでも普通にスーパーでお買い物する時でも、かごの中を見て買ったものを確認しながら買い物をします。

こういうのを作りたい。

EC-CUBEのカートブロックプラグイン

EC-CUBEのプラグインを作ってみた

では、材料です。(一人前)

  1. プラグインのインストール情報ファイル
  2. プラグインのメインクラス(インストールやアンインストール時などに動作させるプログラムが書いてある。)
  3. ロゴ画像(65×65)
  4. 管理画面で変更できるプラグイン設定用ファイル(config.php , config.tpl)
  5. 管理画面で変更できる設定ファイル(CSS等)
  6. 気遣い(少々)

こちらがプラグイン一人前の材料になります。ざっくりですけど。基本的にインストーラーだけであれば、1・2の材料があれば作ることができます。あとはそのプラグインに合わせて設定ファイルを作ったり、必要なファイル(CSSやJavaScript、PHPファイル等)を準備してインストール時に所定のディレクトリにコピーしたり必要であればDBにテーブルを追加したりするだけです。

これらの材料をまとめて、圧縮鍋に入れます。tar.gz形式に圧縮すれば完成です。この時、材料が2MB超えないようにしましょう。厳密ではないですが、インストールする時に材料が多すぎると鍋から噴き出るのでダメだよって怒られます。実際に吹きこぼれているの気づかず悩んでいた所、アシスタントの矢野さん(猫好き)に「先生、鍋から材料こぼれてますよ」と指摘を受けて気づく。

試食インストール

ではでは、実際にインストールしてみましょう。EC-CUBEの管理画面から[オーナーズストア]→[プラグイン管理]にてインストールを行います。tar.gzのファイルをアップロードするだけ。これだけでインストールがあっさり完了します。インストールが完了すると下図のようにプラグイン一覧に表示されます。この時プラグインのインストール情報ファイルで記載した情報(会社名やバージョンなどなど)が一覧で確認できます。

EC-CUBEプラグイン一覧

プラグイン独自の設定

このプラグインでは、大きく以下の設定ができるようにしてあります。

  • 表示する情報の表示・非表示切替
  • CSSの設定

出す項目の表示・非表示やCSSの設定が管理画面のプラグイン設定からできます。ここで気遣いを少々。CSSの設定が管理画面からできれば、CSSの知識さえあればわざわざFTP等で接続して編集する必要がなくなるなぁと思いました。ですので、カートブロックが表示されるページCSSの設定。

カゴラボ4の標準デモサイトに入れるとこんな感じです。

カゴラボのカートブロック

おしゃれ~^^。カートのセッション情報を表示しているだけなんですけどね。けど、サイドバーにブロック配置しておけばカートの中身も一目瞭然。商品名と金額だけ出したいとか、サムネイルを出さずにテキストだけ表示とか設定画面でコントロールして、最後にCSSで美味しく盛りつけましょう。

出来上がったプラグインの公開

最後にうちの開発のボス達の試食承認をもらって公開します。アラタナの場合、管理画面側をカスタマイズする開発チームと、Webサイト側をカスタマイズするフロントエンドチームと分かれているので、プラグインもなるべく開発チームのカスタマイズに影響がないように作らなければいけません。開発チームのボス、小田さん森藤さんに確認をとって公開としました。

EC-CUBEのオーナーズストアより登録申請を行うと、ロックオン社の審査が入り、合格したものだけがダウンロードできるようになります。ちなみに、プラグインインストールや動作時に「Fatal error」や「Warning」があった場合は審査に通りません。(まぁ、Fatal errorが出たら動作しないので当たり前ですけど…)「Warning」が表面上わかりにくいので、公開申請前にテストしてログにWarningがないか確認しましょう。

こちらが出来上がったプラグインです。(ロックオン社公式サイトにて公開)使えそうですね~。

プラグインのダウンロードサイトへ

今回使ったテキスト

参考サイト・ダウンロードサイト

この記事を書いた人

高見 和也

高見 和也

職種 :

プログラマー,フロントエンドエンジニア,
特にコーディング、プログラム、SEOについての執筆を行います。
「EC-CUBE公式ガイドブック」等の執筆経験あり。

これまでに書いた記事

アラタナニュース