前回「「shopify」でECサイトを制作したときの備忘録」では、テーマフォルダの構造などについて書きました。
今回から目的別にこんなことをしました。ってことを書いていきます。主にはliquidのコード紹介になっていきます。

今回は「コレクションごとの商品一覧を出力する」です。
早速以下のコード例をご確認ください。

任意のコレクションに属する商品の「商品画像」「商品名」「商品の金額」を出力したコード例です。

以降、1行ずつ解説していきますので、コード例を見ながら確認すると分かりやすいです。

1行目

「assign」はjavascriptでいうところの「var」です。

1行目は、変数「collection」に表示したいコレクションを格納しています。
section.settings.collectionは表示ページのurlによって、コレクションのhandleを判定します。

例えば myshopify.com/collections/shirt の場合
collections[section.settings.collection] と collections['shirt'] は同義です。

ここでは便宜的に collection = collections['shirt'] として説明をしていきます。

3行目、22行目

「collection.products」をfor文で回しています。
「collection」は「collections['shirt']」ですので、「shirt」のコレクションに属する商品が出力されます。
for文が1周するたびに、商品情報の配列が「product」に格納されます。

後に出てきますが、「product.title」とすれば商品名が出力されるなど、「product」は連想配列のようになっています。

4行目、21行目

「product.available」は商品が利用できるかどうかを、bool値で返してくれます。
shopifyの商品管理画面では、「公開」「非公開」のような設定はなく、代わりに「販売チャネル」という設定値があります。

この販売チャネルで「Online Store」にチェックの有無により「product.available」は「true」か「false」を返します。

ここでは販売チャネルで「Online Store」にチェックが入っているときだけ表示するようにしています。

7〜11行目

ここでは商品画像を出力しています。

「product.featured_image」は商品登録画像で1枚目の画像を出力してくれます。

{{ product.featured_image }}だけだと、「product/画像名」としか表示されず、これは正しい画像のパスにはなりません。
{{ product.featured_image | img_url }}とすることで、正しい画像パスを出力してくれます。

{{ product.featured_image | img_url:'300x' }}の「'300x'」はどのような大きさの画像を登録しても、widthが300pxの画像を表示します。
また{{ product.featured_image | img_url:'x300' }}と書けば、heightが300pxの画像を表示してくれます。これは便利です！

また{% if product.featured_image == nil %}で条件分岐することで、商品画像が登録されていないときには、「noImage.jpg」を表示するようにしています。

12行目

商品名を{{ product.title }}で出力しています。

13〜19行目

ここでは商品の金額を出力しています。

まず始めに、{% if product.price_varies %}があります。
「product.price_varies」は、商品の金額が複数あるときには「true」を返します。
shopifyでは商品管理画面で「バリエーション」を追加できます。
例えば商品で洋服を登録するときに、サイズ別や色別があります。これらを同じ商品のサイズ違い、色違いとして登録できるのです。すると、サイズによっては値段が違う場合が出てきます。shopifyでは、1つの商品管理画面で、そのサイズごとや、色ごとに値段の設定ができます。
この場合に、商品の金額が複数存在する。ということが起こります。

{% if product.price_varies %}がtrueの場合、商品金額を{{ product.price_min | money }} 〜 {{ product.price_max | money }}のように出力しています。
これは複数ある金額の中で、最安値を「product.price_min」、最高値を「product.price_max」で出力するので、このような書き方をしています。

{% if product.price_varies %}がfalseの場合、商品金額は{{ product.price | money }}で出力しています。

ここで「| money」がありますが、これは重要です。
もし{{ product.price }}とすると、1,000円の商品の場合は「1000.00」と出力されます。
{{ product.price | money }}とすると、1,000円の商品の場合は「¥1,000」と表示されます。

以上、「shopifyでコレクションごとの商品一覧を出力する」でした〜。