Shopifyテーマ Chapter4 商品ページ

これまでのチャプターではShopifyのテンプレートファイルがどのようなURLでレンダリングされるかを見てきました。今回はproduct.liquidファイルについてみていきます。

商品ページのレンダリング

サイト訪問者が商品ページをみたときにはproduct.liquidのliquidコードファイルがデフォルトでレンダリングされます。また別バージョンの商品ページ用のファイルを作り、商品によって別のデザインのページを表示させることも可能です。
*OS2.0仕様では、オンラインストアエディタからも別のJSONテンプレートを作成することができるようになりました。

下記はproduct.liquidテンプレートファイルの中身の例です。

<h2>{{ product.title }}</h2>
{{ product.description }}
<form action=“/cart/add” method=“post” enctype= “multipart/form-data”>
<select name=“id”>
{% for variant in product.variants %}
{% if variant.available == true %}
<option value=“{{variant.id}}”> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled=“disabled”> {{ variant.title }} -
sold out!</option>
{% endif %}
{% endfor %}
</select>
<input type=“submit” name=“add” id=“add” value=
“Add to Cart” class=“button”>
</form>

先のチャプターで紹介したように、LiquidファイルはHTMLとLiquidコードで構成されています。

商品に関するアウトプット

最初の一行目<h2>{{ product.title }}</h2>を見てください。見出し 2 の h2 の html タグでproduct.titleが囲まれていることがわかります。
このproduct.titleには Shopify ストアの管理画面で、商品のタイトルとして登録されたデータが出力されます。そして最終的には h2 の html タグによって「見出し 2」の装飾がされてブラウザ上に表示されることになります。

その後の{{ product.description }}には管理画面で商品の説明として登録されたデータが出力されます。
もちろん、この{{ product.description }}を<p> </p>などで囲ってパラグラフとして表示させることも可能です。

カートへ商品をいれるためのform

次に<form>のタグを見てみます。

<form action=“/cart/add” method=“post” enctype= “multipart/form-data”>
<select name=“id”>

このactionのアトリビュートは非常に重要です。この例では/cart/addが指定されており、このformのactionが実行されることにより、商品アイテムがカートに送られることを意味しています。

Liquidコードの例

次にliquidコードの例をみてみます。

{% for variant in product.variants %}
{% if variant.available == true %}
<option value=“{{variant.id}}”> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled=“disabled”> {{ variant.title }} -売り切れ!</option>
{% endif %}
{% endfor %}

• {% for %} ループが商品のバリエーションのLiquidコレクションをループさせています。

• {% if %}により商品バリエーションが購入可能状態かどうかの条件文になっています。

• もし商品のバリエーションが購入可能状態であればoptionのエレメントにその商品バリエーションの ID を value として設定し、金額が表示されるようになっています。

• 金額は liquid フィルターの money_with_currencyを使い通貨単位とともに表示されるようにしてあります。

• 購入可能状態でない場合は{% else %} のタグにより「売り切れ！」と表示されるようになっています。

• {% endif %}で条件文を終了させています。

• 最後に{% endfor %}によりループを終了させています。

最後の< input type="submit" >は選択された<select>内の<option>がこの<form >のタグの action を実行するようにしてあります。/cart/addによりショッピングカートに送られることになります。

このテンプレートでは商品とそのバリエーションのオブジェクトをつかっています。productには他にもたくさんのプロパティがあります。他のプロパティについてはこちらが参考になります。

テンプレートの拡張

上記の例はシンプルなものですが、もっと他にもコードを付け加えることももちろん可能です。

• 商品とそのバリエーションの写真variant imagesを加えることもできます。詳しくはこちら

• Shopify JavaScript のスニペットを使いより良く商品のバリエーションを表示させることもできます。詳しくはこちら

• | tフィルターとlocal fileを使いテーマを多言語対応させることもできます。詳しくはこちら

• 他のファイルからsectionを表示させることもできます

今回はproduct.liquidの紹介ですが、OS2.0ではJSON形式によるテンプレートでの実装も可能です