はじめに
今回は、Liquidのオブジェクトについて一つ一つまとめていきます。
product_optionからrequestまでをまとめていきます。
それでは、頑張っていきましょう。
The product_option object
product_option オブジェクトは、製品オプション配列の各オプションで利用可能です。製品オプシ ョ ン配列には、 product.options_with_values でアクセスできます。
product_option オブジェクトには、以下の属性があります。
product_option.name
製品オプションの名前を返します。
product_option.position
製品オプション配列内の製品オプションの位置を返します。
<ul>
{% for product_option in product.options_with_values %}
<li>{{ product_option.position }} - {{ product_option.name }} </li>
{% endfor %}
</ul>
アウトプットは以下になります。
<ul>
<li>1 - Color</li>
<li>2 - Size</li>
</ul>
product_option.selected_value
この製品オプションに対して現在選択されている値を返します。
<select>
{% for value in product_option.values %}
<option {% if product_option.selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
アウトプットは以下になります。
<select>
<option selected>Red</option>
<option>Green</option>
</select>
product_option.values
この製品オプションの可能な値の配列を返します。
<ul>
{% for value in product_option.values %}
<li>{{ value }}</li>
{% endfor %}
</ul>
アウトプットは以下になります。
<ul>
<li>Red</li>
<li>Green</li>
</ul>
The recommendations object
recommendationオブジェクトは、販売、商品説明、商品とコレクションの関係から得られるデータに基づいて、特定の商品に関連した商品レコメンデーションを提供します。
商品推薦は、新しい注文や商品データが利用可能になるにつれて、時間の経過とともにより正確になります。
商品推薦の仕組みの詳細については、「商品ページに商品推薦を表示する」を参照してください。
recommendationsオブジェクトは、<base_url>?section_id=<section_id>&product_id=<product_id>へのHTTPリクエストでレンダリングされたテーマセクションで使用された場合にのみ、製品を返します。
base_urlを決定するには、routes.product_recommendations_url属性を使用します。ハードコードされたURLではなく、routesオブジェクトを使用することで、製品のレコメンデーションが正しいロケールでロードされるようになります。
レコメンデーションオブジェクトの実装方法については、「製品レコメンデーション API セクションのレスポンスで製品レコメンデーションを表示する」を参照してください。
recommendations オブジェクトには以下の属性があります。
recommendations.performed
有効なパラメータを指定して recommendations エンドポイントを通じてレンダリングされるテーマセクションの内部で recommendations オブジェクトが参照されている場合に true を返します。
以下がrecommendations.performedのパラメーターです。
| Parameters | Description | Required |
|---|---|---|
| product_id | おすすめ商品を表示したい商品のID | yes |
| section_id | 推奨オブジェクトが使用されているセクションのID | yes |
| limit | 結果の数を最大10まで制限します | no |
recommendations.products_count
製品の推奨数を返します。recommendations.performedがfalseの場合は0を返します。
recommendations.products
製品のレコメンドを返します。これらのオブジェクトは製品です。 Recommendations.performedがfalseの場合、製品は返されません。
たとえば、このLiquidスニペットは、製品の推奨事項を表示するための条件を作成します。
{% if recommendations.performed %}
{% if recommendations.products_count > 0 %}
{% for product in recommendations.products %}
{{ product.title | link_to: product.url }}
{% endfor %}
{% endif %}
{% else %}
<div class="placeholder">Placeholder animation</div>
{% endif %}
囲んでいるセクションが同期的にレンダリングされると、次の出力が生成されます。
Placeholder animation
また、エンドポイント/recommendations/products?section_id=<section_id>&product_id=<product_id>から囲み部分がレンダリングされると、以下のような出力が得られます。
Product title
Another product title
The request object
リクエストオブジェクトは、ストアへのアクセスに使用されたURLとアクセスされているページに関する情報を返します。
request.design_mode
テーマエディタからリクエストが行われているかどうか。 request.design_modeを使用して、テーマエディターでの望ましくない動作を無効にすることができます。
{% if request.design_mode %}
<!-- This will only render in the theme editor -->
{% endif %}
これは、テーマエディタで表示されるストアフロントのプレビューを変更するために使用すべきではありません。ほとんどの場合、テーマエディタでマーチャントが見るプレビューは、顧客がライブストアで見るプレビューと一致するはずです。
この変数のユースケースは、テーマエディタのセッションデータがページトラッキングスクリプトに含まれないようにすることです。もう1つのユースケースは、サードパーティAPIを使用して、テーマエディタにはエラーを返して出力しますが、ライブストアには出力しません。
request.host
request.hostを使用して、顧客がアクセスしているドメインを確認できます。
{{ request.host }}
your-store.myshopify.com
例えば、複数のドメインを持っている場合は、リクエストに応じて異なる挨拶を表示することができます。
{% if request.host == 'myshop.com' %}
Welcome USA!
{% elsif request.host == 'myshop.ca' %}
Welcome Canada!
{% else %}
Welcome!
{% endif %}
request.locale
現在のリクエストのshop_localeを返します。
request.path
現在のページへのパスを返します。
request.pathは、既存のページへのURLのみを返します。 URLが存在しない場合は、JavaScriptを使用して完全なURLを取得する必要があります。
{{ request.path }}
/collections/classics/products/chambray-shirt
request.page_type
現在のページのタイプを返します。これらは異なるページタイプです。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。