はじめに
今回は、Liquidのオブジェクトについて一つ一つまとめていきます。
blockからcartをまとめていきます。
blockオブジェクト
こちらを参考にしました。
まずは概要を押さえましょう。
ブロックは、セクションブロックの配列の中の1つのブロックの内容や設定を表します。ブロックオブジェクトは、セクションファイル内で section.block をループすることでアクセスすることができます。
blockはShopifyのschemaを弄る際に使います。
blockはShopify特有の概念なので、初めての人は理解するのが難しいかもしれません。簡単に解説すると、管理画面のカスタマイズ画面で弄れる、セクションの可変部分です。
上記の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は、注文メールテンプレート、チェックアウトの注文ステータスページ、および注文プリンターなどのアプリでアクセスできます。
{{ 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 オブジェクトを参照ください。
{{ cart.currency.iso_code }}
USD
cart.discount_applications
カートの割引アプリケーションの配列を返します。
{% 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
カート内のアイテムの数を返します。
{{ 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は、注文メールのテンプレート、チェックアウトの注文ステータスページ、オーダープリンターなどのアプリでアクセスできます。カートノートの使用方法の例については、「お客様に質問して詳細を確認する」を参照してください。
{{ note }}
Hope you like the gift, Kylea!
cart.original_total_price
割引が適用される前のカートの小計を返します。
cart.total_discount
カートのすべての割引の合計（節約された金額）を返します。
cart.total_price
割引が適用された後、カート内のすべてのアイテムの合計価格を返します。
cart.total_weight
カート内のすべてのアイテムの総重量を返します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。