【Shopify】liquidのオブジェクトについてまとめてみた ( image, line_item, link )

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

image、line_item、linkのオブジェクトをまとめていきます。

こちらを参考にしました。

#imageオブジェクト
imageオブジェクトの概要についてドキュメントからの引用です。

##image.alt
商品ページで設定した画像の alt タグを返します。

##image.aspect_ratio
画像のアスペクト比（width/height）を返します。

##image.attached_to_variant?
画像がバリエーションに関連付けられている場合はtrueを返し、そうでないときはfalseを返します。

これは、バリエーションに関連付けられていない画像のギャラリーを作成したい場合に使用できます。

attached_to_variant?が返されるのは、画像が商品に関連付けられている場合のみで、product.mediaからアクセスした場合は利用できません。

##image.height
画像の高さをピクセル単位で返します。

##image.id
画像のIDを返します。

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

imageオブジェクトのときは、常に image という値が返されます。

media_typeが返されるのは、画像が商品に関連付けられていて、product.media属性でアクセスされた場合のみです。

.liquid

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

Image of the black stroller

Image of the grey stroller

##image.position
画像が商品に関連付けられているとき、productオブジェクトのメディア配列における画像の位置を返します。

##image.preview_image
画像のプレビュー画像を返します。

##image.product_id
画像が商品に関連付けられている時、関連付けられている商品ののIDを返します。

##image.src
商品画像の相対パスを返します。

{{ image }}を出力するのと同様です。

.liquid

{% for image in product.images %}
    {{ image.src  }}
    {{ image }}
{% endfor %}

products/my_image.jpg
products/my_image.jpg

ShopifyのCDNに保存されている画像のURLを返すには、URLフィルタを使用します。

.liquid

{{ image | img_url: "medium" }}

//cdn.shopify.com/s/files/1/0087/0462/products/shirt14_medium.jpeg?v=1309278311

##image.variants
画像が関連付けられているバリエーションの属性の配列を返します。

.liquid

{% for image in product.images %}
    {% for variant in image.variants %}
            {{ image.src }} - used for the variant: {{ variant.title }}
      {% endfor %}
{% endfor %}

products/red-shirt.jpeg - used for the variant: Red
products/green-shirt.jpg - used for the variant: Green
products/yellow-shirt.jpg - used for the variant: Yellow

##image.width
画像の幅をピクセル単位で返します。

#line_itemオブジェクト
line_itemオブジェクトの概要についてドキュメントからの引用です。

line_itemは、ショッピングカート内の一行を表します。

カート内の商品の種類ごとに一つのラインアイテムがあります。

line_itemオブジェクトは、cart.itemsを介して（cart.items.line_item）全Liquidテンプレート、line_itemsを介して（line_items.line_item）通知メールテンプレート、チェックアウトの注文ページ、Order Printerのようなアプリでアクセスできます。

##line_item.discount_allocations
割引額と割引アプリケーションへの参照を含むすべての割引の一覧を返します。

##line_item.final_line_price

すべてのラインアイテムの合計価格（割引金額は含まない）を返します。

line_item.final_priceに、line_item.quantityを掛けたものです。

##line_item.final_price
全ての割引金額を含んだラインアイテムの価格を返します。

##line_item.fulfillment
ラインアイテムのフルフィルメントを返します。

フルフィルメントとは、受注後の商品の仕分けや、梱包、発送、代金請求までの一連の業務を総称する言葉です。

##line_item.fulfillment_service
ラインアイテムのバリアントに関連するフルフィルメントサービスを返します。

フルフィルメントサービスを持たないラインアイテムはmanualを返します。

##line_item.gift_card
ラインアイテムがギフトカードであれば、true、ギフトカードでなければ、falseを返します。

##line_item.grams
ラインアイテムの重さを返します。

重さの書式設定は、weight_with_unitフィルタを使用します

##line_item.image
ラインアイテムの画像を返します。

img_urlフィルタを直接ラインアイテムに適用することも出来ます。

バリエーションの画像が存在しない場合に、商品の画像を出力することが出来ます。

