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
9
Help us understand the problem. What are the problem?
Organization

【Shopify】liquidのオブジェクトについてまとめてみた (block~cart)

はじめに

今回は、Liquidのオブジェクトについて一つ一つまとめていきます。

blockからcartをまとめていきます。

blockオブジェクト

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

まずは概要を押さえましょう。

ブロックは、セクションブロックの配列の中の1つのブロックの内容や設定を表します。ブロックオブジェクトは、セクションファイル内で section.block をループすることでアクセスすることができます。

blockはShopifyのschemaを弄る際に使います。

blockはShopify特有の概念なので、初めての人は理解するのが難しいかもしれません。簡単に解説すると、管理画面のカスタマイズ画面で弄れる、セクションの可変部分です。

image.png

上記のCollectionを追加するをクリックすると、blockが追加されていきます。それをliquidファイルの中で、for文などを用いて回すことでコンテンツを画面に描画することができます。

{% for block in section.blocks %}
  <!-- output block content -->
{% endfor %}

上記のコードでは、section.blocksに複数のblockが格納されており、それをfor文で回すことによってコンテンツを描画します。

このblockオブジェクトには様々なプロパティがあるので、今回はそれらを描画していきましょう。

block.id

Shopifyによって動的に生成された一意のIDを返します。

block.settings

テーマエディタで設定したブロック設定のオブジェクトを返します。設定の固有IDを参照して設定値を取得します。

<img src="{{ block.settings.image | img_url: '800x' }}" alt="{{ block.settings.image.alt }}" />

<img src="//cdn.shopify.com/.../promo-banner1_800x.jpg" alt="New season - Spring 2017">

SectionのSchemaで定義したidに応じて、blockに設定したオブジェクトを返します。

具体例として、以下のschemaを見てみましょう。

