【Shopify】商品のオプションを表示する方法（Liquid）

こんにちは！今回は、ShopifyのLiquid言語を使って、商品のオプションを表示する方法を解説します。このコードを使えば、「色」や「サイズ」など、商品に設定されたオプションを画面に表示することができます。

（オプション：ホワイトブルーピンク の部分です）

商品オプションを表示するコード例

以下は、特定の商品オプション（例: 色）を取得して表示するためのコードです。

<!-- main-product.liquid に記述 -->
{% for option in product.options_with_values %}
  {% if option.name == '色' %}
    {{ option.values }}
  {% endif %}
{% endfor %}

コードの解説

上記のコードを分解して説明します！

{% for option in product.options_with_values %}

for
→ 繰り返し処理を行うためのLiquid構文。

product.option_with_values
→ 商品のオプション情報（名前と値）を持つオブジェクト。

in
→ 商品のオプション情報（名前と値）を、左の options という変数に入れる。
options は変数で任意の文字なので、例えば test でも動作する。

{% if option.name == '色' %}
→ 「もし商品オプションの名前が 色 の場合」に次の処理を実行。

{{ option.values }}
→ 「色」というオプションに設定された具体的な値（例: 赤、青、緑など）を取得。

{% endfor %}
→ ループの終了を意味する。

オブジェクトとは

「色々な機能をもった物体」という意味です。
物体と聞くと堅苦しいので、「色々な機能をもった雲のモコモコ」をイメージすると分かりやすいと思います！

今回は product_option という、「商品のオプション情報を持った雲のモコモコ」を使っています。

下記画像の右側に、product.options_with_values という表記があり、Shopify公式がこれを使ってと言っている。

何故、商品のオプションが表示されたのか？

1. product_option という「商品のオプション情報を持った雲のモコモコ」を使用。

2. その雲のモコモコの情報を、option という箱に入れる。

3. 情報の入った箱に対して、name をすると「商品オプションの名前」が取得できる。
   今回は色のみを表示したいので、「if文で色だけに絞る」

4. 情報の入った箱に対して values を付けて「色」を取得して表示した。

という流れになります！

ShopifyのLiquidを使えば、商品のオプションを簡単に表示することができるので、
初心者の方も少しずつカスタマイズを楽しんでくださいね！