FROM CACHE - jp_header

特定タグが見つからない時、見出しとdivを非表示にしたい

特定タグが見つからない時、見出しとdivを非表示にしたい

alb
Shopify Partner
6 0 0

こんにちは
商品に特定タグが付与されている場合、特定タグのみ表示したいです。
また、特定タグが見つけられなかった場合には空の<div></div>自体も非表示にしたいです。
お分かりになる方、教えてくださいm(_ _)m

サンプルコード

 

<p><span class="option-name">見出し: </span>
{% for tag in product.tags %}
{% if tag contains 'タグ名1' or tag contains 'タグ名2' or tag contains 'タグ名3' %}
{% capture url %}/collections/collection-name/{{tag | handle}}{% endcapture %}
<span class="option-value">{{ tag | link_to:url }}</span>
{% endif %}
{% endfor %}
</p>

 

 

1件の返信1

株式会社フルバランス
Shopify Partner
1537 549 697

はい、一例ですが、商品に「__tag:”表示したいタグ名”」の形式でタグを登録し、以下のようなコードを追加することで可能です。

 

サンプルで頂いている条件分岐の中に「タグ名1」「タグ名2」などと固有の名称を入れる形ですと、名称を増やす場合に都度コードの編集が必要になるため、商品に登録をするタグ側で表示したい内容を特定するための文言(今回の場合 "__tag:")を入れる形が良いと思います。

 

また、見出しやdivを非表示にと頂いている点につきましては、下記コード例のように実際に出力をする箇所(HTML)とLiquidのロジックの部分を分けて書くことで対応ができると思います。

(サンプルのコードにコレクションへのリンクの記述がございましたが、一旦ご質問として頂いているタグベースでの要素の出しわけに絞って回答をさせていただきました。)

 

---

コード例:

{% assign isVisible = false %}

{% for tag in product.tags %}
     {%-if tag contains '__tag' %}
       {% assign isVisible = true %}
       {% assign tagName = tag | split: '__tag:' | last  %}
       {% break %}
    {% endif %}
{% endfor %}

 

{% if isVisible %}
     <div>
        <span>見出し: </span>
        <span>{{ tagName }}</span>
     </div>
{% endif %}

---

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス