バージョン選択

フォーラム

メニュー

オンライン状況

65 人のユーザが現在オンラインです。 (15 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 65
もっと...

サイト内検索

質問 > フロント機能 > 2.11 スマートフォンでも新商品ブロックを表示したい。

フロント機能

新規スレッドを追加する

フラット表示 前のトピック | 次のトピック
投稿者 スレッド
oda33
投稿日時: 2011/10/5 17:33
対応状況: −−−
新米
登録日: 2011/9/30
居住地: 東京都
投稿: 1
Re: 2.11 スマートフォンでも新商品ブロックを表示したい。
私も上記ページを参考に設置させていただきました。
違うのは新商品ブロックに一覧コメント(dtb_products.main_list_comment)を表示させるようにしたのと、CSSを追記したことくらいでしょうか。

サーバーはシックスコアです。
問題のある記述等あればご指摘下さい。

作業は以下の6つです。
1.product_flag.phpを新規作成
2.LC_Page_FrontParts_Bloc_ProductFlag_Ex.phpを新規作成
3.LC_Page_FrontParts_Bloc_ProductFlag.phpを新規作成
4.block.css (スマートフォン用)を修正
5.product_flag.tpl (スマートフォン用)を新規作成
6.dtb_bloc の php_path (スマートフォン用)を設定

※すでにPC用の新商品ブロックが設定されていれば、1〜3は不要です。
※1〜3はエディタで作成しアップロード。4〜5はEC-CUBE管理画面から、6はphpMyAdmin等のデータベース管理画面から行います。


/frontparts/bloc/product_flag.php として新規作成。(パーミッション644)
引用:

<?php

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

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

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


/data/class_extends/pages_extends/frontparts/bloc/ LC_Page_FrontParts_Bloc_ProductFlag_Ex.php として新規作成。(パーミッション644)
引用:

<?php

// {{{ requires
//require_once(CLASS_REALDIR . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php");
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php';

/**
* productStatus のページクラス(拡張).
*
* LC_Page_FrontParts_Bloc_ProductFlag をカスタマイズする場合はこのクラスを編集する.
*
*/
class LC_Page_FrontParts_Bloc_ProductFlag_Ex extends LC_Page_FrontParts_Bloc_ProductFlag {

// }}}
// {{{ functions

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

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

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

?>


/data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php として新規作成。(パーミッション644)
引用:

<?php

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';
/**
* productStatus のページクラス.
*
* @package Page
*/

class LC_Page_FrontParts_Bloc_ProductFlag extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$bloc_file = 'product_flag.tpl';
$this->setTplMainpage($bloc_file);
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
}

function action() {

// 基本情報を渡す
$objSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();

//新着商品表示
$this->arrProductFlag = $this->lfGetProductFlag();
}

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

function lfGetProductFlag() {
$objView = new SC_SiteView();
$objQuery = new SC_Query();

//検索したい商品のステータスを設定
//NEW→1, 残りわずか→2, ポイント2倍→3, オススメ→4, 限定品→5
$productFlag = 1;

//検索する商品のステータスをランダムに決定し、表示させたい場合は以下のコメントを外してください。
//$id_count = $objQuery->count(mtb_status);
//$productFlag = rand(1,$id_count);

$this->statusName = $objQuery->get("name", "mtb_status_image", "id = ? ", array($productFlag));

//表示する商品の件数
$listCount = 8;




$col = "dtb_products.product_id, dtb_products.name, dtb_products.main_image, MIN(dtb_products_class.price02) AS price02_min, MAX(dtb_products_class.price02) AS price02_max, dtb_products.main_list_comment";
$from = "dtb_products INNER JOIN dtb_products_class ON dtb_products.product_id = dtb_products_class.product_id INNER JOIN dtb_product_status ON dtb_products.product_id = dtb_product_status.product_id";
$where = "dtb_product_status.product_status_id = ? AND dtb_products.del_flg = 0 AND dtb_products.status = 1";
$groupby = "dtb_products.product_id, dtb_products.name, dtb_products.main_image, dtb_product_status.product_id, dtb_products.update_date";
$this->groupby=$objQuery->setGroupBy($groupby);

//商品の表示はupdate_dateが新しい順
//DESC > 降順 ASC > 昇順
//$order = "dtb_products.update_date ASC";
//$order = "dtb_products.update_date DESC";
//商品IDの降順 ※データベースの入れ替え時にupdate_dateが同じになってしまうため
$order = "dtb_products.product_id DESC";

$this->order=$objQuery->setOrder($order);

$arrFlagList = $objQuery->select($col, $from, $where, array($productFlag));

//商品の表示をランダムに抽出する場合は以下のコメントを外してください。
//srand((double)microtime()*1000000); //乱数生成器を初期化
//shuffle($arrFlagList);

$this->arrFlagProducts = array_slice($arrFlagList, 0, $listCount);

$objView->assignobj($this);
$objView->display($this->tpl_mainpage);
}
}

