EC-CUBE4の商品詳細で子カテゴリを選択すると関連カテゴリが複数表示されるのを解消する方法

2020年10月20日 2020年10月22日

ECキューブ4をいじっていて、とても厄介なというか何でこんな初期仕様何だろうと思っているのが、商品詳細ページに出力される関連カテゴリの項目。

これ自体はパンくずリストの役割として、商品の所属するカテゴリ別一覧への導線としてあったほうが便利です。
ただ問題は出力される表示方法。

カテゴリに親子関係を持たせている場合、子カテゴリを選択していると親カテゴリの列も出力されてしまうのです。
これが邪魔でしょうがない。
今回はこの仕様を変更した際のカスタマイズの備忘録。

関連カテゴリで親カテゴリの列を消したい。

このキャプチャでいうと、このチェリーアイスクッキーは

１：新作
２：アイス
３：アイス（アイスクッキーから遡った大カテゴリ） > アイスクッキー
４：シリーズ
５：シリーズ（オーガニックから遡った大カテゴリ） > オーガニック

で５行で７列のカテゴリに所属しているということです。
でも３と５で親カテゴリにもリンクがついているので、結果２と４が邪魔なんです。

だからこれを消したかった。

商品詳細ページのテンプレートを編集してみる

商品詳細ページでは【関連カテゴリ】というタイトルで表示されておりますね。
でこのタイトルを変えようと思えば、みなさまご存知のようにtwigファイルの編集です。

デフォルトテーマの（カスタムテーマを利用していない場合）のファイルの場所は

【app/template/default/Product/detail.twig】

ですね、管理画面内メニューのページ管理からいけます。

【app/template/default/Product/detail.twig】

{# 関連カテゴリ #}
{% if Product.ProductCategories is not empty %}
    <div class="ec-productRole__category myCategory-list">
        <div>{{ '関連カテゴリ'|trans }}</div>
        {% for ProductCategory in Product.ProductCategories %}
            <ul>
                <li>
                    {% for Category in ProductCategory.Category.path %}
                        <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
                        <span>＞</span>{% endif -%}
                    {% endfor %}
                </li>
            </ul>
        {% endfor %}
    </div>
{% endif %}

ここが商品ページで関連カテゴリとして出力される部分です。
そう。
見たらわかるのですがこの時点ではもう親カテゴリがどうとか、子カテゴリがどうとかの話は終わっていて、
<ul>
<li style="list-style-type: none;">〜<li>
</ul>
で「カテゴリに所属している場合、親カテゴリまで遡ってリンクで出力する」っていう記述なんです。つまりもうこの記述時点では親カテゴリの出力部分を制御とかもうできなかったんです。
ので、少し考え方を変えました。

例えば、アイスクッキーをカテゴリを登録をすると、親カテゴリであるアイスにも自動的に登録されてしまいます。

これは本来問題ではなく、その場合3の列が表示されていいので、じゃぁ2をどうやって排除するか。

これはECキューブの根本の仕様を変更してみました。

商品登録画面で子カテゴリにチェックを入れた際、自動的に親カテゴリにチェックが入ってしまうのを制御。

つまり管理画面で、通常アイスクッキー（子カテゴリ）にチェックを入れて（A）商品登録や更新をすると、自動的にアイス（親カテゴリ）にもチェックが入（B）ります、

つまり(A)のチェックで表示される関連カテゴリが、
３：アイス（アイスクッキーから遡った大カテゴリ） > アイスクッキー

(B)のチェックで表示される関連カテゴリが
２：アイス

ということなのです。

このBの挙動を制御しました。

実際に編集したテンプレートと編集コード

いじったファイル
【src/Eccube/Controller/Admin/Product/ProductController.php】

変更前の記述（486行目〜）

// カテゴリの登録
// 一度クリア
/* @var $Product \Eccube\Entity\Product */
foreach ($Product->getProductCategories() as $ProductCategory) {
    $Product->removeProductCategory($ProductCategory);
    $this->entityManager->remove($ProductCategory);
}
$this->entityManager->persist($Product);
$this->entityManager->flush();

$count = 1;
$Categories = $form->get('Category')->getData();
$categoriesIdList = [];
foreach ($Categories as $Category) {
    foreach ($Category->getPath() as $ParentCategory) {
        if (!isset($categoriesIdList[$ParentCategory->getId()])) {
            $ProductCategory = $this->createProductCategory($Product, $ParentCategory, $count);
            $this->entityManager->persist($ProductCategory);
            $count++;
            /* @var $Product \Eccube\Entity\Product */
            $Product->addProductCategory($ProductCategory);
            $categoriesIdList[$ParentCategory->getId()] = true;
        }
    }
    if (!isset($categoriesIdList[$Category->getId()])) {
        $ProductCategory = $this->createProductCategory($Product, $Category, $count);
        $this->entityManager->persist($ProductCategory);
        $count++;
        /* @var $Product \Eccube\Entity\Product */
        $Product->addProductCategory($ProductCategory);
        $categoriesIdList[$ParentCategory->getId()] = true;
    }
}

変更後

// カテゴリの登録
// 一度クリア
/* @var $Product \Eccube\Entity\Product */
foreach ($Product->getProductCategories() as $ProductCategory) {
    $Product->removeProductCategory($ProductCategory);
    $this->entityManager->remove($ProductCategory);
}
$this->entityManager->persist($Product);
$this->entityManager->flush();

$count = 1;
$Categories = $form->get('Category')->getData();
$categoriesIdList = [];
foreach ($Categories as $Category) {
//親カテゴリ表記消去
//	foreach ($Category->getPath() as $ParentCategory) {
//        if (!isset($categoriesIdList[$ParentCategory->getId()])) {
//            $ProductCategory = $this->createProductCategory($Product, $ParentCategory, $count);
//            $this->entityManager->persist($ProductCategory);
//            $count++;
//            /* @var $Product \Eccube\Entity\Product */
//            $Product->addProductCategory($ProductCategory);
//            $categoriesIdList[$ParentCategory->getId()] = true;
//        }
//    }
    if (!isset($categoriesIdList[$Category->getId()])) {
        $ProductCategory = $this->createProductCategory($Product, $Category, $count);
        $this->entityManager->persist($ProductCategory);
        $count++;
        /* @var $Product \Eccube\Entity\Product */
        $Product->addProductCategory($ProductCategory);
 //       $categoriesIdList[$ParentCategory->getId()] = true;
    }
}

上記の15〜25行目までを無効化。
さらに32行目も無効化で終わりです。

これで無事に関連カテゴリで親カテゴリ単体の列を消去できました。

ECキューブテンプレートをいじる場合は、ちゃんとカスタムテーマを作った上でいじっていきましょう。
一回サイト作ったらECキューブ本体はもう絶対アプデしないよって方はそのままいじっても大丈夫ですが。

この関連カテゴリはUI的には大変優秀だと思っているので、ぜひもう一つ工夫して使いやすさアップをしてみてください。