【Liquid】商品タグで表示を切り替え

商品タグをトリガーにして表示の切り替えを行います。

テーマ

Dawn
※何も手を付けていない状態

タグ「タグ表示テスト」を商品に追加

以下コードを任意の場所に追加

main-product.liquid の200行目あたりに追加しました。

sections/main-product.liquid

<!-- タグの出力 -->
{% if product.tags contains 'タグ表示テスト' %}
タグで表示しています。
{% endif %}

表示結果

表示の調整（HTMLで記載）

Code

<!-- タグの出力 -->
{% if product.tags contains 'タグ表示テスト' %}
 <ul>
  <li>タグで表示しています1</li>
  <li>タグで表示しています2</li>
  <li>タグで表示しています3</li>
 </ul>
{% endif %}

表示結果

条件分岐

・「タグ表示テスト」があり「タグ表示テストじゃない」がない場合は、「タグ表示テストのみです。」を表示。
・「タグ表示テスト」と「タグ表示テストじゃない」がある場合は「タグ表示テストじゃないが含まれています。」を表示。
・「タグ表示テストじゃない」のみの場合は表示なし。

Code

{% if product.tags contains 'タグ表示テスト' %}
 {% unless product.tags contains 'タグ表示テストじゃない' %}
  <p>タグ表示テストのみです。</p>
 {% else %}
  <p>タグ表示テストじゃないが含まれています。</p>
 {% endunless %}
{% endif %}

タグ表示テストのみの場合

タグ表示テストのみの場合の表示結果

タグ表示テストじゃないを追加した場合

タグ表示テストじゃないを追加した場合の表示結果

以上となります。