ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBE2.12:インフォメーション(ご注文の流れ等)ブロックを作成する 2012年10月16日カテゴリー: EC-CUBEデザインテンプレート EC-CUBE2.12:インフォメーション(ご注文の流れ等)ブロックを作成する 特定商取引法に関するデータ等をブロックで表示し、ページに配置できるようにする。 さらに、本サイトの下記カスタマイズを表示。(カスタマイズを実装しないとエラーになる可能性有り) ▼配送方法の指定で配送業者の送料の詳細を表示 https://itoben.com/style/617.html ▼送信メールのテンプレートを追加し、選択した支払い方法を自動表示 https://itoben.com/style/561.html ▼ここでのカスタマイズファイルをすべてダウンロードできます。 必要な箇所だけコピーしてご利用ください。 他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。 こちらから(facebookユーザーのみ) サンプルはこちら トップページのボトムカラムに配置 商品一覧ページのメインカラムに配置 1 ファイルの作成 (1)■html/frontparts/bloc/info.php [php] blocItems = $params[‘items’]; register_shutdown_function(array($objPage, “destroy”)); $objPage->init(); $objPage->process(); ?> [/php] (2)■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Info_Ex.php [php] [/php] (3)■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Info.php [php] arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData(); } /** * Page のプロセス. * * @return void */ function process() { $this->action(); $this->sendResponse(); } /** * Page のアクション. * * @return void */ function action() { // データベースから取得 $objQuery =& SC_Query_Ex::getSingletonInstance(); $this->arrRet = array(); $this->arrRetMulti = array(); $this->arrRetMulti2 = array(); //支払い情報を取得 $arrRet = $objQuery->select(‘*’,’dtb_payment’,’del_flg = 0′); //データベースから取得できたか if(isset($arrRet)){ $this->arrRet = $arrRet; } //配送業者名を取得 $arrRetMulti = $objQuery->select(‘*’,’dtb_deliv’,’del_flg = 0 and product_type_id = 1′); //データベースから取得できたか if(isset($arrRet)){ $this->arrRetMulti = $arrRetMulti; } //配送業者の配送時間を取得 $arrRetMulti2 = $objQuery->select(‘*’,’dtb_deliv join dtb_delivtime on dtb_deliv.deliv_id = dtb_delivtime.deliv_id’,’dtb_deliv.del_flg = 0 and dtb_deliv.product_type_id = 1′); //データベースから取得できたか if(isset($arrRet)){ $this->arrRetMulti2 = $arrRetMulti2; } } /** * デストラクタ. * * @return void */ function destroy() { parent::destroy(); } } ?> [/php] (4)■data/Smarty/templates/default/frontparts/bloc/info.tpl [php] ご注文の流れ ご注文 「カゴに入れる」ボタンをクリックすると「現在のカゴの中」に数量と金額が表示されますので「カゴの中を見る」ボタンをクリックしてください。 お客様情報 「購入手続きへ」ボタンをクリック後、会員登録がお済みの方はログインしてください。登録されていない方は、登録をお願いします。登録せずに購入することも可能です。 購入手続き お届け先の指定やお支払い方法等をご入力いただきましたら、内容をご確認の上、ご注文完了ページへお進みください。当店より受付確認メールが自動配信されます。 入金・発送 当店で入金確認ができ次第、入金確認メールを配信するとともに商品の発送準備を進め、発送が完了しましたら、メールでお知らせいたします。 インフォメーション お支払いについて 当店では、 、 をご用意しております。 返品・交換について 送料について 送料は無料です。 「送料を表示」をクリックしてご覧ください。 ■(※ 円以上お買上げいただきますと送料無料になります。 ※ 個以上お買上げいただきますと送料無料になります。 配送について 配送は、 、 でお届けします。 地域や商品の大きさによりましては、物流会社が変更になることもございますが、何卒ご了承ください。 ご利用案内 お問い合わせは、“>メール、お電話、FAXで受け付けております。 〒– TEL –– FAX –– ▼営業時間 ・ネットでのご注文は24時間受け付けております。 ・お電話でのお問い合わせは下記の時間帯にお願いします。 [/php] 2 データベースにブロックを登録する。 [php] INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 18, ‘インフォメーション’, ‘info.tpl’, ‘info’, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, ‘frontparts/bloc/info.php’, 0); [/php] 3 画像を登録する。 ■img/icon/ico_kago.png ■img/icon/ico_customer.png ■img/icon/ico_card.png ■img/icon/ico_delive.png ■img/icon/ico_arrow_info.png ■img/background/bg_info_title2.png 2px×3pxの小さい画像なので、ここで表示できません。下記アドレスからダウンロード。 https://itoben.com/style/wp-content/uploads/2012/10/bg_info_title2.png 4 CSS 追加 [css] /* =============================================== ▼ご注文の流れ・インフォメーション =============================================== */ /*共通*/ #info_area, #info_area2 { margin-bottom:15px; } .title_info { background-color:#F7F7E6; color:#333; border:#CCC 1px solid; font-size: 14px; font-weight: bold; text-align:center; padding:3px 0; } /*ご注文の流れ*/ #info_area .step_box { width:25%; float:left; } #info_area .step { margin:0 5px; } #info_area .bloc_body { padding:10px 0 5px 0; border:1px solid #ccc; border-top:none; } #info_area .step .title, #info_area .step .title_last { font-size:14px; background:url(../img/icon/ico_arrow_info.png) no-repeat center right; padding-left:5px; margin-bottom:5px; min-height:16px; } #info_area .step .title_last { background:none; } #info_area .step_box .image { padding:5px 0; text-align:center; background-color:#EFEFEF; } #info_area .step_box .text { border:5px solid #EFEFEF; border-top:none; padding:5px 0 5px 5px; font-size:90%; letter-spacing:1px; min-height:120px; /*テキストエリアの高さ調整*/ } /*3カラム時のテキストエリアの高さ調整*/ #three_maincolumn #info_area .step_box .text { min-height:160px; } /*インフォメーション*/ #info_area2 .bloc_body { padding:10px; padding-top:10px; border:1px solid #ccc; border-top:none; } #info_area2 .box { margin-bottom:10px; } #info_area2 #left { float:left; width:48%; } #info_area2 #right { float:right; width:48%; } #info_area2 .title2 { background:url(../img/background/bg_info_title2.png) repeat-x bottom; padding-bottom:6px; margin-bottom:5px; } #info_area2 h3 { background:url(../img/icon/ico_arrow_04.gif) 0 7px no-repeat; padding-left:12px; color:#818129; font-size:110%; } #info_area2 .box #comment { padding-bottom:3px; margin-bottom:10px; border-bottom: #999 1px dotted; } #info_area2 .box .method { font-weight:bold; padding-left:12px; background:url(../img/icon/ico_arrow_03.gif) 0 3px no-repeat; } #info_area2 .box .site_ex { margin:0 0 10px 12px; } #info_area2 .box .image { margin:-5px 0 10px 0; } #info_area2 #shop { border:1px solid #999; background-color:#F7F7F7; padding:3px; margin-top:5px; } /* bottomcolumnに配置したとき */ #bottomcolumn #info_area { /*ご注文の流れを左寄せ*/ float:left; width:32%; } #bottomcolumn #info_area2 { /* インフォメンションを右寄せ */ float:right; width:66%; } #bottomcolumn #info_area .step_box { /* ご注文の流れの各ボックス 横幅と左寄せを解除 */ clear:both; width:100%; float: none; margin-bottom:10px; } #bottomcolumn #info_area .step .title, #bottomcolumn #info_area .step .title_last { /* 黄色矢印を非表示 */ background:none; background-color:#EFEFEF; } #bottomcolumn #info_area .image { float:left; width:80px; background: none; } #bottomcolumn #info_area .text { float:right; width:65%; border: none; min-height:90px; /*テキストエリアの高さ調整*/ } [/css]
特定商取引法に関するデータ等をブロックで表示し、ページに配置できるようにする。
さらに、本サイトの下記カスタマイズを表示。(カスタマイズを実装しないとエラーになる可能性有り)
▼配送方法の指定で配送業者の送料の詳細を表示
https://itoben.com/style/617.html
▼送信メールのテンプレートを追加し、選択した支払い方法を自動表示
https://itoben.com/style/561.html
▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)
サンプルはこちら
トップページのボトムカラムに配置
商品一覧ページのメインカラムに配置
1 ファイルの作成
(1)■html/frontparts/bloc/info.php
[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]
(2)■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Info_Ex.php
[php]
[/php]
(3)■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Info.php
[php]
arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}
/**
* Page のアクション.
*
* @return void
*/
function action() {
// データベースから取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$this->arrRet = array();
$this->arrRetMulti = array();
$this->arrRetMulti2 = array();
//支払い情報を取得
$arrRet = $objQuery->select(‘*’,’dtb_payment’,’del_flg = 0′);
//データベースから取得できたか
if(isset($arrRet)){
$this->arrRet = $arrRet;
}
//配送業者名を取得
$arrRetMulti = $objQuery->select(‘*’,’dtb_deliv’,’del_flg = 0 and product_type_id = 1′);
//データベースから取得できたか
if(isset($arrRet)){
$this->arrRetMulti = $arrRetMulti;
}
//配送業者の配送時間を取得
$arrRetMulti2 = $objQuery->select(‘*’,’dtb_deliv join dtb_delivtime on dtb_deliv.deliv_id = dtb_delivtime.deliv_id’,’dtb_deliv.del_flg = 0 and dtb_deliv.product_type_id = 1′);
//データベースから取得できたか
if(isset($arrRet)){
$this->arrRetMulti2 = $arrRetMulti2;
}
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>
[/php]
(4)■data/Smarty/templates/default/frontparts/bloc/info.tpl
[php]
ご注文の流れ
インフォメーション
お支払いについて
、
をご用意しております。
返品・交換について
送料について
「送料を表示」をクリックしてご覧ください。
■(※ 円以上お買上げいただきますと送料無料になります。
配送について
、
でお届けします。
地域や商品の大きさによりましては、物流会社が変更になることもございますが、何卒ご了承ください。
ご利用案内
〒–
TEL ––
FAX ––
・ネットでのご注文は24時間受け付けております。
・お電話でのお問い合わせは下記の時間帯にお願いします。
[/php]
2 データベースにブロックを登録する。
[php]
INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 18, ‘インフォメーション’, ‘info.tpl’, ‘info’, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, ‘frontparts/bloc/info.php’, 0);
[/php]
3 画像を登録する。
■img/icon/ico_kago.png
■img/icon/ico_customer.png
■img/icon/ico_card.png
■img/icon/ico_delive.png
■img/icon/ico_arrow_info.png
■img/background/bg_info_title2.png
2px×3pxの小さい画像なので、ここで表示できません。下記アドレスからダウンロード。
https://itoben.com/style/wp-content/uploads/2012/10/bg_info_title2.png
4 CSS 追加
[css]
/* ===============================================
▼ご注文の流れ・インフォメーション
=============================================== */
/*共通*/
#info_area, #info_area2 {
margin-bottom:15px;
}
.title_info {
background-color:#F7F7E6;
color:#333;
border:#CCC 1px solid;
font-size: 14px;
font-weight: bold;
text-align:center;
padding:3px 0;
}
/*ご注文の流れ*/
#info_area .step_box {
width:25%;
float:left;
}
#info_area .step {
margin:0 5px;
}
#info_area .bloc_body {
padding:10px 0 5px 0;
border:1px solid #ccc;
border-top:none;
}
#info_area .step .title, #info_area .step .title_last {
font-size:14px;
background:url(../img/icon/ico_arrow_info.png) no-repeat center right;
padding-left:5px;
margin-bottom:5px;
min-height:16px;
}
#info_area .step .title_last {
background:none;
}
#info_area .step_box .image {
padding:5px 0;
text-align:center;
background-color:#EFEFEF;
}
#info_area .step_box .text {
border:5px solid #EFEFEF;
border-top:none;
padding:5px 0 5px 5px;
font-size:90%;
letter-spacing:1px;
min-height:120px; /*テキストエリアの高さ調整*/
}
/*3カラム時のテキストエリアの高さ調整*/
#three_maincolumn #info_area .step_box .text {
min-height:160px;
}
/*インフォメーション*/
#info_area2 .bloc_body {
padding:10px;
padding-top:10px;
border:1px solid #ccc;
border-top:none;
}
#info_area2 .box {
margin-bottom:10px;
}
#info_area2 #left {
float:left;
width:48%;
}
#info_area2 #right {
float:right;
width:48%;
}
#info_area2 .title2 {
background:url(../img/background/bg_info_title2.png) repeat-x bottom;
padding-bottom:6px;
margin-bottom:5px;
}
#info_area2 h3 {
background:url(../img/icon/ico_arrow_04.gif) 0 7px no-repeat;
padding-left:12px;
color:#818129;
font-size:110%;
}
#info_area2 .box #comment {
padding-bottom:3px;
margin-bottom:10px;
border-bottom: #999 1px dotted;
}
#info_area2 .box .method {
font-weight:bold;
padding-left:12px;
background:url(../img/icon/ico_arrow_03.gif) 0 3px no-repeat;
}
#info_area2 .box .site_ex {
margin:0 0 10px 12px;
}
#info_area2 .box .image {
margin:-5px 0 10px 0;
}
#info_area2 #shop {
border:1px solid #999;
background-color:#F7F7F7;
padding:3px;
margin-top:5px;
}
/* bottomcolumnに配置したとき */
#bottomcolumn #info_area { /*ご注文の流れを左寄せ*/
float:left;
width:32%;
}
#bottomcolumn #info_area2 { /* インフォメンションを右寄せ */
float:right;
width:66%;
}
#bottomcolumn #info_area .step_box { /* ご注文の流れの各ボックス 横幅と左寄せを解除 */
clear:both;
width:100%;
float: none;
margin-bottom:10px;
}
#bottomcolumn #info_area .step .title, #bottomcolumn #info_area .step .title_last { /* 黄色矢印を非表示 */
background:none;
background-color:#EFEFEF;
}
#bottomcolumn #info_area .image {
float:left;
width:80px;
background: none;
}
#bottomcolumn #info_area .text {
float:right;
width:65%;
border: none;
min-height:90px; /*テキストエリアの高さ調整*/
}
[/css]