【EC-CUBE4】特定タグの商品詳細ページに共通のテキストやアイコンを表示する

特定のタグが付いた商品の詳細ページ上部(商品名の上)に、共通のテキストやアイコンを表示するには?

本記事では、以下のように「おすすめ商品」タグが付いた商品の詳細ページに「オススメの商品です!」というテキストを表示する方法を紹介します。
管理画面の操作のみで完結するので、プログラミングに慣れていない方でも簡単に実装できます!

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

目次

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

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

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

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

本ページ冒頭の実装例の位置(商品名の上)に表示させる場合、<div class="ec-grid2__cell">内、{# 商品名 #}の上にコードを挿入します。

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

        {# ここから #}
        {#タグ別注意書き #}
        {% for Tag in Product.Tags %}
            {% if Tag.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)が含まれる場合にテキストを表示させるようにしています。詳細は以下記事をご覧ください。


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

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 %}

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次