見出し画像

【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などカスタマイズ好きでいろいろやってます。 この記事がみなさまのお役に立てますように!