?>


block.css (スマートフォン用)を修正
※オススメ商品の箇所をコピーし、
recomend_area > product_flag_area
recomendblock > product_flag_block
に置換して追加しています。

/user_data/packages/sphone/css/block.css に追記。
引用:

/*-----------------------------------------------
新商品情報
----------------------------------------------- */
#product_flag_area{
margin:15px 10px 20px 10px;
padding-top:10px;
border:#CCC solid 1px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
#product_flag_area h2{
font-size:12px;
margin-left:10px;
}
#product_flag_area li{
width:290px;
}
.product_flag_block{
width:270px;
padding:5px 10px 5px 8px;
margin:0 auto;
clear:both;
}
.product_flag_block img{
width:80px;
float:left;
}
.product_flag_block .productContents{
width:68%;
float:right;
text-align:left;
}
.product_flag_block .productContents p{
clear:both;
}
.product_flag_block .productContents p.comment{
width:17em;
height:3.7em;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
clear:both;
}
.product_flag_block .sale_price{
clear:both;
float:right;
text-align:right;
}
#product_flag_area div.moveWrap {
width:290px;
height:auto;
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-box-sizing:border-box;
}

#product_flag_area ul.moveWrapBG {
margin:0;
padding:0;
display:inline-block;
position:relative;
width:100%;
height:auto;
visibility:hidden;
-webkit-box-sizing:border-box;
}
#product_flag_area div.slideMask {
margin:0 auto;
padding:0;
margin-right:1px;
position:absolute;
top:0;
left:0;
border:4px #FFF solid;
-webkit-box-sizing:border-box;
}
#product_flag_area div.moveWrap>ul.move {
width:10000px;
margin:0;
padding:0;
position:relative;
left:0;
top:0;
list-style:none;
-webkit-transition:all 0.6s ease-in-out;
-webkit-transform:translate3d(0,0,0);
margin:0;
padding:0;
display:none;
}
#product_flag_area div.moveWrap>ul.move li.slideUnit {
width:290px!important;
margin:0;
padding:0;
float:left;
list-style:none;
text-align:center;
-webkit-box-sizing:border-box;
}
#product_flag_area li.slideUnit>div {
padding:4px;
display:inline-block;
vertical-align:middle;
text-align:center;
-webkit-box-sizing:border-box;
}
#product_flag_area div.flickSlideBottom {
width:100%;
margin-top:5px;
border-top:#DBDBDB solid 1px;
background: -moz-linear-gradient(center top, #FFFFFF 0%,#DEE4EA 95%,#FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),color-stop(0.95, #DEE4EA),color-stop(0, #FFFFFF));
border-bottom-right-radius:8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-bottom-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
moz-border-bottom-left-radius:8px;
}
#product_flag_area div.flickSlideBottom div.bottomLeft,#product_flag_area div.flickSlideBottom div.bottomRight {
display:table-cell;
-webkit-box-sizing:border-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;
vertical-align:middle;
padding:0 10px;
}
#product_flag_area div.flickSlideBottom div.bottomRight {
font-size:16px;
font-weight: bold;
color:#7F7F7F;
background-color:transparent;
border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-left:#DBDBDB solid 1px;
}
#product_flag_area div.flickSlideBottom div.bottomLeft {
font-size:16px;
font-weight: bold;
color:#7F7F7F;
background-color:transparent;
border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-bottom-left-radius:8px;
border-right:#DBDBDB solid 1px;
}
#product_flag_area div.flickSlideBottom div.bottomLeft:after {
font-size:10px;
padding:5px;
text-align:left;
display:table-cell;
}
#product_flag_area div.flickSlideBottom div.bottomLeft:before {
margin-top:2px;
padding:5px;
text-align:left;
display:table-cell;
}
#product_flag_area div.flickSlideBottom div.bottomRight:before {
font-size:10px;
padding:5px;
text-align:right;
display:table-cell;
}
#product_flag_area div.flickSlideBottom div.bottomRight:after {
margin-top:2px;
padding:5px;
text-align:right;
display:table-cell;
}
#product_flag_area div.flickSlideBottom ul.slidePager {
width:100%;
margin:0;
padding:0;
display:table-cell;
text-align:center;
}
#product_flag_area div.flickSlideBottom ul.slidePager li.slidePagerPointer {
font-size:10px;
width:6px;
height:6px;
margin:12px 6px 6px 6px;
display:inline-block;
background-color:#CCC;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#product_flag_area div.flickSlideBottom ul.slidePager li.slidePagerPointer.active {
background-color:#333;
}


