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

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

はじめに

今回は、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を使用して、顧客がアクセスしているドメインを確認できます。

input.liquid
{{ 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を取得する必要があります。

input.liquid
{{ request.path }}

/collections/classics/products/chambray-shirt

request.page_type

現在のページのタイプを返します。これらは異なるページタイプです。

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