1. TOP
  2. Shopify
  3. 【Shopify】オブジェクトの中身を確認する（PHPのprint_rやJavaScriptのconsole.logのようなイメージ） - #番外編
詳しくはこちら
Shopify
 | 

【Shopify】オブジェクトの中身を確認する（PHPのprint_rやJavaScriptのconsole.logのようなイメージ） - #番外編

Shopifyで開発している際に、「オブジェクトの中身を確認したいな〜」と思ったことはありませんか？

私は多々ありました。

 

PHPのprint_r、JavaScriptのconsole.logのような機能が実はliquidにもあります！

今回はそれを紹介します。

 

 

■バックナンバー

目次

jsonフィルター

liquidでオブジェクトの中身を確認するにはjsonフィルターを使います。

object | jsonのように記述します。

 

collection.productsやproductのようなプロパティを持つオブジェクトに対してjsonフィルターは使えます。

 

// 例）
{{ collection.products | json }}
{{ product | json }}

試しに使ってみよう

では、試しに商品詳細ページで、{{ product | json }}と記述してサイト上で確認してみましょう。

おそらく、サイト上にproductオブジェクトのプロパティがjson形式で出力されているはずです。

 

しかし、一行でずらーっと出力されており、これだと見にくいと思います。

なので、JavaScriptを使い、一行で出力されたjsonテキストを整形して見やすくしたいと思います。

JavaScriptでjsonテキストを整形する

コード

(() => {
  if (!document.querySelector('.pre-json')) return;
  class BuetifyPreJson {
    constructor(obj) {
      this.elms = document.querySelectorAll(`${obj.selector}`)
    }
    buetify() {
      [...this.elms].forEach(_elm => {
        const jsonText = _elm.textContent
        const jsonTextParse = JSON.parse(jsonText)
        _elm.textContent = JSON.stringify(jsonTextParse, null, 2)
      })
    }
    init() {
      this.buetify()
    }
  }
  const buetifyPreJson = new BuetifyPreJson({
    selector: '.pre-json',
  })
  buetifyPreJson.init()
})();

※es6記法です

解説

上記のコードをそのままJavaScriptのファイルにコピペすれば準備は完了です。

 

<pre class="pre-json">
    {{ product | json }}
</pre>

このように、<pre>タグに.pre-jsonクラスを付与して、その中でjsonフィルターを記述します。

 

<pre>タグを使わないと、整形された状態でサイトに表示されないので、必ず<pre>タグを使って下さい。

.pre-jsonクラスは、先程のJavaScriptのコードを書き換えれば好きなクラスに変更できます。

まとめ

この方法を見つけてから以前よりスムーズに開発ができるようになったので、ぜひ皆さんも試してみてください。

今回の方法はあくまでデバッグとして使っているので、本番リリース時には確認用のコードを削除し忘れないように気をつけましょう。

 

 

■バックナンバー

関連記事