【Shopify】liquidのオブジェクトについてまとめてみた (linklist, location, media)

# はじめに

この記事は、Liquid オブジェクトについて日本語訳したものです。

`linklist`, `location`, `media`オブジェクトをまとめていきます。



# linklist オブジェクト

`linklist`オブジェクトは、Shopifyの管理画面で「メニュー」と呼ばれているものです。

`linklist`オブジェクトの属性についてそれぞれ見ていきます。



## linklist.handle

`linklist.handle`は、リンクリストのハンドルを返します。

リンクリストのハンドルは、管理画面のメニューの設定から確認・編集することができます。

![リンクリストの`handle](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/8baa1dc1-acb9-a577-1d95-8b8311d593b2.png)


`handle`については[こちら](https://shopify.dev/docs/themes/liquid/reference/basics/handle)。



## linklist.levels

`linklist.levels`は、リンクリストに含まれるネストされたレベルの数を返します。

例えば、以下のような`main-manu`のメニュー構造があるとします。

```.liquid:メニュー構造
Main menu
  └ Home
  └ About Us
    └ Locations
      └ Fukuoka
      └ Tokyo
```

```.liquid:Input
{% assign menu = linklists.main-menu %}
{{ menu.title }}: {{ menu.levels }}
```

```.liquid:Output
Main Menu: 3
```


## linklist.links

`linklist.links`は、リンクリスト内のリンクの配列を返します。

```.liquid:Input
{% for link in linklists.main-menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
```

```.liquid:Output
<a href="/">Home</a>
<a href="/collections/all">Catalog</a>
<a href="/blogs/news">Blog</a>
<a href="/pages/about-us">About Us</a>
```



## linklist.title

`linklist.title`は、リンクリストのタイトルを返します。



# location オブジェクト

`location`オブジェクトを用いると、Liquidを使用してストアの位置情報にアクセスすることができます。

`location`オブジェクトの属性についてそれぞれ見ていきます。



## location.address

`location.address`は、そのロケーションに対応するアドレスオブジェクトを返します。



## location.id

`location.id`は、ロケーションのIDを返します。



## location.latitude

`location.latitude`は、そのロケーションに関連付けられた緯度を返します。住所が確認されていない場合は`null`を返します。



## location.longitude

`location.longitude`は、そのロケーションに関連付けられた軽度を返します。住所が確認されていない場合は`null`を返します。



## location.name

`lobation.name`は、ロケーションの名前を返します。



# media オブジェクト

`media`オブジェクトは、`product.media`配列で返されるオブジェクトを表します。

`media`オブジェクトは、以下のオブジェクトタイプを表すことができる抽象オブジェクトです。

- [image](https://shopify.dev/docs/themes/liquid/reference/objects/image)
- [model](https://shopify.dev/docs/themes/liquid/reference/objects/model)
- [video](https://shopify.dev/docs/themes/liquid/reference/objects/video)
- [external_video](https://shopify.dev/docs/themes/liquid/reference/objects/external-video)

[media filters](https://shopify.dev/docs/themes/liquid/reference/filters/media-filters)を使用して URL とモデルビューアタグを生成し、商品ページにメディアがレンダリングされるようにすることができます。

テーマでの製品メディアの使用についての詳細は、[ Adding media to themes](https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video)を参照してください。

`media`オブジェクトには以下の属性があります。
各メディアタイプに固有の属性もあります。これらの追加属性の詳細については、サポートされている各オブジェクトタイプのリファレンスを参照してください。



## media.alt

`media.alt`は、管理者の商品ページで設定したメディアのaltタグを返します。



## media.id

`media.id`は、メディアのIDを返します。



## media.media_type

`media.media_type`は、オブジェクトのメディアタイプを返します。

`media_type`プロパティを使用して、希望するタイプのすべてのメディアに対して`product.media`配列をフィルタリングすることができます。

```.liquid:Input
{% assign images = product.media | where: "media_type", "image" %}
{% for image in images %}
  {{ image.alt }}
{% endfor %}
```

```.liquid:Output
Image of the black stroller

Image of the grey stroller
```



## media.position

`media.position`は、`product`オブジェクトのメディア配列内の特定のメディアオブジェクトの位置を返します。



## media.preview_image

`media.preview_image`は、メディアのプレビュー画像を返します。



# 終わりに

今回の記事はここまでになります。
お疲れ様でした。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search