[Shopify] all_productsを使用して特定の商品のみ取得する方法

皆さんは例えばcollection内で特定の商品Aを表示させる場合どのようにしていましたか。

私はつい先日まで

のように全ての商品を取得して、if文で特定の商品名にマッチするもののみ商品タイトルを表示するというようなコードを書いていました。

しかし、先日all_productsというLiquidコードを見つけ、for文を回さずに特定の商品Aの情報を取得することができることを知りました。今回はその情報をシェアします。

Liquidのall_productsコードで特定商品を取得する

まずは特定の商品を取得するコード。

これで先ほど書いたfor文を含む5行のコードが1行になりました。

ちなみに"priductA"の部分は商品のhandleです。

※handleとは、その商品URLの最後に当たる部分（下記〇〇の部分）ですね。
https://ec-penguin.com/products/〇〇

商品一覧ページを作るなど、複数商品を取得する場合はfor文で回してたくさんの商品を取得する方が効率的です。

しかし、特定の1商品を取得する場合は圧倒的にall_productsコードを使用したほうが効率的です。

 商品から取得できる情報一覧

ちなみに、商品の情報とは具体的に何を指すのか。何を取得できるのかが気になるところですよね。

代表的なものをいくつか挙げておきます！

{{ all_products["productA"].title }}

のように最後のピリオドの後ろに下記項目を追加すれば特定商品の該当情報を取得することができます。

• title
  商品のタイトル
• price
  商品の価格
• published_at
  商品が公開された日付
• tags
  商品の全てのタグ
• url
  商品のURL
• variants
  商品の全てのバリエーション
• handle
  商品のハンドル（urlの最後の部分）

ちなみに、tagsやvariantsのように"全ての"と付けた項目は複数の値が返されるので下記のようにforループを使用する必要があります。

こんな感じでタグの場合は、その商品が持つタグの分だけループされ、全てのタグが表示されます。

他にもたくさん項目がありますので全部の項目を知りたい方は公式のproduct objectドキュメントを参照ください。
https://shopify.dev/docs/themes/liquid/reference/objects/product 

assignを使用して特定商品を変数に代入してしまう

 そして個人的にこのall_productsで取得した特定の商品を、Liquid変数に格納してしまえば使い勝手が良いなぁと思ったので、その方法もシェアします。

今までの流れだと、商品タイトルや、商品価格を取得する際は毎回

などと記述しなければなりませんでした。

ただ毎回このall_productsの部分を書いていくのは非効率的ですし、ちょっとコードが汚く見えてしまいます。なので、変数productAに格納して、productA.titleなどと使用していきましょう。

この方がコードが綺麗に見えませんか？

そして、この方法を使うと複数商品を取得し、各変数productA, productBに格納し、情報を使用していくことも可能です。

schemaタグで"type": "product"を選択した場合

最後に案件でall_productsを実際活用した例を出して終わりにします。

カスタマイズ画面から編集できるschemaタグを活用した事例です。

ちょっと難しいのと長くなってしまうので、自分のメモ用程度に書きます。

schemaって何？という方はこちらの記事からどうぞ。もしくはこの項目を読み飛ばしていただいても大丈夫です！

https://ec-penguin.com/blogs/shopify/schema-tag-perfect-guide-steps

schemaタグのblock内に "type": "product"でドロップダウンリストから商品を選ぶことができるんです。

しかし、その商品を選んだ際にデータとして渡されるのは商品全体の情報ではなく、商品のhandleのみなのです。なので

のように、blockから取得されたhandleをall_productsに渡してあげると、特定商品の全情報にアクセスできるようになります。

※ただ1ページにつき、商品情報を取得できるのは20商品までになります。詳しくは下記ブログ記事を参考。

[Shopify] all_productsの商品取得上限は1ページ20商品の制限があるので解決してみる

Liquidのall_productを使用して特定商品の情報のみ取得する方法 まとめ

以上、Shopify上の特定商品の情報のみ取得する方法でした。

特定商品のhandleのみ取得できていればall_productsを使用して、全ての商品情報にアクセルできるようになるので、非常に便利です。

いろいろな案件をこなしていくと、必ずどこかで使用、活用できる機会があるのかなと思います。ShopifyはECサイトなので必ず商品情報とはちゃんと向き合わなきゃいけないので、商品周りの活用情報も少しずつ発信していきます。

また励みになるので、ぜひためになったな！と思ったらSNS等でシェアしていただけると嬉しいです。

それでは本日も良い1日を！