以下の例で、line_item.image、img_urlを使用して出力は同じになることがわかります。

.liquid

{{ line_item.image | img_url: '100x100' | img_tag }}
{{ line_item | img_url: '100x100' | img_tag }}

<img src="//cdn.shopify.com/s/files/1/0159/3350/products/hvt401_red_100x100.jpg?v=1398706734" />
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/hvt401_red_100x100.jpg?v=1398706734" />

##line_item.key
ラインアイテムの一意の識別子であるラインアイテムキーを返します。

ラインアイテムキーは、ラインアイテムのvariant IDとラインアイテムのプロパティのハッシュから構成されます。

.liquid

{{ line_item.key }}

17285644550:70ff98a797ed385f6ef25e6e974708ca

##line_item.line_level_discount_allocations
割引額と割引アプリケーションへの参照を含む、ライン固有の割引割当のリストを返します。

##line_item.line_level_total_discount
ラインアイテムに適用されているすべての割引の合計金額を返します。

この値には、カートに追加された割引（ギフトカード等）は含まれません。

##line_item.message
ラインアイテムに割引を適用した時に、割引メッセージを返します。

この属性は、スクリプトエディタアプリを使用しているときにのみ値を持ちます。

##line_item.options_with_values
ラインアイテムの商品オプション（ColorやSize等）から、選択された値の配列を返します。

line_item.options_with_values要素は、forループを使って表示することが出来ます。

各オプションとキーと値のペアで、option.nameがオプション名、option.valueが選択されたオプションの値となります。

ラインアイテムにバリエーションが存在するかどうかは、product.has_only_default_varinatを使用して確認することが出来ます。

.liquid

{% unless line_item.product.has_only_default_variant %}
  <ul>
    {% for option in line_item.options_with_values %}
      <li>{{ option.name }}: {{ option.value }}</li>
    {% endfor %}
  </ul>
{% endunless %}

<ul>
　　<li>Size: 42mm
　　<li>Color: Silver
　　<li>Strap: Stainless Steel
</ul>

##line_item.original_line_price
ラインアイテムの割引が適用される前の合計価格を返します。（商品一個の価格 x 数量）

##line_item.original_price
割引が適用される前のラインアイテム一個の価格を返します。

##line_item.product
ラインアイテムの商品を返します。

##line_item.product_id
ラインアイテムの商品IDを返します。

##line_item.properties
カートに追加されたアイテムのカスタム情報の配列を返します。

商品ページでラインアイテムのプロパティを取ってきて、テキストの刻印などの商品のカスタマイズ情報を得ることが出来ます。

入力にname属性を以下の構文に与えることで、商品ページにラインアイテムプロパティの入力を追加することが出来ます。

.liquid

properties[property-name]

以下は、"text"タイプのHTML入力を使用して、商品ページにカスタマイズ情報を取得する方法の例です。

Shopfiy UI elements generatorを使用してline_item.propertiesを入力することが可能です。

.html

 <label for="engraving">Engraving</label>
 <input id="engraving" type="text" name="properties[Engraving]">

アクセスすると、line_item.propertiesの配列要素がforループを使用して表示されます。

.liquid

{% unless line_item.properties == empty %}
<ul>
  {% for property in line_item.properties %}
  <li>{{ property.first }}: {{ property.last }}</li>
  {% endfor %}
</ul>
{% endunless %}

<ul>
　　<li>Monogram: My dog is the cutest
　　<li>Gift wrap: Yes
</ul>

##line_item.quantity
ラインアイテムの数量を返します。

##line_item.requires_shipping
ラインアイテムが配送を必要な場合は、true、そうでない場合は、falseを返します。

##line_item.selling_plan_allocation
ラインアイテムに販売プラン（通常販売や定期購入）がある時、selling_plan_allocationオブジェクトを返します。

チェックアウトが完了した後、販売プラン情報が記録されません。

その結果、order.line_itemsからラインアイテムのselling_plan_allocationにアクセスすると、以下のプロパティが使用できません。

• selling_plan_group_id
• selling_plan.group_id
• selling_plan.options

また、order.line_itemsからselling_plan_allocationオブジェクトにアクセスしても、以下の価格設定プロパティは利用できません。

• compare_at_price
• price_adjustments
• selling_plan.price_adjustments

##line_item.sku
ラインアイテムのSKUを返します。

##line_item.successfully_fulfilled_quantity
ラインアイテムのフルフィルメントされた数量を返します。

##line_item.taxable
ラインアイテムの商品に税が課されている場合、true、課されていない場合、falseを返します。

##line_item.title
ラインアイテムのタイトルを返します

line_item.titleは、ラインアイテムのproduct.titleとvariant.titleを、-（ハイフン）で区切って組み合わせたものです。

.liquid

{{ line_item.title }}

Balloon Shirt - Medium

商品タイトルやバリエーションタイトルだけを出力するには、それぞれの変数のタイトルにアクセスする必要があります。

.liquid

Product title: {{ line_item.product.title }}
Variant title: {{ line_item.variant.title }}

Product title: Balloon Shirt
Variant title: Medium

##line_item.unit_price
商品の単価を返します。

価格には、その商品に適用されている割引が適用されます。

Unit（単価）は、ドイツかフランスの店舗でのみ使用することが出来ます。

##line_item.unit_price_measurement
ラインアイテムのunit_price_measurementオブジェクトを返します。

##line_item.url
ラインアイテムの相対URLを返します。

相対URLには、ストアのルートURL（mystore.myshopify.com）

##line_item.variant
ラインアイテムのバリエーションを返します。

##line_item.variant_id
ラインアイテムのバリエーションのIDを返します。

##line_item.vendor
ラインアイテムの商品のベンダーを返します。

##line_item.id
ラインアイテムのIDを返します。

ラインアイテムのIDは、オブジェクトによって異なります。

返される値は以下のようになります。

• cart.item：ラインアイテムのバリエーションのIDを返します。このIDは一意ではなく、同じバリエーションの複数のアイテムで共有することが出来ます。

• checkout.line_items：チェックアウトのために生成された一時的な一意のハッシュを返します。

• order.line_items：一意の整数値のIDを返します。

#linkオブジェクト
linkオブジェクトの概要についてドキュメントからの引用です。

linkオブジェクトは単独で呼び出すことはできません。
必ずlinklist内で呼び出す必要があります。

linkの属性について見ていきましょう。

##link.active
リンクオブジェクトがアクティブな場合はtrue、非アクティブの場合はfalseを返します。

リンクが指すリソースがURL構造の一部の場合、リンクはアクティブとみなされます。

例えば、現在のページが/blogs/news/snowfallであれば、以下のリンクはアクティブです。

• /blogs/news
• /blogs/news/snowfall

メニュー内の複数のリンクは、link.urlの値が異なっていても、link.activeを用いることでtrueにすることが出来ます。

追加の例

collection/men/bootsの時、

• collection/men
• colleciton/men/boots

/products/awesome-productの時、

• /products/awesome-product
• /collections/awesome-collection/products/awesome-product
• /collection/all/products/awesoe-product

##link.child_active
子リンクがアクティブなら、その親リンクはtrueを、子リンクがアクティブでない場合、その親リンクはfalseを返します。

以下の例では、ウェブサイトで「Montreal」ページが表示されている場合のLiquidのコードを出力します。

MontrealがアクティブならLocationsもアクティブになり、trueを返します。

さらに、Locationsがあくてぃぶになるので、About usもアクティブになり、trueを返します。

.liquid

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

