特定商取引法に関するデータ等をブロックで表示し、ページに配置できるようにする。
さらに、本サイトの下記カスタマイズを表示。(カスタマイズを実装しないとエラーになる可能性有り)
▼配送方法の指定で配送業者の送料の詳細を表示
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}--> <!--{$arrSiteInfo.law_addr01|h}--><!--{$arrSiteInfo.law_addr02|h}--><br /> TEL <!--{$arrSiteInfo.law_tel01|h}-->-<!--{$arrSiteInfo.law_tel02|h}-->-<!--{$arrSiteInfo.law_tel03|h}--> <!--{if $arrSiteInfo.law_fax01}--> <br /> FAX <!--{$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_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; /*テキストエリアの高さ調整*/ }