sugino
1
表題のアプリ実装方法に関して、設定がうまくいかずお問い合わせさせていただきました。
詳細を下記にて記載しておりますので、ご確認いただけますと幸いです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【希望】
・コレクション一覧ページに、テキスト検索機能を追加したい
・ただし、ヘッダーに固定されている全体検索機能ではなく、コレクション内での検索機能を設けたい
（例）○○コレクション一覧ページ→テキスト検索→○○コレクション内の該当商品がヒット（○○コレクション以外はヒットしない）
【不明点】
・上記2点を叶えるのが「Product Filter & Search」と知り、導入していたアプリだったので設定したものの検索窓が表示されない
（Search settings/In-collection search/設定ON）
【試したこと】
・コレクション設定ページにて オンラインストア/テーマテンプレートにてboost-pfs-originalを選択するが変わらず
・公式ページと思われるboostcommerceにて「コレクション内検索を有効にする方法」確認するもON・OFFの設定方法しか出てこない
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
何かコードのようなものを設置すべきなのかとも考えたのですが、
知識不足な部分もあり全体検索窓の設置しかできませんでした。
ぜひお力を貸していただければと思います。
知識不足でお恥ずかしい部分もたたありますが、何卒よろしくお願いいたします。
デモストア見たかぎり、入力1文字ずつ商品が変わるようなので、
デフォルト言語が日本語のストアでは使用できない
「商品サジェストAPI（Predictive Search API）」を使っている可能性があります。
▼Predictive Search API
https://shopify.dev/api/ajax/reference/predictive-search
ストアのデフォルト言語が英語であればこちら使えます。
日本語の場合は、日本語でAPIが実装されるまで待つしかないです。
アイデアの１つですが、AJAXで１文字ずつ商品の検索結果を取得する方式を考えてみました。
＜全体テンプレート＞
・前提：URLの引数に「suggest」がある場合、ヘッダフッダを出力しない
＜検索テンプレート＞
・前提：URLの引数に「suggest」がある場合、シンプルな構造だけ出力する
/search?q=キーワード&type=product&suggest=on
▼ LIQUIDでURL取得
{%- capture CFH -%}{{ content_for_header }}{%- endcapture -%}
{%- assign URL = CFH | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
▼ 引数を判定
{% if URL contains 'suggest' %}
{% paginate search.results by 100 %}
{% for result in search.results %}
・・・ シンプルな構造の検索結果を出力
{% endfor %}
{% endpaginate %}
{% else %}
・・・ 通常の検索結果ページを出力
{% endif %}
＜ヘッダセクション＞
・1文字入力するたびに、引数にsuggest付きの構造を呼び出し、結果を出力する
/search?q=キーワード&type=product&suggest=on
$('.入力フォーム').on('input', function() {
var newword = $(this).val();
$('.結果を空にする').empty();
if (newword != ''){
$.ajax('/search?q='+newword+'&type=product&suggest=on',
{
type: 'get',
dataType: 'html'
})
.done(function(data) {
$('.結果出力').append(data);
});
}
});
sugino
5
ご丁寧にありがとうございます。
こちらも確認し検討させていただきます。
また相談の機会がございましたら、よろしくお願いいたします。