.liquid

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_active: {{ link.child_active }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_active: {{ sub_link.child_active }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: active: {{ sub_sub_link.active }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Main Menu

Home: child_active: false
About Us: child_active: true
　In the news: child_active: false
　Locations: child_active: true
　　Montreal: active: true
　　Ottawa: active: false

##link.current
ページのリンクが、現在表示しているページと一致しているときは場合は、trueを返し、一致しないときは、falseを返します。

以下の例では、/collections/winterのページが表示されているときのLiquidのコードを出力しています。

• Summer collection, /collections/sumer
• Winter collection, collections/winter
• All products, /collections/all

.liquid

{% for link in linklists.main.links %}
  <a href="{{ link.url }}"
    {% if link.current %}aria-current="page" class="highlight"{% endif %}
  >
    {{ link.title }}
  </a>
{% endfor %}

<a href="/collections/summer">Summer collection</a>
<a href="/collections/winter" aria-current="page" class="highlight">Winter collection</a>
<a href="/collections/all">All products</a>

link.currentプロパティは、現在のページのURLとlink.urlの値との間の正確なURLの一致を識別しません。

以下の2点に気をつけなければなりません。

• link.currentは、URLパラメータを無視します。
• link.currentは、商品のURLとコレクション対応の商品のURLをページの内容にマッチするものとしています。

現在のページのURLが/collections/winter?sort_by=price_ascendingの場合、link.urlが、/collections/winterのリンクに対して、link.currentは、trueとなります。

また、コレクションが並び替えられた後も、trueを返します。

現在のページのURLが、/products/wool-glovesの場合、link.currentは以下のlinkオブジェクトに対してtrueを返します。

• /collections/gloves/products/wool-gloves
• /products/wool-gocves

##link.child_current

link.currentの値が、trueとなる子リンクを親リンクが持つ時、その子リンクと親リンクに対してtrueを返します。

以下の例では、Montrealのページを開いているときの挙動です。

Montrealと、その親リンクであるLocations、About Usがtrueになります。

.liquid

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

.liquid

{{ linklists.main.title }}

{% for link in linklists.main.links %}
  {{ link.title }}: child_current: {{ link.child_current }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: child_current: {{ sub_link.child_current }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: current: {{ sub_sub_link.current }}
    {% endfor %}
  {% endfor %}
{% endfor %}

Main Menu

Home: child_current: false
About Us: child_current: true
　In the news: child_current: false
　Locations: child_current: true
　　Montreal: current: true
　　Ottawa: current: false

##link.levels
リンクに含まれる子リンクの層の数を返します。

以下の例では、About Usは、二層の子リンクがあるので、2が返されます。

.liquid

Main Menu
  └ Home
  └ About Us
    └ Locations
      └ Montreal
      └ Ottawa

.liquid

{% assign menu = linklists.main-menu %}

{{ menu.title }}: {{ menu.levels }}
{% for link in menu.links %}
  {{ link.title }}: {{ link.levels }}
  {% for sub_link in link.links %}
    {{ sub_link.title }}: {{ sub_link.levels }}
    {% for sub_sub_link in sub_link.links %}
      {{ sub_sub_link.title }}: {{ sub_sub_link.levels }}
    {% endfor %}
  {% endfor %}
{% endfor %}

.liquid

Main Menu: 3
  Home: 0
  About Us: 2
    Locations: 1
      Montreal: 0
      Ottawa: 0

##link.links
親リンクに関連付けられた子リンクの配列を返します。

##link.object
リンクに関連付けられた変数を返します。

可能な型は以下の4つです。

• product
• collection
• page
• blog

link.objectを通して、上記の4つの変数で利用可能な属性のいずれかにアクセスすることが出来ます。

以下の例では、リンクにproductがあり、商品の値段が$10の場合です。

.liquid

<!-- If the product links to a product with a price of $10 -->
{{ link.object.price | money }}

$10

##link.title
リンクのタイトルを返します。

##link.type
リンクのタイプを返します。

タイプは以下の10種類あります。

• blog：ブログを指している場合

• catalog_link：カタログページ（/collections/all）を指している場合

• collection_link：コレクションリストページ（/collections/all）を指している場合

• collections_link：コレクションページを指している場合

• frontpage_link：ホームページ（/）を指している場合

• http_link：外部のウェブページまたは、タイプやベンダーのコレクションを指している場合（例：/collections/types?q=Pants）

• page_link：ページを指している場合

• policy_link：ポリシーページを指している場合

• product_link：商品ページを指している場合

• search_link：検索ページを指している場合

##link.url
リンクのURLを返します。

#終わりに
今回の記事はここまでになります。

お疲れさまでした。

Shopify アプリのご紹介

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