2023.12.10

【EC-CUBE4.2】商品の閲覧履歴を表示するカスタマイズ方法

この記事は、EC-CUBE Advent Calendar 2023 の10日目の記事です。

EC-CUBEを活用した通販サイト運営では、お客様の興味を引き続ける工夫が重要です。今回は、お客様が以前に興味を示した商品を再度前面に出すことで、購入確率を高める「商品の閲覧履歴表示機能」のカスタマイズ方法を紹介します。

1. カスタマイズの概要とステップ

このカスタマイズでは、ユーザーが閲覧した商品の履歴を保存しサイト上で簡単に表示させる方法を説明します。以下の２つのステップに分けて、機能を実装していきます。

イベントリスナーの設定：商品ページを閲覧した時に、セッションに情報を登録するイベントリスナーを設定
Twigの更新：セッションから閲覧履歴を取得して表示するタグをTwigに登録

2. イベントリスナーの設定

まずは、お客様が商品ページを閲覧したときに、その商品情報をセッションに保存するイベントを作ります。

主要部分のコードは以下の通りで、保持する閲覧履歴の件数を変更したい場合は、array_slice() の第二引数（デフォルトでは10件まで保存）の数値を変更することで修正できます。

以下のPHPファイルを「/app/Customize/EventListener/」のディレクトリに保存してください。

https://github.com/cajiya/sample_code/blob/main/2023/1208/ProductDetailListener.php

public function onKernelRequest(RequestEvent $event)
{
    $request = $event->getRequest();
    if ($request->attributes->get('_route') === 'product_detail') {
        $productId = $request->attributes->get('id');
        $Product = $this->productRepository->findOneBy(['id' => $productId ]);

        // セッションから閲覧履歴を取得
        $history = $this->session->get('product_history', []);

        // 閲覧履歴に同じ商品が存在するか確認
        foreach ($history as $key => $storedProduct) {
            if ($storedProduct->getId() === $Product->getId()) {
                // 同じ商品を見つけたら削除
                unset($history[$key]);
                break;
            }
        }

        // 商品を履歴の先頭に追加
        array_unshift($history, $Product);

        // 履歴を最大10件に制限
        $history = array_slice($history, 0, 10);

        // セッションに履歴を保存
        $this->session->set('product_history', $history);
    }
}

3. Twigの更新

次は、EC-CUBEの管理画面からの操作になります。

セッションに保存したデータはどのTwigからも取得することができるので、表示したい箇所に相当するTwigファイルを「コンテンツ管理＞ブロック管理」または「コンテンツ管理＞ページ管理」から探して、以下のコードを登録してください。

<ul>
    {% for product in app.session.get('product_history') %}
        <li>
            <a href="{{ url('product_detail', {id:product.id}) }}">{{ product.name }}</a>
        </li>
    {% endfor %}
</ul>

登録が完了すると閲覧履歴を表示させることができます。以下は、商品ページのメインエリア上部に履歴を表示させたイメージです。