EC-CUBE2.12:インフォメーション(ご注文の流れ等)ブロックを作成する

特定商取引法に関するデータ等をブロックで表示し、ページに配置できるようにする。
さらに、本サイトの下記カスタマイズを表示。(カスタマイズを実装しないとエラーになる可能性有り)

▼配送方法の指定で配送業者の送料の詳細を表示
http://www.itoben.com/blog/617.html

▼送信メールのテンプレートを追加し、選択した支払い方法を自動表示
http://www.itoben.com/blog/561.html

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)

サンプルはこちら
トップページのボトムカラムに配置
商品一覧ページのメインカラムに配置

1 ファイルの作成

(1)■html/frontparts/bloc/info.php

<?php
// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Info_Ex.php';

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Info_Ex();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

(2)■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Info_Ex.php

<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Info.php';

class LC_Page_FrontParts_Bloc_Info_Ex extends LC_Page_FrontParts_Bloc_Info {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}

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

(3)■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Info.php

<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

class LC_Page_FrontParts_Bloc_Info extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

/** 店舗基本情報 */
var $arrSiteInfo;

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();

// 店舗基本情報取得
$this->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();
}
}
?>

(4)■data/Smarty/templates/default/frontparts/bloc/info.tpl

<div class="bloc_outer">
<div id="info_area">

<div class="title_info">
<h2 class="info"><span class="title">ご注文の流れ</span></h2>
</div>

<div class="bloc_body">
<div class="step_box">
<div class="step">
<div class="title">
ご注文
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/icon/ico_kago.png" alt="" />
</div>
<div class="text">
「カゴに入れる」ボタンをクリックすると「現在のカゴの中」に数量と金額が表示されますので「カゴの中を見る」ボタンをクリックしてください。
</div>
</div>
</div>
<div class="step_box">
<div class="step">
<div class="title">
お客様情報
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/icon/ico_customer.png" alt="" />
</div>
<div class="text">
「購入手続きへ」ボタンをクリック後、会員登録がお済みの方はログインしてください。登録されていない方は、登録をお願いします。登録せずに購入することも可能です。
</div>
</div>
</div>
<div class="step_box">
<div class="step">
<div class="title">
購入手続き
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/icon/ico_card.png" alt="" />
</div>
<div class="text">
お届け先の指定やお支払い方法等をご入力いただきましたら、内容をご確認の上、ご注文完了ページへお進みください。当店より受付確認メールが自動配信されます。
</div>
</div>
</div>
<div class="step_box">
<div class="step">
<div class="title_last">
入金・発送
</div>
<div class="image">
<img src="<!--{$TPL_URLPATH}-->img/icon/ico_delive.png" alt="" />
</div>
<div class="text">
当店で入金確認ができ次第、入金確認メールを配信するとともに商品の発送準備を進め、発送が完了しましたら、メールでお知らせいたします。
</div>
</div>
</div>
<div class="clear"></div>
</div><!--/class="bloc_body"-->
</div><!--/id="info_area"-->

<!-- ******************************************************** -->

<div id="info_area2">
<div class="title_info">
<h2 class="info"><span class="title">インフォメーション</span></h2>
</div>
<div class="bloc_body">

<!--◆左側のボックス ここから◆-->
<div id="left">
<!--▼ブロック ここから▼-->
<div class="box">
<div class="title2"><h3>お支払いについて</h3></div>
<div class="content">
<div id="comment">
当店では、
<!--{section name=cnt loop=$arrRet}-->
<!--{$arrRet[cnt].payment_method|h}-->、
<!--{/section}-->
をご用意しております。
</div>

<!--{section name=cnt loop=$arrRet}-->
<div class="method"><!--{$arrRet[cnt].payment_method|h}--></div>
<div class="site_ex"><!--{if $arrRet[cnt].site_ex}--><!--{$arrRet[cnt].site_ex|h|nl2br}--><!--{/if}--></div>
<!--{if $arrRet[cnt].payment_image}-->
<div class="image"><img src="<!--{$smarty.const.TOP_URLPATH}-->upload/save_image/<!--{$arrRet[cnt].payment_image}-->" alt="" /></div>
<!--{/if}-->
<!--{/section}-->
</div>
</div>
<!--▲ブロック ここまで▲-->
</div>
<!--◆左側のボックス ここまで◆-->

