【ショップ】EC-CUBEにAmazon Product Advertising API を組み込む

EC-CUBEにAmazon  Product Advertising API を組み込む

Amazon  Product Advertisingの概念としては、アマゾンの用意しているデータベースのサイトに、決められたXMLを送ると、その要求に応じた応答が返信されてくるため、この情報を使ってうまくサイトに表示させるということがわかりました。

EC-CUBEでは、PHPという言語でコードで書かれているようですので、
この言語を使って組み込みが必要になりそうです。

EC-CUBEの情報

https://www.ec-cube.net/developers/#developers_requirements

http://doc.ec-cube.net/

http://doc.ec-cube.net/spec_experimental

http://downloads.ec-cube.net/manual/v3/plugin.pdf

Amazonの情報

https://aws.amazon.com/code/PHP?browse=1

https://aws.amazon.com/jp/developers/getting-started/

実装方針:「本体へ機能的なカスタマイズを行わない」
バージョンアップの際に再度カスタマイズを適用するのは、非効率。費用や手間が掛かり過ぎる。中にはバージョンアップで動作しなくなるプラグイン(プラグインでのカスタマイズ)あり。よって、「プラグインにてカスタマイズを行う」
 
次に、表示周り(テンプレート)の変更について、「本体部分のテンプレート読込順を利用し、本体側へ変更」する。
EC-CUBE3では、テンプレートファイル(twig)の読込順が決まっており、まず「app/template」配下の対象テンプレートファイルを探す仕組みを利用する。

管理画面の「コンテンツ管理>ページ管理」でページを編集した場合にテンプレートファイルは、この場所へ保存されるようになっており、本体のテンプレートファイルを書き換えることなく、自分でテンプレートを編集できるようになっている。
編集したテンプレートファイルを置いてやれば、表示内容を変更できるという状態。
表示部分の簡単な変更は、この場所へテンプレートファイルを配置して対応する。

ec-cube3のファイル構成を知る
ec-cube3のソースをダウンロードし、解凍するとディレクトリとファイルができる。
以下4つのディレクトリがあることを確認する。
app, src, vendor, html
この4つのうちカスタマイズとして考えると、特に「app」と「src」が重要。

app ディレクトリについて
app には、設定ファイル・ログ・キャッシュ・インストールしたプラグインのファイルが格納されています。それぞれ、具体的な格納場所は以下になります。
 
<設定ファイル>
app/config/eccube/
例えば、ec-cubeのコミュニティ等で質問をした際に、config を確認とか設定を確認すれば良い等の回答をもらった場合は、こちらを確認します。
 
<ログファイル>
app/log
これは分かりやすいですね。logというディレクトリにログファイルが格納されています。
ちなみにログファイルは、site_日付.log というファイル名で出力されます。
 
<キャッシュ>
app/cache
ec-cube3のキャッシュ情報はここへ格納されます。
ec-cubeのコミュニティ等でキャッシュをクリアしてくださいと回答をもらった場合は、この配下をクリア(削除)します。
 
<プラグイン格納場所>
app/plugin
プラグインをインストールした際はplugin配下へディレクトリが作成されプラグインのファイルが格納されます。
 
appにはもう一つ「template」というディレクトがあるかと思いますが、ここへはテンプレートを格納することができます。

src ディレクトリについて
srcディレクトリについてですが、「src」の中身は、ec-cube3の本体に当たる部分になる。
各画面の処理や画面表示用のテンプレートはこの「src」の中にある「eccube」へ格納されている。
 
例えば、topページのテンプレートの場所は以下。
/src/eccube/resource/template/default/index.twig
開いてみると、topページの画像3枚の表示が書かれていると思います。
 
この様に実際の処理・画面がこのディレクトリにあります。
重要な箇所だけ簡単にまとめると以下になります。
 
/src/eccube/controller/
 ・・・ 各機能の処理部分になります。
/src/eccube/entity/
 ・・・ entityファイル
/src/eccube/form/
 ・・・ 画面コントロールの定義
/src/eccube/repository/
 ・・・ dbの取得条件
/src/eccube/resource
 ・・・ 画面テンプレート等
/src/eccube/service
 ・・・ 共通的な処理(カート、購入などの処理)
 

テンプレート部分について、画面テンプレートに着目して、どの画面のテンプレートがどこにあるかのまとめ。
 
管理画面のテンプレート
[管理画面側 v3.0.9] – パスは src/resource/template/admin 配下
ブロック管理(新規・編集)
Content/block_edit.twig
 
ブロック管理
Content/block.twig
 
キャッシュ管理
Content/cache.twig
 
ファイル管理
Content/file.twig
 
ページ管理
Content/layout.twig
 
新着情報管理(新規・編集)
Content/news_edit.twig
 
新着情報管理
Content/news.twig
 
ページ管理(新規・編集)
Content/page_edit.twig
 
ページ管理
Content/page.twig
 
コンテンツ管理ナビ部分
Content/subnavi.twig
 
