コレクション内での検索窓を設置

[hiromura]

1コレクションに商品が300近くあります。

アプリを使わずにそのコレクションページに検索窓をを実装したいのです。

もちろんヘッダーなどにあるサイト内検索窓とは別です。

お客様がキーワードを入れるとそのコレクションから絞れるという感じです。

これはコレクションLiquidにコーディングで作ることは可能ですか？

可能であればサンプルコードを教えてください。

[junichiokamura]

すいません、実際のコードまでは用意していませんが、

テーマで新規に検索ページを作るか、既存ページに検索窓を追加して、クエリーのGETパラメータからキーワードを取得し、Liquidでは、毎回全件コレクションを取得してループ内で１件ずつチェックするか、filterを使ってfor 分で絞る方法で可能かと思います。

https://shopify.github.io/liquid-code-examples/example/collection-list

https://shopify.dev/docs/themes/liquid/reference/filters/array-filters#where

ただし、Liquidはサーバーサイドでストアフロントの表示前にコンパイルされるものなので、クエリパラメータを受け取るには以下のようなHackyな方法になります。
https://freakdesign.com.au/blogs/news/get-the-url-querystring-values-with-liquid-in-shopify

個人的には、パートナーアカウントからCustom appを作って、APIを使って検索をして、テーマからはapp proxyを使ってデータをやり取りするか、

（アプリを使われたくないようですが、アプリは同様のアプローチをしています）

マーチャントアカウントで完結させる場合は、private appを作って、そのアプリをホストするサーバーでAPIを読んで、テーマから外部参照できるように、ショップのドメイン配下におくか、CORS対応をして別ドメインから呼びさせるようにする方が確実かと思います。

（結局これらの開発をしなくて済むようにアプリがあるのですが。。）