【Shopify】Shopify CLIでLiquidオブジェクトを取得する(デバッグ)

Shopifyのテーマを開発する際、商品情報を取得するためにliquidオブジェクトを使いますが、これをいちいちjavascriptを書いてconsole出力するのは手間ですよね。

今回は、shopify cliのconsoleコマンドを使って効率的にliquidオブジェクトの中身を確認するデバッグ方法について解説します。

解説

商品ページのliquidオブジェクト「product」の中身を取得する方法について説明していきます。

まず、任意の商品ページを確認します。

ドメイン部分を除くURLは以下になりますので、コピーしておきます。

/products/daily-air-max-ladys

次にコンソール(macならterminalなど)を開き、先ほどコピーした商品ページのURLと共に以下のコマンドを実行します。

shopify theme console --url [確認したいページのURL]

例) shopify theme console --url /products/daily-air-max-ladys

Liquid

コマンド実行すると、ブラウザが開き、以下の画面が表示されますので、このままコンソールに戻ります。

※もし、ストアをパスワード付きで公開している場合は、パスワード入力画面が表示されるので入力すると同じように以下の画面が表示されます。

コンソールは以下のようになっているかと思います。

これで対話形式でliquidオブジェクトを取得する準備ができました。

では、productと入力してEnterを押します。

test on  1_portfolio [$] via  v16.16.0 
❯ shopify theme console --url /products/daily-air-max-ladys
╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                          │
│  Activate the Shopify Liquid console in your browser and enter your store password if prompted.                                          │
│                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Welcome to Shopify Liquid console
(press Ctrl + C to exit)

> product

Bash

実行すると、以下のようにproductの中身が取得できました。

shopify theme consoleを使えば、効率的にテーマ開発のデバッグがしやすくなるかと思います。

{
  "id": 8785105715499,
  "title": "DAILY AIR MAX",
  "handle": "daily-air-max-ladys",
  "description": "<p class=\"p1\" data-mce-fragment=\"1\">世界中のユーザーに愛用されるベストセラーシューズが、さらにソフトなアッパーを備えて登場。DAILY TRIALならではの快適性と機能性を兼ね備えた多目的パフォーマンスシューズです。</p>\n<p class=\"p1\" data-mce-fragment=\"1\">ランニングや普段使いにも最適な一足。</p>\n<p class=\"p2\" data-mce-fragment=\"1\">快適な履き心地で毎日のパフォーマンスをサポートします。</p>",
  "published_at": "2023-10-03T20:33:02+09:00",
  "created_at": "2023-10-03T20:33:06+09:00",
  "vendor": "DAILYTRIAL",
  "type": "シューズ",
  "tags": [
    "レディース"
  ],
  "price": 1500000,
  "price_min": 1500000,
  "price_max": 1500000,
  "available": true,
  "price_varies": false,
  "compare_at_price": null,
  "compare_at_price_min": 0,
  "compare_at_price_max": 0,
  "compare_at_price_varies": false,
  ~~~~~~~~~~~x

Liquid