Shopifyテーマ Chapter 10 all_productsの使い方

このチャプターではコレクションをループさせたりせず、もしくは商品ページ上でないところで、特定の商品情報にアクセスする方法を紹介します。

商品に直にアクセスするためにはall_productsのオブジェクトを使用します。例えば下記のような例です。

{{ all_products["coffee-cup"].title }}

この記述方法はとてもシンプルでall_productsに商品のハンドルを上記のように[]で指定するだけです。
このようにして配列やディクショナリー内の特定のオブジェクトにアクセスする方法は他のプログラミング言語でも一般的です。

Liquid ハンドル

ハンドルは特定のLiquidオブジェクトにアクセスするために使われます。デフォルトではその商品・ブログ・記事などのタイトルに基づいて、すべてアルファベットの小文字で自動生成されます。もしタイトルに空白が含まれている場合は、その空白は自動的に｢-｣ハイフンに置き換えられてハンドル名が決定されます。

上記のコード例では、ハンドルはcoffee-cupでした。そしてアウトプットさせるのはtitleでしたが他にも下記のように多数のプロパティにアクセスすることができます。

all_products[“coffee-cup”].available
all_products[“coffee-cup”].collections
all_products[“coffee-cup”].compare_at_price_max
all_products[“coffee-cup”].compare_at_price_min
all_products[“coffee-cup”].compare_at_price_varies
all_products[“coffee-cup”].content
all_products[“coffee-cup”].description
all_products[“coffee-cup”].featured_image
all_products[“coffee-cup”].first_available_variant
all_products[“coffee-cup”].handle
all_products[“coffee-cup”].id
all_products[“coffee-cup”].images
all_products[“coffee-cup”].image
all_products[“coffee-cup”].options
all_products[“coffee-cup”].price
all_products[“coffee-cup”].price_max
all_products[“coffee-cup”].price_min
all_products[“coffee-cup”].price_varies
all_products[“coffee-cup”].selected_variant
all_products[“coffee-cup”].selected_or_first_available_variant
all_products[“coffee-cup”].tags
all_products[“coffee-cup”].template_suffix
all_products[“coffee-cup”].title
all_products[“coffee-cup”].type
all_products[“coffee-cup”].url
all_products[“coffee-cup”].variants
all_products[“coffee-cup”].vendor

この中のいくつかのプロパティはLiquidコレクションです。Liquidのループによってアウトプットする必要があります。

もっとも頻出する例は画像だと思われます。下記はcoffee-cupのハンドルを持つ商品の画像をアウトプットさせているものです。

{% for image in all_products["coffee-cup"].images %}
<img src="{{ image.src | img_url:' grande' }}">
{% endfor %}

一つ以上のhandleの扱い

さらに一歩踏み込んだ方法としてLiquid のハンドルの配列Arrayを作り特定の商品をアウトプットさせることができます。

{% assign favorites = "hand-made-coffee-tamper | edible-coffee-cup" | split:"|" %}
 
<ul>
{% for product in favorites %}
<li>{{ all_product[product].title }}</li>
{% endfor %}
</ul>

上記の例ではまずLiquidの {% assign %}のタグを使い新しい変数を設定します。
そしてhandleはすべて | pipeで区切られています。Liquidフィルターのsplitにより |を目印に区切り配列にしています。
LiquidのForループにより配列をループさせて出力しています。

all_productsの使い道

all_productsは特定のテンプレートに数個だけ商品を表示したいときに有効な方法の一つです。もちろんたくさんの商品をアウトプットさせることもできますが、その場合はcollectionsを使ったほうが良いでしょう。(商品のハンドルを手動で入力する必要がないので)

all_productsは頻繁に変更を加える必要の無い少数の商品を表示させる専用のテンプレートを作るなどには有効です。
そのストア専用の特定の商品のみのランディングページなどを作成するなどの可能性もあります。