EC-CUBE2.12:新着商品に自動で「NEW」アイコンを表示する

・商品ステータスの「NEW」とは別もの。(商品ステータスの「NEW」は使用しない)
・商品登録後、設定した期間中は「NEW」アイコンを表示する。
・表示期間は、パラメータで設定する。
・アイコンを表示させない場合は、パラメータの値を0にする。
・アイコンは、商品写真の右下に重ねるように表示する。

1 dtb_productsテーブルの「create_date」を読み込めるようにする。
■data/class/SC_Product.php
154行目あたりに追加

/* ▼新着商品に自動で「NEW」アイコン */
,create_date

2 表示期間をパラメータ設定で行う。


mtb_constantsにカラムを追加する。(ここでは、商品登録後30日間表示する設定)

INSERT INTO mtb_constants (id, name, rank, remarks) VALUES ('NEW_ICON_TIME', '30', 1439, '「NEW」アイコンの表示期間(商品登録後の日数)');

★管理画面→パラメーター設定で、「この内容で登録する」をクリックすると反映される。

3 商品一覧ページに表示する
(1)アイコンの作成
■html/user_data/packages/default/img/icon/ico_new.png

(2)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みで)
■data/Smarty/templates/default/products/list.tpl  の下に追加

<!--★画像★-->
<div class="photo">
<!--▼NEWアイコン自動表示-->
<!--{assign var=time value=$smarty.const.NEW_ICON_TIME}-->
<!--{assign var=x value=$arrProduct.create_date|date_format:'%Y%m%d'}-->
<!--{assign var=y value=$smarty.now-24*60*60*$time|date_format:'%Y%m%d'}-->
<!--{if $x > $y}-->
<div class="new_icon">
<img class="new" src="<!--{$TPL_URLPATH}-->img/icon/ico_new.png" alt="新着商品" />
</div>
<!--{/if}-->
<!--▲NEWアイコン自動表示-->

(3)CSSに追加
■html/user_data/packages/default/css/contents.css
▼商品一覧の箇所に

/* NEWアイコン自動表示 */
.listphoto .photo {
position:relative;
}
.listphoto .photo .new_icon {
position:absolute;
bottom:1px; /*位置調整*/
right:1px; /*位置調整*/
}
.listphoto .photo .new_icon img.new {
border:none;
}

4 商品詳細ページに表示する
(1)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みに合わせて)
■data/Smarty/templates/default/products/detail.tpl  の下に追加

<div id="detailphotobloc">
<div class="photo">
<!--▼NEWアイコン自動表示-->
<!--{assign var=time value=$smarty.const.NEW_ICON_TIME}-->
<!--{assign var=x value=$arrProduct.create_date|date_format:'%Y%m%d'}-->
<!--{assign var=y value=$smarty.now-24*60*60*$time|date_format:'%Y%m%d'}-->
<!--{if $x > $y}-->
<!--▲NEWアイコン自動表示-->

(2)CSSに追加
■html/user_data/packages/default/css/contents.css
▼商品詳細の箇所に

/* NEWアイコン自動表示 */
#detailphotobloc .photo {
position:relative;
}
#detailphotobloc .photo .new_icon {
position:absolute;
bottom:0; /*位置調整*/
right:0; /*位置調整*/
}
#detailphotobloc .photo .new_icon img.new {
border:none;
}