Liquid、JavaScriptなどに関する質問
1コレクションに商品が300近くあります。
アプリを使わずにそのコレクションページに検索窓をを実装したいのです。
もちろんヘッダーなどにあるサイト内検索窓とは別です。
お客様がキーワードを入れるとそのコレクションから絞れるという感じです。
これはコレクションLiquidにコーディングで作ることは可能ですか?
可能であればサンプルコードを教えてください。
すいません、実際のコードまでは用意していませんが、
テーマで新規に検索ページを作るか、既存ページに検索窓を追加して、クエリーのGETパラメータからキーワードを取得し、Liquidでは、毎回全件コレクションを取得してループ内で1件ずつチェックするか、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対応をして別ドメインから呼びさせるようにする方が確実かと思います。
(結局これらの開発をしなくて済むようにアプリがあるのですが。。)
ユーザー | ランク |
---|---|
38 | |
17 | |
14 | |
11 | |
5 |
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023