2012年2月25日カテゴリー:

EC-CUBE:ソーシャルブックマークとフォントサイズの切り替え

内容を新しく書き換えました。
↓こちらの方を見ていただいた方がよろしいかと思います。

EC-CUBE:フォントサイズの切り替え

EC-CUBE:FacebookやTwitterなどのソーシャルブックマークの表示

いいね!やツイート、Google+などのソーシャルボタンを表示すると同時に、文字サイズを変更できるボタンを設定します。

(1)■html/jsフォルダに「jquery.socialbutton」と「jquery.font_size」フォルダを追加
jquery.socialbuttonの中身→jquery.socialbutton-1.8.1.js ssl_jquery.socialbutton-1.8.1.js
jquery.font_sizeの中身→font_size.js jquery.cookie.js

(2)■data/Smarty/templates/default/site_frame.tpl
————————————————








————————————————

(3)ブロックを新規作成する

★ブロックは、ヘッダー部の下「TOP COLUMN」のエリアに配置する。トップページ・商品一覧ページ・商品詳細ページなどに配置。

▼管理画面>デザイン管理からブロックを作成するときは、下記の①~③は飛ばして、④のテンプレートのコードを貼り付ける。⑤も飛ばす。
————————————————
ブロック名:ソーシャルボタン・フォントサイズ
ファイル名:socialbtn_fontsz
————————————————

▼今後、ブロックに独自機能をもたせる可能性がある場合は、拡張ファイル等の作成から行う。

 コールPHP ■html/frontparts/bloc/socialbtn_fontsz.php
————————————————
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
————————————————

 拡張クラス ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_Ex.php
————————————————

————————————————

 ページクラス ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Socialbtn_fontsz_.php
————————————————
action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
————————————————

 テンプレート ■data/Smarty/templates/default/frontparts/bloc/socialbtn_fontsz.tpl
————————————————





————————————————

 データベースdtb_blocテーブルに追加する
————————————————
device_type_id:10(PC用ページに追加、携帯は1、スマホは2)
bloc_id:10(環境に応じて)
bloc_name:ソーシャルボタン・フォントサイズ
tpl_path:socialbtn_fontsz.tpl
filename:socialbtn_fontsz
create_date :作成日
update_date:更新日
php_path:frontparts/bloc/socialbtn_fontsz.php
deletable_flg:0
————————————————

(4)cssファイルを編集する
■html/user_data/packages/default/css/contents.css(変更)
————————————————
#topcolumn ,
#bottomcolumn ,
#footerbottomcolumn {
margin: 0 auto;
padding:10px 0 0 15px;
width: 950px;
background: #fff;
text-align: left;
}

↓変更

#topcolumn {
margin: 0 auto;
width: 950px;
background: #fff;
text-align: left;
}

#bottomcolumn ,
#footerbottomcolumn {
margin: 0 auto;
padding: 15px;
width: 950px;
background: #fff;
text-align: left;
}
————————————————

■html/user_data/packages/default/css/bloc.css(適当な箇所に追記)
————————————————
/* ===============================================
▼ソーシャルブックマークとフォントサイズの切り替え
=============================================== */
#socialbtn_fontsz {
background-color:#F7F7F7;
border:1px solid #CCC;
padding:5px 5px 0 5px;
}
#socialbtn_fontsz #socialbtn_box {
float:left;
}
#socialbtn_fontsz #fontsize_box {
float:right;
width:140px;
text-align:right;
background:url(../img/fontsize/fontsize_bg.png) no-repeat;
}
#socialbtn_box table {
padding:0;
margin:0;
border:none;
}
#socialbtn_box table td {
padding:0 5px 0 0;
border:none;
}
#fontsize_box ul li {
display:inline;
margin:0;
padding:0;
cursor:pointer;
}
#fontsize_box ul li #standard {
margin-left:-5px;
}
————————————————

(5)フォントサイズ変更を「CONTENTS」エリアに適用する。
classに「changeArea」を設定する。
■data/Smarty/templates/default/site_main.tpl
————————————————

changeArea“>
————————————————

(6)フォントサイズ等の指定は、font_size.jsで行う。

(7)mixi登録キーについて
① mixi Developer Center http://developer.mixi.co.jp/connect/developer_registration/developer/
② mixiアカウントとメール認証(携帯電話)が必要
③ mixi Developer Centerの右上「ログイン」
④ mixi Pluginをクリック→新規サービス追加