プロフィール
‘カスタマイズ’のカテゴリ一覧
【EC-CUBEカスタマイズ】おすすめ商品登録数の上限を変更する
おすすめ商品をTOPページに表示できる便利な「オススメ管理」機能ですが、標準では8個までしかおすすめ商品を登録できません。
実はとても簡単にこの登録数を増やすことが出来ます。
しかも、コードをいじる必要もなく管理画面から変更できるのです！
変更は管理画面から！
管理画面「システム設定」の「パラメータ設定」を変更します。
赤文字で「設定値によってはサイトが機能しなくなる場合もありますので、十分ご注意下さい。」と書いてあります。
このパラメータ類を元にしてEC-CUBEが動いているので、確証のないパラメータは操作しないでください。もし操作することになったとしても、変更前の数値を記録しておくことをおすすめします。
おすすめ設定の表示数はどこにあるのかというと、RECOMMEND_NUM というパラメータです。フォームの上側に「オススメ商品表示数」と書いてあります。
※以下画像
標準設定では「8」になっているはずです。これを「10」にしてみましょう。
管理画面「コンテンツ管理」の「オススメ管理」で確認
変更後に「オススメ管理」ページを開くと、今まで8個だったフォームが10個に増えていると思います。実際に登録すると表示も10個まで表示されます。
PHPもHTMLもいじらないで、とても簡単にカスタマイズできます。お悩みの方はぜひお試しください。
【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（ユーザーインターフェイス）が必要になってくるのです。
商品画像のポップアップをお洒落に！「FancyBox」
EC-CUBEでは、任意で拡大サイズの商品画像をアップロードすることが出来ます。
アップされた画像は商品詳細ページから、ポップアップで見ることができます。
このポップアップをオシャレでクールなものに変えることで、ユーザーに与える印象も良くなることも間違いない！？
まずはjQueryの最新版をダウンロード
EC-CUBEもjQueryを使っていますが、バージョンが古いようです。
最新版をダウンロードしましょう。
もとからあるjQueryファイルを上書きします。
※私が上書きして確認した限りでは問題は起きませんでした。不安な方は別名で保存して使用してください。
標準だと以下のパスにあります。
/html/user_data/packages/default/js/jquery.js
これを上書きします。
FacyBoxのダウンロード
次にfancyboxのダウンロードを行います。
http://fancy.klade.lv/
※右上のZIPをダウンロードしてください。
解凍したらfancyboxのディレクトリごと、default以下の場所にコピーしてください。
/html/user_data/packages/default/fancybox/
Smatyテンプレートの書き換え
jQueryは他の場所でも使えるので、テンプレート側に加えてしまいましょう。
下記のテンプレートファイルを開きます。
/data/Smarty/templates/default/site_frame.tpl
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"><!-- これを追加 -->
<title><!--{$arrSiteInfo.shop_name|escape}-->/<!--{$tpl_title|escape}--></title>
商品詳細ページを書き換え（FancyBoxの追加）
商品詳細ページは管理画面のデザイン管理から書き換えます。
「デザイン管理」->「商品詳細ページ」->「メイン編集」
下記コードを頭の方に加える。
<link rel="stylesheet" href="<!--{$TPL_DIR}-->fancybox/fancy.css" type="text/css" media="screen">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.fancybox-1.0.0.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->fancybox/jquery.pngFix.js">
<!–★画像★–>の下あたり。
<!--★画像★-->
<a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
<img src="<!--{$arrFile[$key].filepath}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" />
</a>
<p>
<!--★拡大する★-->
<a href="<!--{$arrFile[$large_key].filepath}-->"><!-- リンク先を変更 -->
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
</a>
</p>
<!–拡大写真がある場合ここから–>のしたあたり。
<!--{if $arrFile[$lkey].filepath != ""}-->
<a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
<!--{/if}-->
<!--サブ画像-->
<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|escape}-->" width="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" height="<!--{$smarty.const.NORMAL_SUBIMAGE_WIDTH}-->" />
<!--{if $arrFile[$lkey].filepath != ""}-->
</a>
<p>
<a href="<!--{$arrFile[$lkey].filepath}-->"><!-- リンク先を変更 -->
<img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" />
</a>
</p>
<!--{/if}-->
画像を挟む<A>タグを既存のものから、
<a href=”<!–{$arrFile[$lkey].filepath}–>”>
に書き換えるだけです。
これでファンシーでクールな商品画像ポップアップに変わりますよ。
ぜひお試しください。