【Shopify】オブジェクト出力で”〇〇Drop”と表示されたときのプロパティの確認方法

“〇〇Drop”と表示されたが、これは何？

Shopifyのオブジェクト出力で、

“〇〇Drop”と表示されるのを見たことがないだろうか。

例えば、一つ前の記事で紹介したvideoのtypeに登録したschemaをliquidのコードで出力したいとき、試しに以下のようにしてフロント画面にどう表示されるか見てみる。

{{ block.settings.video }}

↓出力結果

VideoDrop

このとき、”〇〇Drop”と表示されるが、

これはvideoオブジェクトの中にたくさんのプロパティがあるため、どのプロパティを表示するのかを指定する必要があるという意味である。liquidに限らずphpでもdumpという関数で同じことができる。

ポイント1・liquidの{{ }}の出力テンプレートタグで、オブジェクトがもつプロパティをすべて出力！

プログラミングの世界に出てくるオブジェクトとプロパティの概念をよく理解している方であれば、このあたりがすっと把握できるかと思う。

プロパティを調べるには、以下のように記述する。

{{ block.settings.video | json }}

↓出力結果

{"alt":null,"id":34463982813499,"position":null,"preview_image":{"aspect_ratio":1.508,"height":720,"width":1086,"src":"[//xxx-online.myshopify.com/cdn/shop/files/preview_images/7ab0cf9685324dd39b49f67ace0ba026.thumbnail.0000000000.jpg?v=1687518483"},"aspect_ratio":1.508,"duration":22500,"media_type":"video","sources":[{"format":"mp4","height":480,"mime_type":"video/mp4","url"......(このあとも延々と続くので省略)

ポイント2・JSON整形

この裸で無防備に出力されたJSONは改行もなく1行で出力されるため、

これを、以下のようなJSON整形ツールにかける。

↓

表示が階層化され、明快になる。

{
  "alt": null,
  "id": 34463982813499,
  "position": null,
  "preview_image": {
    "aspect_ratio": 1.508,
    "height": 720,
    "width": 1086,
    "src": "//xxx-online.myshopify.com/cdn/shop/files/preview_images/7ab0cf9685324dd39b49f67ace0ba026.thumbnail.0000000000.jpg?v=1687518483"
  },
  "aspect_ratio": 1.508,
  "duration": 22500,
  "media_type": "video",
  "sources": [
    {
      "format": "mp4",
      "height": 480,
      "mime_type": "video/mp4",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.SD-480p-0.9Mbps-15683024.mp4",
      "width": 724
    },
    {
      "format": "mp4",
      "height": 720,
      "mime_type": "video/mp4",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.HD-720p-1.6Mbps-15683024.mp4",
      "width": 1086
    },
    {
      "format": "m3u8",
      "height": 720,
      "mime_type": "application/x-mpegURL",
      "url": "https://cdn.shopify.com/videos/c/vp/7ab0cf9685324dd39b49f67ace0ba026/xxx.m3u8",
      "width": 1086
    }
  ]
}

↓

これにより、

オブジェクトの”sources”というプロパティが配列( [0]〜[2]までの3つの配列情報 )を持っていることがわかり、かつ、そのプロパティ内にも入れ子式にプロパティを持っている構造であるとわかった。

ポイント3・ふたたび{{ }}の出力テンプレートタグで、オブジェクトの狙ったプロパティ情報を出力！

なので、表示させたい動画がmp4ファイルで、横幅1086pxの大きさのプロパティを持っているプロパティを指定し、

{{ block.settings.video.sources[1].url }}

と記述すれば取得したい動画のURL情報を出力できた。

ので、このURL情報をフロントで出力できるということで、<video>タグと絡めて動画コンテンツを表示できることにもなる。

つまりこれが、テーマのカスタマイズでvideoのschema typeに登録した動画ファイル( =videoオブジェクト )の呼び出し方にもなる。