この記事では、商品詳細ページに表示されるカテゴリーを以下のように修正する方法について紹介しています。
親〜子のカテゴリーのすべてが、それぞれパンくずリストのような形で表示されている。
「ジェラート」「彩のデザート」は表示が重複しており、その分関連カテゴリ欄が大きく表示されてしまっている。
単体表示
重複したカテゴリーは表示せず、登録されているカテゴリーをID順に表示させる。
ID順の表示のため、カテゴリーの階層順に表示されない場合がある。（親カテゴリーのIDが子カテゴリーのIDより大きい場合など。）
パンくずリスト表示
デフォルトと同じパンくずリスト形式の表示だが、親となるカテゴリーのパンくずリストは表示させず、もっとも下層の子のみ表示させる。
なお、表示がわかりやすいよう「フルーツ」カテゴリも登録してある。
同じ親をもつ子のカテゴリーが複数ある場合、親の表示が重複することがある。
カテゴリーを表示するためのコード
商品詳細ページで関連カテゴリを表示する部分は、320行目付近に書かれています。
この部分を修正することで表示内容を変更できます。
もしカテゴリー表示自体をなくしたい場合、この部分をごっそり消すかコメントアウト（コードを{# #}で囲む）すればOKです。
重複なしカテゴリー単体表示
上図のように、重複したカテゴリーは表示させず、「｜」で区切って一つずつ登録カテゴリーを表示させるコードです。
前項の関連カテゴリのコード（赤枠部分）を以下コードで置き換えると実装できます。
{# 関連カテゴリ #}
{% if Product.ProductCategories is not empty %}
<div class="ec-productRole__category">
<div>{{ '関連カテゴリ'|trans }}</div>
{% for ProductCategory in Product.ProductCategories %}
<a href="{{ url('product_list') }}?category_id={{ ProductCategory.category_id }}">{{ ProductCategory.Category.name }}</a> {%- if loop.last == false %}
<span>｜</span>{% endif -%}
{% endfor %}
</div>
{% endif %}<span>タグに書かれた「｜」を変更すれば、カテゴリーの区切りは好きな文字や記号に変えられます。
重複なしパンくずリスト表示
上図のように、カテゴリーを階層順（パンくずリスト形式）で表示させるコードです。
前項の関連カテゴリのコード（赤枠部分）を以下コードで置き換えると実装できます。
{# 関連カテゴリ #}
{% if Product.ProductCategories is not empty %}
<div class="ec-productRole__category">
<div>{{ '関連カテゴリ'|trans }}</div>
{% for ProductCategory in Product.ProductCategories %}
{% if (ProductCategory.Category.Children.snapshot == null) %}
<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>
{% endif %}
{% endfor %}
</div>
{% endif %}個人的には、デフォルトのパンくずリスト表示よりこちらの方がスッキリしていて好みです。
まとめ
以上、カテゴリー表示形式をよりスッキリさせる方法を紹介しました。
EC-CUBE管理画面のみでカスタマイズできるので、専門的な知識が不要でファイルサーバーを弄らずに修正できるのが良いですね。
ただ今回修正したコードを深く理解したい場合、まずEC-CUBEで採用されている「Twigテンプレート」を学ぶ必要があります。
当サイトではTwigについても解説していますので、詳しく知りたい方は以下記事もご覧ください。