デザイン管理>スマートフォン>ブロック設定より「product_flag.tpl」を作成。

ブロック名 新商品ブロック
ファイル名 product_flag (.tpl)
引用:

<!--{*
* This file is part of EC-CUBE
*
* Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved.
*
* http://www.lockon.co.jp/
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->
<!-- ▼新商品情報 -->
<!--{if count($arrFlagProducts) > 0}-->
<section id="product_flag_area" class="mainImageInit">
<h2>新商品情報</h2>
<ul>
<!--{section name=cnt loop=$arrFlagProducts step=2}-->
<li id="mainImage<!--{$smarty.section.cnt.index}-->">
<div class="product_flag_block clearfix">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrFlagProducts[cnt].main_image|sfNoImageMainList|h}-->&width=80&height=80" alt="<!--{$arrFlagProducts[cnt].name|h}-->" />
<div class="productContents">
<h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->"><!--{$arrFlagProducts[cnt].name|h}--></a></h3>
<p class="mini comment"><!--{$arrFlagProducts[cnt].main_list_comment|h|nl2br}--></p>
<!--{assign var=price01 value=`$arrFlagProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrFlagProducts[cnt].price02_min`}-->
<p class="sale_price"><span class="mini"><!--<span class="mini">-->販売価格(税込):<!--</span>--></span><span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span></p>
</div>
</div>
</li>
<!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->
<!--{if $arrFlagProducts[$cnt2]|count > 0}-->
<li id="mainImage<!--{$cnt2}-->">
<div class="product_flag_block clearfix">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrFlagProducts[$cnt2].main_image|sfNoImageMainList|h}-->&width=80&height=80" alt="<!--{$arrFlagProducts[$cnt2].name|h}-->" />
<div class="productContents">
<h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt2].product_id|u}-->"><!--{$arrFlagProducts[$cnt2].name|h}--></a></h3>
<p class="mini comment"><!--{$arrFlagProducts[$cnt2].main_list_comment|h|nl2br}--></p>
<!--{assign var=price01 value=`$arrFlagProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrFlagProducts[$cnt2].price02_min`}-->
<p class="sale_price"><span class="mini"><!--<span class="mini">-->販売価格(税込):</span><!--</span>--><span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span></p>
</div>
</div>
</li>
<!--{/if}-->
<!--{/section}-->
</ul>
</section>
<!--{/if}-->
<!-- ▲新商品情報 -->

<script type="application/javascript">
<!--//
$(function(){
$('#product_flag_area ul li').flickSlide({target:'#product_flag_area>ul', duration:5000});
});
//-->
</script>


dtb_bloc の php_path (スマートフォン用)設定
※PC用の「新商品ブロック」もあるので注意。

phpMyAdmin 等から dtb_bloc > 新商品ブロック > 編集
php_path > frontparts/bloc/product_flag.php > 実行



作業は以上です。
どなたかのご参考になれば幸い。
フラット表示 前のトピック | 次のトピック


題名 投稿者 日時
   2.11 スマートフォンでも新商品ブロックを表示したい。 root329 2011/8/31 10:42
     Re: 2.11 スマートフォンでも新商品ブロックを表示したい。 AMUAMU 2011/9/9 23:05
   » Re: 2.11 スマートフォンでも新商品ブロックを表示したい。 oda33 2011/10/5 17:33

 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は89,328名です
総投稿数は110,082件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1652
8
red
1570
9
mcontact
1304
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.