【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属性でアクセスされた場合のみです。

{% 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 }}を出力するのと同様です。

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

products/my_image.jpg
products/my_image.jpg

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

{{ image | img_url: "medium" }}

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

image.variants

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

{% 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を使用して出力は同じになることがわかります。

{{ 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とラインアイテムのプロパティのハッシュから構成されます。

{{ 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を使用して確認することが出来ます。

{% 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属性を以下の構文に与えることで、商品ページにラインアイテムプロパティの入力を追加することが出来ます。

properties[property-name]

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

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

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

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

{% 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を、-（ハイフン）で区切って組み合わせたものです。

{{ line_item.title }}

Balloon Shirt - Medium

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

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を返します。

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

{{ 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

{% 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になります。

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

{{ 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が返されます。

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

{% 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 %}

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の場合です。

<!-- 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 機能を実現することができます。