<!--◆右側のボックス ここから◆-->
<div id="right">
<!--▼ブロック ここから▼-->
<div class="box">
<div class="title2"><h3>返品・交換について</h3></div>
<!--{$arrSiteInfo.law_term06|h|nl2br}-->
<div class="content">
</div>
</div>
<!--▲ブロック ここまで▲-->
<!--▼ブロック ここから▼-->
<div class="box">
<div class="title2"><h3>送料について</h3></div>
<div class="content">
<!--{if $arrSiteInfo.free_rule == 1}-->
<div class="attention">送料は無料です。</div>
<!--{elseif $arrSiteInfo.free_rule == 0 || $arrSiteInfo.free_rule > 1}-->
「送料を表示」をクリックしてご覧ください。<br />
<!--{section name=cnt loop=$arrRetMulti}-->
■<!--{$arrRetMulti[cnt].name|h}-->(<a class="cbox_postage" href="<!--{$smarty.const.ROOT_URLPATH}-->postage/index.php?devname=<!--{$arrRetMulti[cnt].deliv_id|h}-->" title="<!--{$arrRetMulti[cnt].name|h}-->の送料詳細">送料を表示</a>)<br />
<!--{/section}-->
<!--{if $arrSiteInfo.free_rule > 1}-->
<div class="attention">※ <!--{$arrSiteInfo.free_rule|h}-->円以上お買上げいただきますと送料無料になります。</div>
<!--{/if}-->
<!--{if $smarty.const.DELIV_FREE_AMOUNT > 0}-->
<div class="attention">※ <!--{$smarty.const.DELIV_FREE_AMOUNT}-->個以上お買上げいただきますと送料無料になります。</div>
<!--{/if}-->
<!--{/if}-->
</div>
</div>
<!--▲ブロック ここまで▲-->
<!--▼ブロック ここから▼-->
<div class="box">
<div class="title2"><h3>配送について</h3></div>
<div class="content">
配送は、
<!--{section name=cnt loop=$arrRetMulti}-->
<!--{$arrRetMulti[cnt].name|h}-->、
<!--{/section}-->
でお届けします。<br />
地域や商品の大きさによりましては、物流会社が変更になることもございますが、何卒ご了承ください。
</div>
</div>
<!--▲ブロック ここまで▲-->
<!--▼ブロック ここから▼-->
<div class="box">
<div class="title2"><h3>ご利用案内</h3></div>
<div class="content">
お問い合わせは、<a href="<!--{$smarty.const.HTTPS_URL}-->contact/<!--{$smarty.const.DIR_INDEX_PATH}-->">お問い合わせフォーム</a>、<a href="mailto:<!--{$arrSiteInfo.law_email|h}-->">メール</a>、お電話<!--{if $arrSiteInfo.law_fax01}-->、FAX<!--{/if}-->で受け付けております。
<div id="shop">
<div class="st"><!--{$arrSiteInfo.shop_name|h}--></div>
〒<!--{$arrSiteInfo.law_zip01|h}-->-<!--{$arrSiteInfo.law_zip02|h}-->&nbsp;<!--{$arrSiteInfo.law_addr01|h}--><!--{$arrSiteInfo.law_addr02|h}--><br />
TEL&nbsp;<!--{$arrSiteInfo.law_tel01|h}-->-<!--{$arrSiteInfo.law_tel02|h}-->-<!--{$arrSiteInfo.law_tel03|h}-->
<!--{if $arrSiteInfo.law_fax01}-->
<br />
FAX&nbsp;<!--{$arrSiteInfo.law_fax01|h}-->-<!--{$arrSiteInfo.law_fax02|h}-->-<!--{$arrSiteInfo.law_fax03|h}-->
<!--{/if}-->
<div class="st">▼営業時間</div>
・ネットでのご注文は24時間受け付けております。<br />
<!--{if $arrSiteInfo.business_hour}-->
・お電話でのお問い合わせは下記の時間帯にお願いします。<br />
<!--{$arrSiteInfo.business_hour|h}-->
<!--{/if}-->
</div>
</div>
</div>
<!--▲ブロック ここまで▲-->

</div>
<!--◆右側のボックス ここまで◆-->

<div class="clear"></div>
</div><!--/class="bloc_body"-->
</div><!--/id="info_area2"-->

</div>

2 データベースにブロックを登録する。

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);

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の小さい画像なので、ここで表示できません。下記アドレスからダウンロード。
http://www.itoben.com/blog/wp-content/uploads/2012/10/bg_info_title2.png


4
 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; /*テキストエリアの高さ調整*/
}