ITOBEN STYLE > EC-CUBE2.12:新着商品に自動で「NEW」アイコンを表示する 2013年4月6日カテゴリー:未分類 EC-CUBE2.12:新着商品に自動で「NEW」アイコンを表示する ・商品ステータスの「NEW」とは別もの。(商品ステータスの「NEW」は使用しない) ・商品登録後、設定した期間中は「NEW」アイコンを表示する。 ・表示期間は、パラメータで設定する。 ・アイコンを表示させない場合は、パラメータの値を0にする。 ・アイコンは、商品写真の右下に重ねるように表示する。 1 dtb_productsテーブルの「create_date」を読み込めるようにする。 ■data/class/SC_Product.php 154行目あたりに追加 [php] /* ▼新着商品に自動で「NEW」アイコン */ ,create_date [/php] 2 表示期間をパラメータ設定で行う。 mtb_constantsにカラムを追加する。(ここでは、商品登録後30日間表示する設定) [php] INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘NEW_ICON_TIME’, ’30’, 1439, ‘「NEW」アイコンの表示期間(商品登録後の日数)’); [/php] ★管理画面→パラメーター設定で、「この内容で登録する」をクリックすると反映される。 3 商品一覧ページに表示する (1)アイコンの作成 ■html/user_data/packages/default/img/icon/ico_new.png (2)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みで) ■data/Smarty/templates/default/products/list.tpl の下に追加 [php] (3)CSSに追加 ■html/user_data/packages/default/css/contents.css ①▼商品一覧の箇所に [php] /* NEWアイコン自動表示 */ .listphoto .photo { position:relative; } .listphoto .photo .new_icon { position:absolute; bottom:1px; /*位置調整*/ right:1px; /*位置調整*/ } .listphoto .photo .new_icon img.new { border:none; } [/php] 4 商品詳細ページに表示する (1)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みに合わせて) ■data/Smarty/templates/default/products/detail.tpl の下に追加 [php] [/php] (2)CSSに追加 ■html/user_data/packages/default/css/contents.css ①▼商品詳細の箇所に [php] /* NEWアイコン自動表示 */ #detailphotobloc .photo { position:relative; } #detailphotobloc .photo .new_icon { position:absolute; bottom:0; /*位置調整*/ right:0; /*位置調整*/ } #detailphotobloc .photo .new_icon img.new { border:none; } [/php]
・商品ステータスの「NEW」とは別もの。(商品ステータスの「NEW」は使用しない)
・商品登録後、設定した期間中は「NEW」アイコンを表示する。
・表示期間は、パラメータで設定する。
・アイコンを表示させない場合は、パラメータの値を0にする。
・アイコンは、商品写真の右下に重ねるように表示する。
1 dtb_productsテーブルの「create_date」を読み込めるようにする。
■data/class/SC_Product.php
154行目あたりに追加
[php]
/* ▼新着商品に自動で「NEW」アイコン */
,create_date
[/php]
2 表示期間をパラメータ設定で行う。
mtb_constantsにカラムを追加する。(ここでは、商品登録後30日間表示する設定)
[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘NEW_ICON_TIME’, ’30’, 1439, ‘「NEW」アイコンの表示期間(商品登録後の日数)’);
[/php]
★管理画面→パラメーター設定で、「この内容で登録する」をクリックすると反映される。
3 商品一覧ページに表示する
(1)アイコンの作成
■html/user_data/packages/default/img/icon/ico_new.png
(2)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みで)
■data/Smarty/templates/default/products/list.tpl
[php]
■html/user_data/packages/default/css/contents.css
①▼商品一覧の箇所に
[php]
/* NEWアイコン自動表示 */
.listphoto .photo {
position:relative;
}
.listphoto .photo .new_icon {
position:absolute;
bottom:1px; /*位置調整*/
right:1px; /*位置調整*/
}
.listphoto .photo .new_icon img.new {
border:none;
}
[/php]
4 商品詳細ページに表示する
(1)アイコンは、商品写真の右下に重ねるように表示する。(場所はお好みに合わせて)
■data/Smarty/templates/default/products/detail.tpl
[php]
[/php]
(2)CSSに追加
■html/user_data/packages/default/css/contents.css
①▼商品詳細の箇所に
[php]
/* NEWアイコン自動表示 */
#detailphotobloc .photo {
position:relative;
}
#detailphotobloc .photo .new_icon {
position:absolute;
bottom:0; /*位置調整*/
right:0; /*位置調整*/
}
#detailphotobloc .photo .new_icon img.new {
border:none;
}
[/php]
アーカイブ
カテゴリー