【EC-CUBE4】特定カテゴリーの商品詳細ページに共通のテキストを表示する

本記事では、以下のように特定のカテゴリーに属する商品の詳細ページ上部（商品名の上）に、共通のテキストを表示する方法を紹介します。
管理画面の操作のみで完結するので、プログラミングに慣れていない方でも簡単に実装できます！

あわせて読みたい

【EC-CUBE4】特定タグの商品詳細ページに共通のテキストを表示する 本記事では、以下のように特定のタグが付いた商品の詳細ページ上部（商品名の上）に、共通のテキストを表示する方法を紹介します。管理画面の操作のみで完結するので、…

【動作環境】
EC CUBEのバージョン：4.2.2
サーバー：Xserver

ページ管理から商品詳細ページを編集する

「管理画面」→「コンテンツ管理」→「ページ管理」→「商品詳細ページ」と進み、テキストを表示したい箇所に以下コードを挿入します。

{% for ProductCategory in Product.ProductCategories %}
    {% if ProductCategory.Category.id == 2 %}
        <div class="ec-productRole__notice">
            {# 表示させたいテキストを入力 #}
        </div>
    {% endif %}
{% endfor %}

{% if ProductCategory.Category.id == 2 %}の数字部分は、テキストを表示させるカテゴリーのIDに修正してください。
カテゴリーのIDは、「商品管理」→「カテゴリ管理」より確認できます。

<div class="ec-grid2__cell">
    <div class="ec-productRole__profile">

        {# ここから #}
        {#カテゴリー別注意書き #}
        {% for ProductCategory in Product.ProductCategories %}
            {% if ProductCategory.Category.id == 2 %}
                <div class="ec-productRole__notice">
                    {# 表示させたいテキストを入力 #}
                </div>
            {% endif %}
        {% endfor %}
        {# ここまで #}

        {# 商品名 #}
        <div class="ec-productRole__title">
            <h2 class="ec-headingTitle">{{ Product.name }}</h2>
        </div>
        {# タグ #}

        {# ～以下略～ #}

これで、特定のカテゴリー（上記の場合はID = 2のカテゴリー）の商品にのみ、詳細ページにテキストを表示させることができました。

コード解説

Twigテンプレートでは、if文を使って表示内容を変更したり、for文を使って繰り返し処理を行うことができます。

本カスタマイズでは、まずfor文を使って商品のカテゴリー情報を一つずつ取り出し、次にif文を使って条件に合ったもの（この例ではカテゴリーID = 2）が含まれる場合にテキストを表示させるようにしています。詳細は以下記事をご覧ください。

あわせて読みたい

【EC-CUBE 4】Twig まとめ(2)　～ if / for / set / with ～ {% if %} や {% for %} の使い方 {% set %} や {% with %} で変数を扱う方法 本記事では、Twigテンプレートでよく使われる、代表的な特殊タグ4つについて纏めています。…

商品のカテゴリー情報は、Product.ProductCategoriesという変数でオブジェクト配列の形で格納されています。詳細は以下記事をご覧ください。

あわせて読みたい

【EC-CUBE 4】商品のカテゴリー情報とタグ情報を取得する 商品の登録情報は『dtb_product』テーブルに保存されていますが、カテゴリーやタグの情報は別のテーブルで管理されており、一見ではそれらの情報にどのようにアクセスす…

CSSでスタイルを変更する

次に、CSSで表示スタイルを整えていきます。
本ページ冒頭の実装例のようなスタイルを適用する場合、以下CSSコードを追加します。

.ec-productRole__notice {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dotted #ccc;
    color: red;
    font-weight: bold;
    font-size: 18px;
}

コードを追加する場所は以下のいずれか。

• 「コンテンツ管理」→「CSS管理」
• 先ほどの商品詳細ページのTwigテンプレート上部、{% block stylesheet %}<style> ~ </style>{% endblock %}内

文字の大きさや色、余白などは好みに応じて調整してください。

あわせて読みたい

【EC-CUBE 4】CSSの簡単設定と反映方法 この記事では、『EC-CUBEでCSSをカスタマイズする3つの方法』と『CSSが反映されないトラブル対処法』を、実例を交えつつ解説しています。JavaScriptのカスタマイズにつ…

CSSを変更してもスタイルが変更されない場合、キャッシュが残っていて反映されない場合があります。
ブラウザのキャッシュを削除して、ページを開き直してみてください。