ITOBEN STYLE > EC-CUBEデザインテンプレート > EC-CUBEカスタマイズBootstrap版(10)商品詳細ページ 2016年4月25日カテゴリー: EC-CUBEデザインテンプレート EC-CUBEカスタマイズBootstrap版(10)商品詳細ページ Bootstrap版 INDEX (1)トップページ (2)ヘッダー部の解説 (3)トップページスライド画像の解説 (4)ブロック解説① (5)ブロック解説② (6)ブロック解説③ (7)ブロック解説④ (8)ブロック解説⑤ (9)商品一覧ページ (10)商品詳細ページ EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト インストールと同時にこのようなサイトが立ち上がります。 管理画面で店舗情報等を登録すれば、すぐに運用が可能です。 詳しくはこちらをご覧ください。 ▼商品詳細ページ (1)レイアウトの変更 テンプレートファイルのコードを入れ替えることでレイアウトを変更することが可能です。 ■data/Smarty/templates/default/products/detail.tpl (2)商品ステータス 管理画面、システム設定>マスターデータ管理の[mtb_statua]で登録されている値が表示されます。 [mtb_status_image]は使用していません。 EC-CUBEの通常の動作に戻す(mtb_status_imageを使用)場合は、パラメータ設定[STATUS_IMAGE_TEXT ]の値をtrueに変更して下さい。 ステータスの背景色を変更する場合、あるいは追加する場合は、CSSを編集してください。 ■html/user_data/packages/default/css/contents.css 865行目付近、「商品詳細」の箇所 ———- ul.detail_status_icon li#status1 { background: #FFD1BB; } ul.detail_status_icon li#status2 { background: #FFD2E9; } ul.detail_status_icon li#status3 { background: #FAA; } ul.detail_status_icon li#status4 { background:#E2F2FA; } ul.detail_status_icon li#status5 { background:#D7E8CA; } ———- (3)商品情報 デモサイトの「サイズ」「材質」「耐荷重」等は、管理画面の商品登録画面で設定された内容が反映されています。 「サイズ」「材質」「耐荷重」等の項目は、システム設定>マスターデータ管理の[mtb_product_head]で登録します。 登録数は10個までです。 (4)規格の選択方法 パラメータ設定[CLASS_PULL_TABLE]の値を「false」に変更すると、プルダウン形式で表示されます。 (5)規格ごとの詳細を表示 パラメータ設定で詳細の表示・非表示を設定できます。 ▼MATRIX_NORMAL_PRICE 商品詳細ページのマトリクス表示:通常価格(true:表示, false:非表示) ▼MATRIX_POINT 商品詳細ページのマトリクス表示:ポイント(true:表示, false:非表示) ▼MATRIX_PRODUCT_CODE 商品詳細ページのマトリクス表示:商品コード(true:表示, false:非表示) ▼MATRIX_STOCK 商品詳細ページのマトリクス表示:在庫数(true:表示, false:非表示) ▼MATRIX_SALE_LIMIT 商品詳細ページのマトリクス表示:一度に購入できる数(true:表示, false:非表示) ▼MATRIX_CLASS_IMAGE 商品詳細ページのマトリクス表示:規格画像確認リンク(true:表示, false:非表示) すべて表示した場合、下図のようになります。 (6)数量選択のプルダウン ① パラメータ設定[QUANTITY_PULLDOWN_USE]の値を「false」に変更すると、プルダウン化は解除されEC-CUBE通常のテキストボックスで表示されます。 ② [QUANTITY_PULLDOWN_MAX]で、プルダウンの数値の最大値を設定します。インストール時はデフォルト「100」に設定されています。 ③ 商品に在庫数または販売制限数が設定されている場合は、プルダウンの数値の最大値は、在庫数または販売制限数となります。 (7)お気に入り追加ボタン ユーザーがログイン前にクリックした場合は、MYページログイン画面に遷移します。 Bootstrap版 INDEX (1)トップページ (2)ヘッダー部の解説 (3)トップページスライド画像の解説 (4)ブロック解説① (5)ブロック解説② (6)ブロック解説③ (7)ブロック解説④ (8)ブロック解説⑤ (9)商品一覧ページ (10)商品詳細ページ EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト インストールと同時にこのようなサイトが立ち上がります。 管理画面で店舗情報等を登録すれば、すぐに運用が可能です。 詳しくはこちらをご覧ください。
Bootstrap版 INDEX
(1)トップページ
(2)ヘッダー部の解説
(3)トップページスライド画像の解説
(4)ブロック解説①
(5)ブロック解説②
(6)ブロック解説③
(7)ブロック解説④
(8)ブロック解説⑤
(9)商品一覧ページ
(10)商品詳細ページ
EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト
インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。
詳しくはこちらをご覧ください。
▼商品詳細ページ
(1)レイアウトの変更
テンプレートファイルのコードを入れ替えることでレイアウトを変更することが可能です。
■data/Smarty/templates/default/products/detail.tpl
(2)商品ステータス
管理画面、システム設定>マスターデータ管理の[mtb_statua]で登録されている値が表示されます。
[mtb_status_image]は使用していません。
EC-CUBEの通常の動作に戻す(mtb_status_imageを使用)場合は、パラメータ設定[STATUS_IMAGE_TEXT ]の値をtrueに変更して下さい。
ステータスの背景色を変更する場合、あるいは追加する場合は、CSSを編集してください。
■html/user_data/packages/default/css/contents.css
865行目付近、「商品詳細」の箇所
———-
ul.detail_status_icon li#status1 {
background: #FFD1BB;
}
ul.detail_status_icon li#status2 {
background: #FFD2E9;
}
ul.detail_status_icon li#status3 {
background: #FAA;
}
ul.detail_status_icon li#status4 {
background:#E2F2FA;
}
ul.detail_status_icon li#status5 {
background:#D7E8CA;
}
———-
(3)商品情報
デモサイトの「サイズ」「材質」「耐荷重」等は、管理画面の商品登録画面で設定された内容が反映されています。
「サイズ」「材質」「耐荷重」等の項目は、システム設定>マスターデータ管理の[mtb_product_head]で登録します。
登録数は10個までです。
(4)規格の選択方法
パラメータ設定[CLASS_PULL_TABLE]の値を「false」に変更すると、プルダウン形式で表示されます。
(5)規格ごとの詳細を表示
パラメータ設定で詳細の表示・非表示を設定できます。
▼MATRIX_NORMAL_PRICE
商品詳細ページのマトリクス表示:通常価格(true:表示, false:非表示)
▼MATRIX_POINT
商品詳細ページのマトリクス表示:ポイント(true:表示, false:非表示)
▼MATRIX_PRODUCT_CODE
商品詳細ページのマトリクス表示:商品コード(true:表示, false:非表示)
▼MATRIX_STOCK
商品詳細ページのマトリクス表示:在庫数(true:表示, false:非表示)
▼MATRIX_SALE_LIMIT
商品詳細ページのマトリクス表示:一度に購入できる数(true:表示, false:非表示)
▼MATRIX_CLASS_IMAGE
商品詳細ページのマトリクス表示:規格画像確認リンク(true:表示, false:非表示)
すべて表示した場合、下図のようになります。
(6)数量選択のプルダウン
① パラメータ設定[QUANTITY_PULLDOWN_USE]の値を「false」に変更すると、プルダウン化は解除されEC-CUBE通常のテキストボックスで表示されます。
② [QUANTITY_PULLDOWN_MAX]で、プルダウンの数値の最大値を設定します。インストール時はデフォルト「100」に設定されています。
③ 商品に在庫数または販売制限数が設定されている場合は、プルダウンの数値の最大値は、在庫数または販売制限数となります。
(7)お気に入り追加ボタン
ユーザーがログイン前にクリックした場合は、MYページログイン画面に遷移します。
Bootstrap版 INDEX
(1)トップページ
(2)ヘッダー部の解説
(3)トップページスライド画像の解説
(4)ブロック解説①
(5)ブロック解説②
(6)ブロック解説③
(7)ブロック解説④
(8)ブロック解説⑤
(9)商品一覧ページ
(10)商品詳細ページ
EC-CUBEカスタマイズダウンロード:Bootstrap版デモサイト
インストールと同時にこのようなサイトが立ち上がります。
管理画面で店舗情報等を登録すれば、すぐに運用が可能です。
詳しくはこちらをご覧ください。