EC-CUBEの開発を始めたい方必見！
当社で行っているEC-CUBE研修を不定期で紹介させていただきます。

今回は「STEP1.3：フロント商品詳細カスタマイズ」を紹介します。


基礎から応用まで ～EC-CUBEカスタマイズの全て～ STEP1.2：商品検索カスタマイズ
https://ecnomikata.com/column/8974/

基礎から応用まで ～EC-CUBEカスタマイズの全て～ STEP1.1：商品登録・編集カスタマイズ
https://ecnomikata.com/column/8959/

基礎から応用まで ～EC-CUBEカスタマイズの全て～ 序章
https://ecnomikata.com/column/8635/

課題紹介

研修課題は以下になります。

【課題】
「STEP1.1：商品登録・編集カスタマイズ」で追加したinput項目をフロントの商品詳細画面（PC、モバイル、スマフォ）に表示する。

【追加項目】
text - メーカーコード
select - 配送種別(通常、大型、冷蔵、冷凍、その他)
radio - 保証期間(1ヶ月、3ヶ月、6ヶ月、12ヶ月)
checkbox - ギフト対応(包装、リボン、メッセージカード)

ポイント① 追加項目の検索

フロント商品詳細表示処理のPHPは、data/class/pages/products/LC_Page_Products_Detail.php になります。init処理のマスターデータ取得については、STEP1.1を参考にして下さい。はじめに、STEP1.1で追加した項目を、フロント商品詳細画面アクセス時に検索できるようにします。

▼フロント商品詳細PHP - LC_Page_Products_Detail.php


action処理を抜粋しています。上記120行目で data/class/SC_Product.php の getDetail関数を呼び出しています。getDetail関数の処理を追っていくと、最終的に data/class/db/SC_DB_DBFactory.php の alldtlSQL関数にたどり着くと思います。alldtlSQL関数内のSQLでは、商品テーブル[dtb_products]を「*」で検索しています。ですので、チェックボックス以外の項目については、カスタマイズ無しで取得することができます。

チェックボックス(ギフト対応)のデータは、管理しているテーブルが異なりますので別途取得ロジックの追加が必要になります。上記131～132行目にギフト対応のデータ取得を記述しています。STEP1.1で、SC_Product.php に getGift関数を追加しましたので、その関数を流用します。

▼商品汎用クラス - SC_Product.php


商品IDをキーに、ギフトIDを取得し返却しています。これで検索処理のカスタマイズは終了となります。

ポイント② 各デバイスのテンプレートに追加項目を表示

EC-CUBEには、PC、携帯、スマートフォンのページ表示に対応しています。フロント商品詳細のテンプレートは下記に配置されています。

【ＰＣ】data/Smarty/templates/default/products/detail.tpl
【携帯】data/Smarty/templates/mobile/products/detail.tpl
【スマホ】data/Smarty/templates/sphone/products/detail.tpl

それでは、PHPにて取得した追加項目データを、フロント商品詳細画面に表示させてみましょう。

▼商品詳細ページ(PC) - detail.tpl

▼商品詳細ページ(携帯) - detail.tpl

▼商品詳細ページ(スマートフォン) - detail.tpl


上記コードを適切な位置に組み込んで下さい。デバイス毎に少々タグ組みが異なりますが、表示ロジックは全て同じです。値が設定されていない項目については非表示にしています。チェックボックス(ギフト対応)については、選択された分だけforeachでループして表示しています。

実際の表示結果は以下となります。

▼商品詳細ページ(PC)



▼商品詳細ページ(携帯)



▼商品詳細ページ(スマートフォン)


商品登録画面から商品データの更新を行い、変更内容がフロントの各画面に反映されているか、確認してみて下さい。

次回

以上で「STEP1.3：フロント商品詳細カスタマイズ」は終了となります。
次回は「STEP2.1：会員登録・編集カスタマイズ」を紹介させていただきます。