EC-CUBEへ文字サイズを変更するJavaScriptを追加する方法です。
１．jquery.js、jquery.cookie.jsをjsフォルダに格納する。
フォルダパス：/html/user_data/packages/default/js/
２．site_frame.tplのhaedの中でJavaScriptのファイルを指定する。
ファイルパス：/data/Smarty/templates/default/site_frame.tpl
＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.js"＞＜/script＞
＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.cookie.js"＞＜/script＞
＜script type="text/javascript" src="＜!--{$TPL_DIR}--＞js/jquery.cookie.js"＞＜/script＞
３．文字サイズを変更するボタンを用意してimageフォルダに格納する。
ファイルパス：/html/user_data/packages/default/image/fontsizechange.gif
４．style.cssをhtml/user_data/packages/default/css/に入れる。
ファイルパス：/html/user_data/packages/default/css/style.css
#fontsize-change{
position:absolute;
top:102px; left:560px;
width: 200px; font-size:10px;
}
#fontsize-change dl{
height: 28px;
overflow:hidden;
}
#fontsize-change dt{
float:left; width: 79px;
height: 28px; background:url(../img/header/fontsizechange.gif) no-repeat 0 0;
text-indent: -9999px;
}
#fontsize-change dd{
float: left; width:34px;
margin-right:5px;
}
#fontsize-change dd.l{
width:28px;
}
#fontsize-change dd a{
display: block; height: 28px;
text-indent:-9999px;
background-image:url(../img/header/fontsizechange.gif);
background-repeat:no-repeat;
}
#fontsize-change dd.m a {background-position:-79px 0;}
#fontsize-change dd.l a {background-position:-118px 0;}
#fontsize-change dd.xl a{background-position:-151px 0;}
#fontsize-change dd.m a:hover,#fontsize-change dd.m a:active,
#fontsize-chanfe dd.m a.cr{background-position:-79px 100%}
#fontsize-change dd.l a:hover,#fontsize-change dd.l a:active,
#fontsize-change dd.l a.cr{background-position:-118px 100%}
#fontsize-change dd.lx a:hover,#fontsize-change dd.lx a:active,
#fontsize-change dd.xl a.cr {background-position:-151px 100%}
５．site_frame.tplにJavaScriptの実行場所を書き込む。
ファイルパス：/data/Smarty/templates/default/detail.tpl
＜div id="fontsize-change"＞
＜script type="text/javascript"＞
//＜![CDATA[fontsize.setup();//]]＞
＜/script＞
＜/div＞
６．JavaScriptの実行ファイルを作成する。
ファイル名：fontsize.jp
var fontSize = {};
fontSize.setup = function() {
var s = '＜dl＞';
s +='＜dt＞ 文字サイズを変更＜/dt＞'
s +='＜dd class="m"＞＜a href="#" oneclick="fontSize.setStyle(￥'M￥') ; return false;"＞ 標準＜/a＞＜/dd＞';
s +=' ＜dd class="l"＞＜a href="#" oneclick="fontSize.setStyle(￥'L￥') ; return false;"＞ 大＜/a>＜/dd>' ;
s +=' ＜dd class="xl">＜a href="#" oneclick="fontSize.setStyle(￥'XL￥') ; return false;"＞ 最大＜/a＞＜/dd＞;
s +='＜/dl＞';
document.write(s);};
var fontSize = {};
/*---文字サイズ変更を実行する関数---*/
fontSize.setStyle = function(fValue) { var btn = $("#fontsize-change a");
$(btn).each(function() { this.className = ""; });
switch(fValue) {
case "L" : var value = "L"; btn[1].className = "cr"; break;
case "XL": var value = "XL"; btn[2].className = "cr"; break;
default: var value = "M"; btn[0].className = "cr"; break;
}
$.cookie("fontsize", value, { expires: 7, path: "/", domain: location.hostname, secure: false });
document.body.className = this.initClass;
$(document.body).addClass("fontsize" + value);};
/*---ドキュメントのロード時に呼び出す関数---*/
fontSize.init = function() {
く this.initClass = document.body.className;
var c = $.cookie("fontsize");
this.setStyle(c);
};
$(document).ready(function(){
fontSize.init(); });
８．作成したfontsize.jpをjsフォルダに格納する。
フォルダパス：/html/user_data/packages/default/js/
９．site_frame.tplのhaedの中でJavaScriptファイルの指定を追加する。
ファイルパス：/data/Smarty/templates/default/site_frame.tpl
を書き込む。
１０．import.cssを開いてstyle.cssを記入する。
ファイルパス：/html/user_data/packages/default/css/import.css
/*M*/
body.fontsizeM{font-size:12px}
*html body.fontsizeM{font-size:76%}
*:first-child+html body.fontsizeM { font-size:76%}
/*L*/
body.fontsizeL{font-size:14px}
*html body.fontsizeM{font-size:88%}
*:first-child+html body.fontsizeL { font-size:88%}
/*XL*/
body.fontsizeXL{font-size:16px}
*html body.fontsizeXL{font-size:100%}
*:first-child+html body.fontsizeXL { font-size:100%}
それでもできなかったらfontsize.jsを開きCookieに関するところを強制に文字化強いて動かせる
方法があります。
EC-CUBEはCookieの使用方法がややこしいためです。
この部分を文字化するのです。
まず ３８行目のところを文字化して無効にします。
そして４６行目のところ殻４９行目まで文字化して無効化します。
それでとりあえず動きます。
これで完了です。
作成者：李 禎桓
