Liquid、JavaScriptなどに関する質問
メタフィールドで以下のように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>
こちらの情報分岐の方法がわかりません。
お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。
どうぞよろしくお願いします。
解決済! ベストソリューションを見る。
成功
テーマカスタマイザーで各メタフィールドを設定すれば、商品ごとのメタフィールド値が出力されます。
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が反映されます。
ひょっとしたらもっとスマートな方法があるかもしれませんが、イメージ通りに出力できるかと思います。
成功
テーマカスタマイザーで各メタフィールドを設定すれば、商品ごとのメタフィールド値が出力されます。
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用のメタフィールドを出力することができました。
丁寧なご説明で分かりやすかったです。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024