特定のカテゴリに属する商品の一覧を表示する

URLをコピーしました！

過去にEC-CUBEを使用しているクライアントから「キャンペーン対象商品のみを一覧表示するページを作成してほしい」というご要望がありました。

ひとつひとつ商品情報をコーディングしてもいいのですが、チリも積もればなんとやら。

それでは毎回時間がかかるので、”キャンペーン対象商品”をカテゴリにして、あずみ.NETさんの記事を参考に「特定のカテゴリのみを表示する」カテゴリ専用ページを作成しました。

他にもキャンペーン情報などを掲載したいとのことだったので、一覧ページのカスタマイズではなく新規でページを作成しました。

以下、コードです。

{% extends 'default_frame.twig' %}

{% block main %}
    {# ▼特定のカテゴリ一覧を表示するための設定
        .find()内に表示したいカテゴリのIDを入力 
    #}
    {% 
    set Category = repository("Eccube\\Entity\\Category").find(8) //今回は仮でidを8に設定
    set products = repository("Eccube\\Entity\\Product")
    .getQueryBuilderBySearchData({'category_id': Category}) //上記で設定した変数CategoryでカテゴリIDを渡す
    .setMaxResults(10) //1ページで表示する上限
    .getQuery()
    .getResult()
    %}
    {#▲特定のカテゴリ一覧を表示するための設定#}
    
    {#▼商品一覧を表示#}
    <div class="ec-role">
        <div class="ec-newItemRole">
            <div class="ec-newItemRole__list">
                {% if products %}
                <div class="ec-shelfRole">
                    <ul class="ec-shelfGrid">
                    {% for Product in products %}
                        <li class="ec-shelfGrid__item">
                            <a href="{{ url('product_detail', {'id': Product.id}) }}">
                                <p class="ec-shelfGrid__item-image">
                                    <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
                                </p>
                                <p>{{ Product.name }}</p>
                               {% if Product.description_list %}
                                <p>{{ Product.description_list|raw|nl2br }}</p>
                                {% endif %}
                                <p class="price02-default">
                                    {% if Product.hasProductClass %}
                                        {% if Product.getPrice02Min == Product.getPrice02Max %}
                                            {{ Product.getPrice02IncTaxMin|price }}
                                        {% else %}
                                            {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
                                        {% endif %}
                                    {% else %}
                                        {{ Product.getPrice02IncTaxMin|price }}
                                    {% endif %}
                                    <span>(税込)</span>
                                </p>
                            </a>
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {#▲商品一覧を表示#}
    
    {% endblock %}

流れとしては、

{% set Category = repository("Eccube\\Entity\\Category").find(8) %}

で表示するカテゴリを取得し、

{% 
    set products = repository("Eccube\\Entity\\Product")
    .getQueryBuilderBySearchData({'category_id': Category})
    .setMaxResults(10) //1ページで表示する上限
    .getQuery()
    .getResult()
 %}

で、カテゴリIDを渡して表示するだけのシンプルな作りなので、EC-CUBEにそこまで馴染みがない人でも動くと思います。

今回はページで作成しましたが、元記事ではブロックで使用しています。

こちらの方が使い勝手はいいかも。

あずみ.net