Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What are the problem?
Organization

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

はじめに

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

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

linklist オブジェクト

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

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

linklist.handle

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

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

リンクリストの`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は、メディアのプレビュー画像を返します。

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?