![見出し画像](https://assets.st-note.com/production/uploads/images/98477142/rectangle_large_type_2_0ce24075ab4089e8a6020b0b0e9d261b.jpeg?width=1200)
【shopify】メタフィールドで入力した文章を改行付で出力させる方法
商品毎に注意書きなどの入力用にメタフィールドの「複数行のテキスト」を使った時に入力したまま(改行あり)で出力する方法をまとめました。
さっきちょっと困ったので、お困りの方はお試しくださいませ。
メタフィールド「複数行のテキスト」をliquidで取得
{{ product.metafields.custom.test }}
「custom.test」のところはご自分で設定したメタフィールドの名前に置き換えてください。
メタフィールドの入力内容を取得するだけなら上記のコードだけでOK。
メタフィールドの値を取得するもう1つの方法
{%- assign items_text = product.metafields.custom.test.value -%}
{%- for memo in items_text -%}
{{ memo }}
{%- endfor -%}
上記のコードでメタフィールドの値を出力できます。
「product.metafields.custom.test.value」の「.value」で入力内容を取得しているようです。
この記述がないと全く表示されませんので、ご注意を。
ちなみにフィルターを使わない状態なら「{{ product.metafields.custom.test }}」で取得できる内容と同じなので、わざわざこの記述方法を取る必要はないかと思います。
フィルターを使って「改行」を反映させる方法
{%- assign items_text = product.metafields.custom.test.value | newline_to_br -%}
{%- for memo in items_text -%}
{{ memo }}
{%- endfor -%}
先程のコードに「| newline_to_br」の記述を追加した状態です。
この追加コードがフィルターになります。
「newline_to_br」で文字列の各改行の前に<br>タグを挿入してくれます。
他にもフィルターが用意されているので、うまく組み合わせて使えば、いろいろできそうな感じがします。
フィルターについて
下記のサイトでフィルターの解説がされていたので、参考になると思います。
今回、お世話になりました。
https://qiita.com/eijiSaito/items/b4a1675ec196546aa4f2
メタフィールドの正規表現を使ったら実現できるかも?
やろうとして分からなかったのですが…
メタフィールドの設定画面に正規表現の追加項目があるので、分かる人ならそちらを使う方が楽かもですね。
ネットで調べても私にはよく分からなかったので、詳しい方いらっしゃったらぜひお教えいただきたいものです。
今回のコードの完成形
{%- if product.metafields.custom.test.value != blank -%}
{%- assign items_text = product.metafields.custom.test.value | newline_to_br -%}
{%- for memo in items_text -%}
{{ memo}}
{%- endfor -%}
{%- endif -%}
「{%- if product.metafields.custom.test.value != blank -%}」を入れて、入力があった時だけ表示させるという条件分岐をさせました。
商品によって表示を変えたい時には便利だと思います。
おまけ
ネットで検索すると「split」を使う方法が出てくるんですが、メタフィールドでは使えないようで効かなかったです。
セクションで設定する内容とかなら効くのかもしれません。
※ご注意
このコードはshopifyのdawn7.0.0で検証しています。
保障、サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。
子育てと両立しながらデザイナーやってます。 フリーランス歴9年、法人成してもうすぐ3期目。基本ノンプログラマーですが、wordpress、shopfyなどカスタマイズ好きでいろいろやってます。 この記事がみなさまのお役に立てますように!