Shopify Liquidを使ったメタフィールド・メタオブジェクトのリッチテキストの出力方法を解説

メタフィールドとメタオブジェクトの基本概念

メタフィールドとは？

Shopifyで商品やページに追加情報を関連付けるための機能です。
これにより、標準フィールド以外のカスタムデータを柔軟に追加できます。

メタフィールドはテキストや数値、画像など様々なデータ型に対応しており、動的にコンテンツを表示することが可能です。管理画面から簡単に設定できるため、技術的な知識がなくても利用できます。
また、Shopify APIを通じてアプリ開発者も活用できるため、ストアの機能を大幅に拡張することができます。

メタオブジェクトとは？

2023年1月にアーリーアクセスされたShopifyの機能です。
メタオブジェクトは、カスタムデータを構造化して保存・管理するための機能です。
製品、コレクション、顧客など、様々なリソースに関連付けて追加情報を保存できます。メタオブジェクトは、フィールドと呼ばれる複数の属性で構成され、テキスト、画像、日付など様々なデータ型をサポートしています。

管理画面から簡単に作成・編集でき、オンラインストアのテーマやAPIを通じてアクセスできます。
これにより、製品仕様、サイズ表、FAQなど、構造化されたカスタムコンテンツを柔軟に作成し、ストアフロントに表示することが可能になります。

メタフィールドとメタオブジェクトの出力方法

そのままリッチエディタを出力すると

そのまま出力するとJSON形式で出力されてしまいます。
これをHTMLとして出力するための処理を解説していきます！

リッチテキストをHTMに変換するための処理

まず、snippets（スニペット）にファイルを作成します。
スニペットについてわからない方は以下の記事の一読をおすすめします。

metaobject_richtext_inline.liquidを作成

「/snippets/metaobject_richtext_inline.liquid」を作成します。

Liquid

{%- assign result = richtext['value'] -%}
{%- if richtext['italic'] -%}{%- assign result = '' | append: result | append: '' -%}{%- endif -%}
{%- if richtext['bold'] -%}{%- assign result = '' | append: result | append: '' -%}{%- endif -%}
{{- result -}}

metaobject_richtext_link.liquidを作成

「/snippets/metaobject_richtext_link.liquid」を作成します。

Liquid

{%- assign result = blank -%}
{%- assign link_url = richtext['url'] -%}
{%- assign title_attribute = blank -%}
{%- unless richtext['title'] == blank -%}{%- assign title_attribute = ' title="' | append: richtext['title'] | append: '"' -%}{%- endunless -%}
{%- assign target = blank -%}
{%- if richtext['target'] == '_blank' -%}{%- assign target = ' target="_blank"' -%}{%- endif -%}
{%- assign temp_text_inner = blank -%}
{%- for children_item in richtext.children -%}
    {%- capture temp_text_link -%}{% render 'metaobject_richtext_inline' , richtext: children_item %}{%- endcapture -%}
    {%- assign temp_text_inner = temp_text_inner | append: temp_text_link -%}
{%- endfor -%}
{%- assign result = '<a href="' | append: link_url | append: '"' | append: title_attribute | append: target | append: '>' | append: temp_text_inner | append: '</a>' -%}
{{- result -}}

metaobject_richtext.liquidを作成

「/snippets/metaobject_richtext.liquid」を作成します。

Liquid

{%- assign result = blank -%}
{%- for property in text.children -%}
    {%- assign temp_text = blank -%}
    {%- assign type = property.type -%}
    {%- assign elm = property.children -%}
    {%- assign type = property.type -%}
    {%- capture temp_text -%}
        {%- if type == 'heading' -%}
            {%- assign wrp_tags = property.level  -%}
            <h{{ wrp_tags }}>
                {%- for elm_items in elm -%}
                {%- if elm_items.type == 'text' -%}
                    {%- render 'metaobject_richtext_inline' , richtext: elm_items -%}
                {%- elsif elm_items.type == 'link' -%}
                    {%- render 'metaobject_richtext_link' , richtext: elm_items -%}
                {%- endif -%}
            {%- endfor -%}
            </h{{ wrp_tags }}>
        {%- comment -%} H1～h6 {%- endcomment -%}
        {%- elsif type ==  'paragraph' -%}
            <p>
            {%- for elm_items in elm -%}
                {%- if elm_items.type == 'text' -%}
                    {%- render 'metaobject_richtext_inline' , richtext: elm_items -%}
                {%- elsif elm_items.type == 'link' -%}
                    {%- render 'metaobject_richtext_link' , richtext: elm_items -%}
                {%- endif -%}
            {%- endfor -%}
            </p>
        {%- comment -%} P {%- endcomment -%}
        {%- elsif type ==  'list' -%}
            {%- assign wrp_tags = 'ul' -%}
            {%- if property.listType == 'ordered' -%}{%- assign wrp_tags = 'ol' -%}{%- endif -%}
            <{{ wrp_tags }}>
                {%- for elm_items in elm -%}
                    {%- assign elm_items_children = elm_items.children -%}
                    <li>
                        {%- for children_items in elm_items_children -%}
                            {%- if children_items.type == 'text' -%}
                                {%- render 'metaobject_richtext_inline' , richtext: children_items -%}
                            {%- elsif children_items.type == 'link' -%}
                                {%- render 'metaobject_richtext_link' , richtext: children_items -%}
                            {%- endif -%}
                        {%- endfor -%}
                    </li>
                {%- endfor -%}
            </{{ wrp_tags }}>
        {%- endif -%}
    {%- endcapture -%}
    {%- assign result = result | append: temp_text -%}
{%- endfor -%}
{{- result | newline_to_br -}}

処理の準備ができたら出力します。

Liquid

{%- render 'metaobject_richtext' , text: 「メタフィールド、メタオブジェクトのリッチテキスト」.value -%}

valueプロパティを使用する前は、JSONエンコードされた配列として保存されています。 valueプロパティを使用した場合、Liquidで直接使用可能な文字列の配列に変換されます。これによりfor文で反復処理を行うことができるようになります。

まとめ

いかでしたでしょうか？
今回の記事では、メタフィールド、メタオブジェクトのリッチテキストの出力方法の解説をしました。

今回のポイントをまとめますと、次のとおりです。

今回の記事はShopifyカスタマイズを行う中級者向けの記事になります。
こちらを活用することでLiquidの構築がスムーズに行えるようになります。

今後のストア開発では、これらの機能を積極的に取り入れ、顧客体験の向上とビジネスの成長につなげていくことをおすすめします。

最後までお読みいただきありがとうございました！