会員登録(編集)
Customer/edit.twig
 
会員マスター
Customer/index.twig
 
会員管理ナビ部分
Customer/subnavi.twig
 
仮会員時メール本文
Mail/entry_confirm.twig
 
購入完了時メール本文
Mail/order.twig
 
受注登録(編集)
Order/edit.twig
 
受注マスター
Order/index.twig
 
受注マスターのメール通知(確認画面 ※一括)
Order/mail_all_confirm.twig
 
受注マスターのメール通知(入力画面 ※一括)
Order/mail_all.twig
 
受注マスターのメール通知(完了画面)
Order/mail_complete.twig
 
受注マスターのメール通知(確認画面 ※個別)
Order/mail_confirm.twig
 
受注マスターの個別の送信完了メール確認
Order/mail_view.twig
 
受注マスターのメール通知(入力画面 ※個別)
Order/mail.twig
 
受注マスターの商品検索部分
Order/search_product.twig
 
受注管理ナビ部分
Order/subnavi.twig
 
カテゴリ登録
Product/category.twig
 
規格編集(分類 ※子規格)
Product/class_category.twig
 
規格編集
Product/class_name.twig
 
カテゴリCSV登録
Product/csv_category.twig
 
商品CSV登録
Product/csv_product.twig
 
商品マスター
Product/index.twig
 
商品マスター>規格設定
Product/product_class_twig
 
商品マスター(編集)
Product/product.twig
 
商品管理ナビ部分
Product/subnavi.twig
 
CSV出力項目設定
Setting/Shop/csv.twig
 
会員規約設定
Setting/Shop/customer_agreement.twig
 
配送方法設定(編集)
Setting/Shop/delivery_edit.twig
 
配送方法設定
Setting/Shop/delivery.twig
 
メール設定
Setting/Shop/mail.twig
 
支払方法設定(編集)
Setting/Shop/payment_edit.twig
 
支払方法設定
Setting/Shop/payment.twig
 
ショップマスター
Setting/Shop/shop_master.twig
 
税率設定
Setting/Shop/tax_rule.twig
 
特定商取引法
Setting/Shop/tradelaw.twig
 
権限管理
Setting/System/authority.twig
 
EC-CUBE ログ表示
Setting/System/log.twig
 
マスターデータ管理
Setting/System/masterdata.twig
 
メンバー管理(編集)
Setting/System/member_edit.twig
 
メンバー管理
Setting/System/member.twig
 
セキュリティ管理
Setting/System/security.twig
 
システム情報
Setting/System/system.twig
 
管理画面テンプレートベース部分
default_frame.twig
 
管理画面TOP
index.twig

フロント側のテンプレート
[フロント側 v3.0.9] – パスは src/resource/template/default 配下
ブロック カート
Block/cart.twig
 
ブロック カテゴリツリー
Block/category.twig
 
ブロック フッター
Block/footer.twig
 
ブロック 送料無料
Block/free.twig
 
ブロック ギャラリー(TOPページ新着情報下のブロック)
Block/garally.twig
 
ブロック ログイン
Block/login.twig
 
ブロック ロゴ
Block/logo.twig
 
ブロック 新着商品(TOPページ新着情報上のブロック)
Block/new_product.twig
 
ブロック 新着情報
Block/news.twig
 
ブロック 商品検索
Block/search_product.twig
 
カート画面
Cart/index.twig
 
お問い合わせ(完了)
Contact/complete.twig
 
お問い合わせ(確認)
Contact/confirm.twig
 
お問い合わせ(入力)
Contact/index.twig
 
会員登録(完了 本登録完了)
Entry/activate.twig
 
会員登録(完了 仮登録完了)
Entry/complete.twig
 
会員登録(確認)
Entry/confirm.twig
 
会員登録(入力)
Entry/index.twig
 
パスワード再発行(発行メール完了)
Forgot/complete.twig
 
パスワード再発行(入力)
Forgot/index.twig
 
パスワード再発行(完了)
Forgot/reset.twig
 
EC-CUBE用Widgetsレイアウト
Form/form_layout.twig
 
当サイトについて
Help/about.twig
 
利用規約
Help/agreement.twig
 
ご利用ガイド
Help/guide.twig
 
プライバシーポリシー
Help/privacy.twig
 
特定商取引法
Help/tradelaw.twig
 
お問い合わせメールテンプレート
Mail/contact_mail.twig
 
退会メールテンプレート
Mail/customer_withdraw_mail.twig
 
本会員登録完了メールテンプレート
Mail/entry_complete.twig
 
仮会員登録完了メールテンプレート
Mail/entry_confirm.twig
 
パスワード再発行用メールテンプレート
Mail/forgot_mail.twig
 
注文完了時メールテンプレート
Mail/order.twig
 
パスワード再発行完了時メールテンプレート
Mail/reset_complete_mail.twig
 
マイページ会員情報編集
Mypage/change.twig
 
マイページ会員情報編集完了
Mypage/change_complete.twig
 
