通販サイトを制作する際、商品カテゴリー一覧は必須ですよね。
しかしながら、通販サイトはカテゴリーの数が多くなりやすく、
カテゴリー名を手書きで書いたり、写真をひとつひとつ用意したりなかなか大変です。
そこで、今回はEC-CUBE4を使用して、以下の方法を解説します。これにより、効率的かつ柔軟にカテゴリー一覧を管理することができます。
【ポイント１】カテゴリーIDを指定して掲載したいカテゴリーを表示する
重要なカテゴリーだけを表示したい場合があるかとおもいますので、今回は親カテゴリーを全件取得せずに指定したIDのみを表示する仕様です。これにより、重要なカテゴリーだけをサイトに掲載したり、子カテを一部だけサイトに掲載したりできます。
【ポイント２】最新商品の商品写真を自動取得してカテゴリーのサムネイルとして表示する
商品の画像を手動で用意するのは手間がかかる上、商品が頻繁に変わる場合には、その都度サムネイル画像を更新するのも大変です。そこで、最新商品の画像を自動的に取得し、それをカテゴリーのサムネイルとして使用することで、メンテナンスの手間を大幅に軽減できます。
実装方法
それでは実装方法についてです。
①表示したいカテゴリーのカテゴリーIDを配列で指定します。
表示したいカテゴリーを絞り込むために、対象のカテゴリーIDを配列で指定します。これにより、特定のカテゴリーだけを効率的に表示できます。
{% set arrData = ['1','2','3',...] %}
②for文でカテゴリー文ループさせます。
配列に格納したカテゴリーIDを使用して、for文で各カテゴリーをループ処理します。これにより、指定したすべてのカテゴリーを順番に表示できます。
{% for key, catId in arrData %}
{% endfor %}
③最新商品の画像を取り出します。
各カテゴリーごとに、最新商品の画像を取得します。この画像をカテゴリーのサムネイルとして使用することで、常に最新の情報を表示することができます。
{# 商品画像格納 #}
{% set Category = repository("Eccube\Entity\Category").find(catId) %}
{%
set products = repository("Eccube\Entity\Product")
.getQueryBuilderBySearchData({'category_id':Category})
.setMaxResults(1)
.getQuery()
.getResult()
%}
{% if products %}
{% for p in products %}
<div class="card-img"><img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}"/></div>
{% endfor %}
{% else %}
<div class="card-img">NOIMG</div>
{% endif %}
④カテゴリー名を取得して完成！
上記の手順を実装することで、特定のカテゴリーのみを効率的に表示し、さらに最新の画像を自動で使用することが可能になります。これにより、通販サイトの管理がより簡単かつ効率的になります。
{% set Category = repository('Eccube\Entity\Category').find(catId) %}
{{ Category.name }}
この方法を活用して、効率的な通販サイトの運営を実現してください！
