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

9135 ワード
Liquid shopify 初心者 初心者 テキストリンク

はじめに

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

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

linklist オブジェクト

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

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

linklist.handle

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

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

handleについてはこちら。

linklist.levels

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

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

メニュー構造
Main menu
  └ Home
  └ About Us
    └ Locations
      └ Fukuoka
      └ Tokyo
Input
{% assign menu = linklists.main-menu %}
{{ menu.title }}: {{ menu.levels }}
Output
Main Menu: 3

linklist.links

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

Input
{% for link in linklists.main-menu.links %}
  <a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
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オブジェクトは、以下のオブジェクトタイプを表すことができる抽象オブジェクトです。

media filtersを使用して URL とモデルビューアタグを生成し、商品ページにメディアがレンダリングされるようにすることができます。

テーマでの製品メディアの使用についての詳細は、 Adding media to themesを参照してください。

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

media.alt

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

media.id

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

media.media_type

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

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

Input
{% assign images = product.media | where: "media_type", "image" %}
{% for image in images %}
  {{ image.alt }}
{% endfor %}
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 機能を実現することができます。