・商品ステータスの「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; }