特定のタグが付いた商品の詳細ページ上部(商品名の上)に、共通のテキストやアイコンを表示するには?
本記事では、以下のように「おすすめ商品」タグが付いた商品の詳細ページに「オススメの商品です!」というテキストを表示する方法を紹介します。
管理画面の操作のみで完結するので、プログラミングに慣れていない方でも簡単に実装できます!
特定のカテゴリーや税率を有する商品詳細ページのカスタマイズについては以下記事で紹介しています。
ページ管理から商品詳細ページを編集する
「管理画面」→「コンテンツ管理」→「ページ管理」→「商品詳細ページ」と進み、テキストを表示したい箇所に以下コードを挿入します。
{% 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を変更してもスタイルが変更されない場合、キャッシュが残っていて反映されない場合があります。
ブラウザのキャッシュを削除して、ページを開き直してみてください。