マイページお届け先編集(一覧)
Mypage/delivery.twig
 
マイページお届け先編集(編集)
Mypage/delivery_edit.twig
 
マイページお気に入り
Mypage/favorite.twig
 
マイページ注文履歴詳細
Mypage/history.twig
 
マイページ注文履歴(一覧)
Mypage/index.twig
 
マイページログイン
Mypage/login.twig
 
マイページナビ部分
Mypage/navi.twig
 
マイページ退会手続き(TOP)
Mypage/withdraw.twig
 
マイページ退会手続き(確認)
Mypage/withdraw_confirm.twig
 
マイページ退会手続き(完了)
Mypage/withdraw_complete.twig
 
商品詳細
Product/detail.twig
 
商品一覧
Product/list.twig
 
注文完了
Shopping/complete.twig
 
ご注文内容のご確認
Shopping/index.twig
 
注文時のログイン
Shopping/login.twig
 
非会員購入時の情報入力
Shopping/nonmember.twig
 
お届け先の指定(選択)
Shopping/shipping.twig
 
お届け先追加(入力)
Shopping/shipping_edit.twig
 
お届け先の複数指定
Shopping/shipping_multiple.twig
 
非会員用複数配送時のお届け先設定
Shopping/shipping_multiple_edit.twig
 
購入エラー
Shopping/shopping_error.twig
 
フロント側テンプレートベース
default_frame.twig
 
エラー画面
error.twig
 
TOP画面
index.twig
 
ページングナビ部分レイアウト
pagination.twig

ーーーーーーーーーーーーー

EC-CUBE3のカスタマイズとしてEC-CUBE3のテンプレート(Twig)ファイルを変更する。
 
変更方法としては、別テンプレートを用意して、書き換える方針で行う。

Step1
変更する(変更を試してみる)テンプレートは、商品詳細を利用。
準備として、テンプレートのコピーを行います。
 
商品詳細のテンプレート(コピー元)
/src/Eccube/Resource/template/default/Product/detail.twig
 
コピー先は、
/app/template/default/Product/
 
defaultの配下に、Productディレクトリはないと思いますので、ディレクトリを作成して、その中へTwigファイルをはりつけます。
 コピーが完了したら、商品詳細ページを表示してみます。
 
先程と同じ商品詳細ページが表示されたと思いますが、表示されているテンプレートは、「/src/Eccube/Resource/template/default/Product/detail.twig」ではなく、「/app/template/default/Product/detail.twig」の方を表示していることを確認する。
変更しなかった方は、キャッシュの影響のため、「/app/cache/twig」のディレクトリを削除するか、管理画面の「コンテンツ管理>キャッシュ管理」よりキャッシュをクリアを実施する。
 
Twigテンプレートの動的な部分を変更する。
静的な情報は、追加することができましたので、次は「動的」な情報を追加する。
 
商品名の次の行に、「最終更新日」を追加してみたいと思います。
最終更新日は、dtb_products の update_date より取得して表示します。
 
update_dateの内容を表示するにあたり、まずは、twig へどの様な情報が渡されているか確認してみたいと思います。
 
商品詳細画面を表示するための処理は、「/src/Eccube/Controller/ProductController.php」に記述されています。
具体的な場所としては、「202」行目あたりの、「function detail」の部分になります。
この部分の twig へ情報をセットしている部分を探してみます。
場所は、「309」行目になります。
ProductController.php
return $app->render(‘Product/detail.twig’, array(
    ‘title’ => $this->title,
    ‘subtitle’ => $Product->getName(),
    ‘form’ => $form->createView(),
    ‘Product’ => $Product,
    ‘is_favorite’ => $is_favorite,
));
 
Twig 側へ渡されている値としては、
title
subtitle
form
Product
is_favorite
になります。
 
この中で、商品情報は、「Product」の部分になります。
商品情報(dtb_product のエンティティー)が渡されているようですので、この中のupdate_dateを表示すれば、最終更新日を表示することができそうです。
 
では、Twig 側へ、情報を表示したいと思います。
detail.twig

 
    
    

{{ Product.name }}

    

        

最終更新日:{{ Product.update_date|date(‘Y/m/d H:i’) }}

        
 
商品名の下へ、最終更新日を追加しました。
画面を表示すると、次の様に商品名の下へ「最終更新日」が表示される。
 
まとめ
基本的に、コピーして書き換えるだけですので、特に難しいところはなかったかと思います。
他のテンプレートも同じ要領でコピーして変更することにより、EC-CUBEの本体側はそのままで、独自のテンプレートを表示した状態とすることができます。
表示していくなかで、表示がおかしくなったり、エラーが発生した場合は、app配下のテンプレートを削除することにより、デフォルト状態へ戻すことができます。
 
これで、簡単な表示変更はできるようになりましたが、処理を変更してテンプレートへ表示する項目を追加するには、プラグインで拡張することが必要となってきます。
(本体を直接変更しない場合)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です