FROM CACHE - jp_header

liquidからjsonファイルを読み込み処理したい

SIN88
観光客
4 0 1

データ管理をjsonでやりたいと考えています(特にloops処理が課題になっています)

 

assetsフォルダにdata.jsonを準備してsectionのコンポーネントから以下のようにjsonをimportしようとしたところただの文字列になってしまいできませんでした。

 

{% assign productsData =  'data.json' | asset_url | json %}
 
liquidからjsonを読み込み処理することは可能でしょうか。
よろしくお願いします。

 

 

 

2件の返信2

Qcoltd
Shopify Partner
1051 429 414

liquidの中にJSONを読み込み、それをオブジェクトとして扱いたい、ということかと思いますが、

それは現時点では難しいようです。

 

参考:

https://github.com/Shopify/liquid/issues/432

https://community.shopify.com/c/technical-q-a/creating-an-object-with-json-liquid-possible/td-p/4755...

https://stackoverflow.com/questions/57601890/is-it-possible-to-initiate-object-as-variable-in-liquid

 

有志の方が、

liquidの中で、JSONを扱えるようにするための工夫を下記にアップしてくれていますが、

https://github.com/culturekings/shopify-json-parser

We have found when looping over products in a collection can slow the liquid render time to greater than 5 seconds.

ページの表示速度が悪化するかもしれませんし、

現在、非推奨となっているincludeを使用する点も継続利用という観点では看過できないかもしれません。

 

ご存知だとは思いますし、

質問者様の要望にはそぐわない可能性が高いですが、

質問者様が扱おうとしているJSONの階層が浅いようでしたら、

split filterで配列として扱うという道もあるかもしれません。

例えば、snippets/array.liquidを用意し、

その中に、hoge,fuga,piyoと記載します。

下記のコードを準備します。

{%- capture array_string -%}
{% render "array" %}
{%- endcapture -%}
{% assign array = array_string | split: "," %}
{{ array[0] }}

このコードで、arrayの一番目の要素であるhogeが出力されます。

 


また、こちらについても、質問者様はご存知だと思いますが、

JavaScriptを利用する方法がよく紹介されています。

 

ブラウザ上ではなく、liquidの中で処理されたいということだとは思うので、

JavaScriptを使用する方法はお気に召さないかもしれませんが、

例えば、下記のようにすることでブラウザ上であればJSONを参照してページの表示を動的に変更することもできます。

{%- capture json_string -%}
{% render "json" %}
{%- endcapture -%}
<script>
  const json_string = `{{ json_string }}`;
  const obj = JSON.parse(json_string);
</script>

snippets/json.liquidを用意し、JSONを記載すると、

JavaScript変数のobjにそのJSONがobjectとして格納されます。

 

大した情報がなく恐縮です。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
SIN88
観光客
4 0 1

ありがとうございます。

 

やはり現時点では難しいのですね。。。

split filterで配列生成は行なっているのですが、あくまで簡単なデータのみです。

複雑なオブジェクトをもつ配列を上記の方法で生成するとなると可読性もとても悪く、現実的ではないと感じておりました。

 

回答ありがとうございました!