EC厨房プログラマーブログ EC-CUBEやWordPressをわかりやすく紹介

【EC-CUBEカスタマイズ】オリジナルメールを送信する

ECサイトを運営していると、もっとカスタマイズされたメールを出したいと考える人もいるでしょう。
EC-CUBEで独自のメール実装を行う方法をご紹介します。

管理者にメールを飛ばす

これはレポートメールとして使える技です。
例えば、1日の終わりに本日の売上などを送信したり、などにも使えます。

編集するファイルは SC_Helper_Mail_Ex.php

SC_Helper_Mail_Ex.php は /data/class_extends/helper_extends/ の中にあります。
中を開くと解りますが、クラスの定義以外何も書いてません。なぜならば、このファイル自体がカスタマイズのためにあるものだからです。
extends のファイルに追加するだけで用が済むのであれば、メンテナンスのことも考えて出来るだけ、class_extends内のファイルをカスタマイズするように心がけるといいでしょう。

それでは適当にメソッドを追加します。
今回はサンプルですので、商品を受注したら、管理者宛におめでとうメールを送るというどうしようもないものを作ります。
/data/class_extends/helper_extends/SC_Helper_Mail_Ex.php

function sfSendCongratulationMail() {
    // サイト情報を取得
    $objSiteInfo = new SC_SiteInfo();
    // サイト管理者のメールアドレスを送信先に指定
    $to      = $objSiteInfo->data['email01'];
    $subject = "【注文キター！】おめでとう " . date("Y/m/d H:i:s");

    // 以下メール本文 「\n」は改行文字
    $body = "おめでとうございます！\n\nついに収益が上がりますね。";

    $this->sfSendMail($to, $subject, $body);
}

注文完了ページにて、上記メソッドを実行させます。
/data/class/pages/shopping/LC_Page_Shopping_Complete.php

// 91行目あたり
// 完了メール送信
if($order_id != "") {
    $mailHelper->sfSendOrderMail($order_id, '1');
    // ここに追加
    $mailHelper->sfSendCongratulationMail();
}

これでテストで注文すると、キター！ってメールが来ます。
今回のサンプル自体は何の役にも立ちませんが、中身を変更するだけ充分に実用に耐えるものになるでしょう。
シンプルなカスタマイズながら、かゆいところに手を届かせる技だと思います。

【EC-CUBEカスタマイズ】フォームエラー処理をjQuery Validationでノンストレスに

画面遷移無しでフォームのエラーチェックをする方法をご紹介しましょう。
jQueryプラグインの「Validation」を使うことで簡単に実現できます。

下記サイトのDownloadリンクからダウンロードしてください。
bassistance.de >> jQuery plugin: Validation
jQuery Validationのデモ

こちらのサイトで日本語用エラーメッセージファイルをダウンロードしてください。
真ん中辺りの「messages_ja.js」です。
jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化

通常の使い方ならば上記のサイトを参考にしてもらえれば大丈夫です。
下記ではEC-CUBEの商品コメントフォームにjQuery Validation機能を付け加えてみたいと思います。

Validationのセット

ダウンロードしたValidateionのフォルダの中から下記ファイルを探してください。

• jquery.js（EC-CUBE付属のものより新しい1.2.6です）
• jquery.form.js
• jquery.validate.js

上記3ファイル＋messages_ja.jsを下記ディレクトリに入れます。
/html/user_data/packages/default/js/

テンプレートを修正

EC-CUBEのテンプレートを修正します。
今回適応するのは商品詳細コメントのフォームですのでパスは以下の通りとなります。
/data/Smarty/templates/[テンプレート名]/products/review.tpl

form要素にIDを追加

<form id="form-post" name="form1" method="post" action="<!--{$smarty.server.PHP_SELF|escape}-->">

93行目あたりに下記コードを追加

<!-- ここから -->
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.form.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.validate.pack.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/messages_ja.js">

<!-- ここまで -->
<!--{include file="`$smarty.const.TEMPLATE_DIR`popup_footer.tpl"}-->

各フォームのclassに、指定したい条件を入れます。
例えば「投稿者名」は必須入力なので、requiredクラスをinput要素に加えます。
ホームページアドレスの必須項目ならば、urlクラスを追加すればOKです。
最大文字数を指定したければ、maxlengthに値を入れてください。

これで完了です。
サンプルサイトにてデモがあります。お試しください。

なぜAjax的なフォームチェックが必要か

フロント側でバリデーションチェックを行うからといって、バック側を外すわけではなく、実装的には二度手間かもしれません。
しかし、実際に使ってもらえれば解りますが、とてもユーザーフレンドリーなフォームになります。

ECサイトはフォームの打つ量多いので、出来るだけユーザーのストレスを軽減できる仕組みを採用する必要があり、そのためにAjax的なUI（ユーザーインターフェイス）が必要になってくるのです。

詳しいドキュメントはこちら。