「Dawn」テーマ PRODUCTSページの「折りたたみ可能なタブ」にメタフィールドの項目毎に分岐をしたい

[ダダ]

メタフィールドで以下のようにHTMLとテキストを表示するフィールドを作ってPRODUCTSページの「折りたたみ可能なタブ」に表示させたいです。

・metafields.my_fields.html        HTMLを表示するフィールド

・metafields.my_fields.text　　テキストを表示するフィールド

main-product.liquidファイル内に以下の様に書くと問題なく表示されます。

{{ product.metafields.my_fields.html}}

{{ product.metafields.my_fields.text}}

今回は以下「折りたたみ可能なタブ」内に入れて動的に変更できるようにしたいです。

{%- when 'collapsible_tab' -%}
            <div class="product__accordion accordion" {{ block.shopify_attributes }}>
              <details>
                <summary>
                  <div class="summary__title">
                    {% render 'icon-accordion', icon: block.settings.icon %}
                    <h2 class="h4 accordion__title">
                      {{ block.settings.heading | default: block.settings.page.title }}
                    </h2>
                  </div>
                  {% render 'icon-caret' %}
                </summary>
                <div class="accordion__content rte">
                  {{ block.settings.content }}
                  {{ block.settings.page.content }}
                </div>
              </details>
            </div>

こちらの情報分岐の方法がわかりません。

お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。

どうぞよろしくお願いします。

[mrtc · Accepted solution]

テーマカスタマイザーで各メタフィールドを設定すれば、商品ごとのメタフィールド値が出力されます。
https://help.shopify.com/ja/manual/online-store/themes/os20/theme-structure/sections/#metafields-and...

ただ、何故かHTMLタグは文字列としてそのまま表示されてしまいますので、やはり分岐が必要になります。
方法はいろいろ考えられますが、ぱっと思いついたのはこんな感じです。

1. Schemaにブロック設定を追加

collapsible_tabのブロック設定に以下の設定を追加します。

{
	"type": "checkbox",
	"id": "apply_html",
	"label": "メタフィールドのHTMLを適用"
},

2. ブロックに分岐を追加

collapsible_tabのコンテンツ出力コードを以下のように分岐します。
先程設定したブロック設定が有効な場合はメタフィールドコードで出力し、それ以外は通常通り表示される分岐です。

<div class="accordion__content rte">
  {% if block.settings.apply_html %}
  	{{ product.metafields.my_fields.html }}
  {% else %}
  	{{ block.settings.content }}
  {% endif %}
  {{ block.settings.page.content }}
</div>

3. カスタマイザーのブロック設定を更新

折りたたみ可能なタブのブロック設定に「メタフィールドのHTMLを適用」というチェックボックスが表示されますので、HTMLのメタフィールドを設定したブロックにチェックを入れたらHTMLが反映されます。

ひょっとしたらもっとスマートな方法があるかもしれませんが、イメージ通りに出力できるかと思います。

[ダダ]

ご連絡ありがとうございます！

無事HTML用のメタフィールドを出力することができました。

丁寧なご説明で分かりやすかったです。