{% schema %}
{
  "name": "Collection list",
  "settings": [
  {
     "type": "select",
     "id": "colors",
     "label": "Color scheme"

  ],
  "blocks": [
  {
    "type": "featured_collection",
    "name": "Collection",
    "limit": 6,
    "settings": [
    {
       "label": "Collection",
       "id": "collection",
       "type": "collection"
    }
    ]
  }
  ]
}
{% endschema %}

Shopifyのセクションにおいて、ユーザーが管理画面で操作できる部分を作ろうとするときにschemaを使用します。

可変ではないschemaは、section.settings.(id名)とすることでschemaのオブジェクトを指定します。

可変のSchema、つまりはblockを指定する場合は、liquidファイル内でsection.blocksを回してblockを回した後に、block.settings.(id名)とすることblockのオブジェクトにアクセスできます。

block.shopify_attributes

ブロックの属性を表す文字列を返します。

テーマエディタのJavaScript APIは、ブロックのshopify_attributesを使用してブロックを識別し、イベントをリッスンします。テーマエディタの外部では、block.shopify_attributesの値は返されません。

block.type

ブロックのスキーマで定義されている型を返します。これは、block.typeに基づいて異なるマークアップを表示するのに便利です。

{% for block in section.blocks %}
  {% if block.type == 'advert' %}
    <!-- output an image with a link -->
  {% elsif block.type == 'headline' %}
    <!-- output a header with text -->
  {% endif %}
{% endfor %}

blogオブジェクト

blogオブジェクトは以下のプロパティを持ちます。

blog.all_tags

ブログのすべての記事のすべてのタグを返します。これには、現在のページ付けビューにない記事のタグが含まれます。

{% for tag in blog.all_tags %}
    {{ tag }}
{% endfor %}

News, Music, Sale, Tips and Tricks

blog.articles

ブログ内のすべての記事の配列を返します。

記事で利用可能なすべての属性のリストはこちらのページを参照してください。

{% for article in blog.articles %}
    <h2>{{ article.title }}</h2>
{% endfor %}

以下がアウトプットです。

<h2>Hello World!</h2>
<h2>This is my second post.</h2>
<h2>Third time's a charm!</h2>

blog.articles_count

ブログ内の記事の総数を返します。この合計には、非表示の記事は含まれていません。

blog.comments_enabled?

コメントが有効な場合はtrueを返し、無効な場合はfalseを返します。

blog.handle

ブログのハンドル、つまりURLを返します。

blog.id

ブログのidを返します。

blog.moderated?

コメントがモデレートされている場合は true、モデレートされていない場合は false を返します。

blog.next_article

次の(古い)記事を返します。次の記事がない場合はnilを返します。

blog.tags

ブログ内のすべてのタグを返します。 all_tagsに似ていますが、フィルタリングされたビューにある記事のタグのみを返します。

blog.title

ブログのタイトルを返します。

blog.url

ブログの相対URLを返します。

cartオブジェクト

それではcartオブジェクトを見ていきましょう。

cartオブジェクトの注意点は以下です。

価格や合計などの金額の属性は、顧客の現地通貨で表示されます。結果を金額として表示するには、金額フィルタを使用します。

それでは、cartオブジェクトのプロパティをそれぞれ見ていきましょう。

cart.attributes

cart.attributes は、カートページのより多くの情報をキャプチャすることを可能にします。これは以下の構文で入力にname属性を与えることで行われます。

attributes[attribute-name]

アトリビュート名にダブルアンダースコア(__)のプレフィックスを追加してプライベートにすることができます。プライベート属性は、LiquidやAjax APIから読み取れないことを除いて、他のカート属性と同じように動作します。ページのレンダリングに影響を与えないデータに使用することで、より効果的なページキャッシュが可能になります。

以下に示すのは、カートページの情報を取得するために "text "タイプのHTML入力を使用する方法の基本的な例です。また、Shopify UI要素ジェネレータを使用して、cart.attributes入力を作成することもできます。

<label>What is your Pet's name?</label>
<input type="text" name="attributes[your-pet-name]" value="{{ cart.attributes.your-pet-name }}" />

cart.attributesは、注文メールテンプレート、チェックアウトの注文ステータスページ、および注文プリンターなどのアプリでアクセスできます。

input.liquid
{{ attributes.your-pet-name }}

Haku

cart.cart_level_discount_applications

カートのカート固有の割引アプリケーションの配列を返します。

{% for discount_application in cart.cart_level_discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

Discount name: SUMMER16
Savings: -$20.00

cart.currency

カートの通貨を返します。お店で複数通貨を使用している場合は、 cart.currency は顧客のローカル通貨 (プレセントメント) と同じです。そうでない場合は、カートの通貨が店舗の通貨と同じになります。

お店で使用できる通貨の一覧を返すには、 shop.enabled_currencies オブジェクトを参照ください。

input.liquid
{{ cart.currency.iso_code }}

USD

cart.discount_applications

カートの割引アプリケーションの配列を返します。

input.liquid
{% for discount_application in cart.discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

Discount name: SUMMER16
Savings: -$20.00

cart.item_count

カート内のアイテムの数を返します。

input.liquid
{{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} ({{ cart.total_price | money }})

25 items ($53.00)

cart.items

カート内のすべてのラインアイテムを返します。

cart.items_subtotal_price

ラインアイテムの割引後のカートのラインアイテムの価格の合計を返します。小計には、税金(税金が価格に含まれていない場合)、カートの割引、または送料は含まれていません。

cart.note

cart.noteを使用すると、カートページでより多くの情報を取得できます。 これは、HTMLテキストエリアを使用してカートフォームを送信し、cart.note出力をラップすることによって行われます。

<label>Gift note:</label>
<textarea name="note"></textarea>

カートページに存在できる{{cart.note}}のインスタンスは1つだけです。複数のインスタンスがある場合は、ドキュメントオブジェクトモデル(DOM)の最新のものがフォームとともに送信されます。

cart.noteは、注文メールのテンプレート、チェックアウトの注文ステータスページ、オーダープリンターなどのアプリでアクセスできます。カートノートの使用方法の例については、「お客様に質問して詳細を確認する」を参照してください。

input.liquid
{{ note }}

Hope you like the gift, Kylea!

cart.original_total_price

割引が適用される前のカートの小計を返します。

cart.total_discount

カートのすべての割引の合計(節約された金額)を返します。

cart.total_price

割引が適用された後、カート内のすべてのアイテムの合計価格を返します。

cart.total_weight

カート内のすべてのアイテムの総重量を返します。

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
9
Help us understand the problem. What are the problem?