EC-CUBEカゴに入れるボタンで画面が遷移しない方法完結編

EC-CUBEカゴに入れるボタンで画面が遷移しない方法　完結編

2012年5月18日 10:58

CSS,jQuery,Smarty,ver.2.11

このシリーズも3作目となりますが、いよいよ完結編となりました。

無い知恵を絞らず、他所の情報で何とかなってしまったので、なんの成長にもなりませんが、便利なものは便利ですし、探しだしたという力量もまた、いいものだと考えます。
というわけで、ご紹介。

この記事は最終更新日から1年以上が経過しています。

天のお恵みの紹介

参考記述：EC-CUBE：カゴに入れた直後にカート画面に飛ばない。アラートボックスの表示方法。 | ITOBEN STYLE Blog

改善編でも紹介させて頂いたブログですが、僕がやりたい事をピンポイントで紹介してくれていました。
とてもありがたく感謝しております。

これ以外にも、真似したくなるようなカスタマイズがなされているので、今後も追いかけていこうと思います。

改善編に少し手を加えるだけ

では、実践にまいります。
まず、以下の記事と同じ状態まで持って行って下さい。
C-CUBEカゴに入れるボタンで画面が遷移しない方法　改善編

普通のアラートが出せる状態になったら、今回のメインである、jQuery Notyを利用して、アラートがフェードインしたり、背景画像をつけたりする機能を追加しましょう。

まずはダウンロード。
Noty ダウンロードページ

解凍したら、フォルダの中にある以下の3ファイルを新規フォルダに入れ、フォルダ名をjquery.notyに変更。
jquery.noty.css
jquery.noty.js
noty_theme_default.css

そのフォルダを、/html/js/の中にアップ。

data/Smarty/templates/default/site_frame.tpl
適当な場所に以下を追加。

<link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/jquery.noty.css" />
<link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/noty_theme_default.css" />
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/jquery.noty.js"></script>

最後に以下。
/data/Smarty/templates/default/products/detail.tpl/data/Smarty/templates/default/products/list.tpl
料ファイルとも<▲CONTENTS>の後を以下に変更。

<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
noty({"text":'カゴに商品が追加されました。',"layout":"center","animateOpen":{"opacity":"toggle"},"animateClose":{"opacity":"toggle"},"speed":500,"timeout":900,"closeOnSelfClick":false});
</script>
<!--{/if}-->

これで表示されるはずだとされています。
しかし、以下をご覧ください。

意外な落とし穴

まず、僕がこの穴に嵌ったわけですが、EC-CUBEをデフォルトでインストールして、そのまま特に変更をしてない人にも同じように嵌ると思うので説明しておきます。

このjQuery Notyというものは、EC-CUBEに入っている、/html/jsjquery-1.4.2.min.jsでは動きません。

おかしいな、動かないな、となっている人は、最新版のjquery-1.7.2.min.jsをダウンロードして、アップしましょう。
jquery-1.7.2.min.js　ダウンロード

もちろん、data/Smarty/templates/default/site_frame.tplの修正も忘れずに。

jQuery Noty　カスタマイズ

表示はされるようになったわけですが、多少の装飾はしたいという人の為に、jQuery Notyのカスタマイズ方法を紹介します。

Noty Creator

ボタンがいくつもあるので、説明します。
Layout：アラートの表示位置。色々と試しましょう。
Type：種類ですが、色合いが変わるだけのようです。CSSでできることなので、特に気にしません。
Animate – Open：アラートを表示する時の動きの設定です。スライドしたり、フェードインしたり。
Animate – Close：アラートが消える時の動きの設定です。
Speed：アラートを表示する瞬間の動きの速さです。数値が小さいほど動きが速いです。
Timeout：アラートが消えるまでの時間です。数値が大きいほど、長く表示します。
Close Button：×印のクローズボタンの有無です。trueで付加されます。
Close on Click：アラート全体がボタン化し、クリックすると消せる設定です。trueで付加されます。
Close on Hover：アラート全体がボタン化し、マウスを乗せるだけで消せる設定です。trueで付加されます。
Modal：画面が暗転し、アラートが浮かび上がる設定です。trueで付加されます。
OnShow：よくわかりません。function(){}とか、よくわかりません。
onClose：上に同じく、よくわかりません。
Get Code：上で設定したもののコードを表示します。コピーして貼り付けましょう。
Run It：上で設定したものをテスト表示します。こちらでどんな表示になるかを、一つ一つ確かめましょう。

さらに、CSSでカスタマイズしてみましょう。

上の画像のように、アラート背景を黒っぽく、文字を白に、左端に画像を加えたいときは、CSSを以下のように修正します。
/html/js/jquery.noty/noty_theme_default.css

/* noty bar */
.noty_bar.noty_theme_default {
background: url('/favicon.gif') no-repeat 5px;
font-size: 20px;
padding: 5px 10px 5px 30px; 
}

.noty_bar.noty_theme_default.noty_layout_center .noty_message,
.noty_bar.noty_theme_default.noty_layout_topLeft .noty_message,
.noty_bar.noty_theme_default.noty_layout_topRight .noty_message,
.noty_bar.noty_theme_default.noty_layout_bottomLeft .noty_message,
.noty_bar.noty_theme_default.noty_layout_bottomRight .noty_message {
font-size: 14px;
font-weight: bold;
color:#fff;
	}
	
/* noty_alert */
.noty_bar.noty_theme_default.noty_alert {
background-color: #3b3b3b;
border-color: #000;
}

以上です。