【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
製品オプション配列内の製品オプションの位置を返します。

```.html
<ul>
  {% for product_option in product.options_with_values %}
    <li>{{ product_option.position }} - {{ product_option.name }} </li>
  {% endfor %}
</ul>
```

アウトプットは以下になります。

```.html
<ul>
  <li>1 - Color</li>
  <li>2 - Size</li>
</ul>
```

##product_option.selected_value
この製品オプションに対して現在選択されている値を返します。

```.html
<select>
  {% for value in product_option.values %}
    <option {% if product_option.selected_value == value %}selected{% endif %}>
      {{ value }}
    </option>
  {% endfor %}
</select>
```

アウトプットは以下になります。

```.html
<select>
  <option selected>Red</option>
  <option>Green</option>
</select>
```

##product_option.values
この製品オプションの可能な値の配列を返します。

```.html
<ul>
  {% for value in product_option.values %}
    <li>{{ value }}</li>
  {% endfor %}
</ul>
```

アウトプットは以下になります。

```.html
<ul>
  <li>Red</li>
  <li>Green</li>
</ul>
```

#The recommendations object
recommendationオブジェクトは、販売、商品説明、商品とコレクションの関係から得られるデータに基づいて、特定の商品に関連した商品レコメンデーションを提供します。

商品推薦は、新しい注文や商品データが利用可能になるにつれて、時間の経過とともにより正確になります。

商品推薦の仕組みの詳細については、[「商品ページに商品推薦を表示する」](https://shopify.dev/tutorials/develop-theme-recommended-products)を参照してください。

recommendationsオブジェクトは、`<base_url>?section_id=<section_id>&product_id=<product_id>`へのHTTPリクエストでレンダリングされたテーマセクションで使用された場合にのみ、製品を返します。

base_urlを決定するには、routes.product_recommendations_url属性を使用します。ハードコードされたURLではなく、routesオブジェクトを使用することで、製品のレコメンデーションが正しいロケールでロードされるようになります。

レコメンデーションオブジェクトの実装方法については、[「製品レコメンデーション API セクションのレスポンスで製品レコメンデーションを表示する」](https://shopify.dev/tutorials/develop-theme-recommended-products-using-liquid)を参照してください。

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スニペットは、製品の推奨事項を表示するための条件を作成します。

```.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 %}
```

囲んでいるセクションが同期的にレンダリングされると、次の出力が生成されます。

```.html
Placeholder animation
```

また、エンドポイント`/recommendations/products?section_id=<section_id>&product_id=<product_id>`から囲み部分がレンダリングされると、以下のような出力が得られます。


```.liquid
Product title
Another product title
```

#The request object
リクエストオブジェクトは、ストアへのアクセスに使用されたURLとアクセスされているページに関する情報を返します。

##request.design_mode
テーマエディタからリクエストが行われているかどうか。 request.design_modeを使用して、テーマエディターでの望ましくない動作を無効にすることができます。

```.liquid
{% 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

例えば、複数のドメインを持っている場合は、リクエストに応じて異なる挨拶を表示することができます。

```.liquid
{% 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
現在のページのタイプを返します。これらは異なるページタイプです。

# Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search