Shopifyの Ultimate Product Filter+Search に関して

Cat WEBサイト構築Tag by cubismer
窓辺

Shopify の アプリの1つ、Ultimate Product Filter+Searchに関してのメモ。

概要

ECサイトによくある絞り込み検索を実装するアプリです。

レビューで確認した傾向としては、機能面よりもサポートの手厚さを評価する割合が大きいように見えます。

この点は、私自身もサポートに何度かお世話なって強く実感しました。

管理画面内のチャットからやりとりができるので、タイミング次第な部分はありますが迅速に対応いただける可能性が高いです。

類似のアプリである「Product Filter & Search」はメール対応のためチャット対応にくらべるとどうしてもレスポンスが遅い印象なので、この点でもポイントが高いと言えそうです。

参考URL

調べたことなど

導入手順
  1. アプリを入れて、アプリ管理より Product Filter & Search を選ぶ(https://search-app.sobooster.com/ドメイン下の管理画面に移動する)
  2. 自動実装か手動実装を選ぶ
  3. 自動実装なら、動作完了後に上手くできたかどうかの選択肢が出て、どれかを選ぶ
  4. メタフィールドによる絞り込みを作成する際は、下部の歯車アイコンを押す
  5. Search index を選ぶ
  6. 下部の Add metafiled to serch fieldを選び、Namespace.Keyと型を選ぶ
  7. 画面最上部の Sync ボタンの枠が黄色くなっているはずなので、ボタンを押して同期させる
  8. 左サイドの FILTERS を選ぶ
  9. Default filter group を選ぶか任意のグループを作成する
  10. ADD FILTERボタンを押して、先程登録したカスタムフィールドを選ぶ

重要なのは以下の手順。

  1. Search index で登録
  2. Sync ボタンで同期
  3. FILTERS で設定

登録して同期しないとFILTERSに出ないので要注意。

基本情報
  • 保存や反映ボタンはなく、FILTERS で設定した時点でShopに反映される
  • 設定やデータのリセット機能はない
  • 48時間いないであれば、アプリを削除して再インストールしても設定は消えない
Sync を押しても FILTERS に項目がでない場合
  • Search index で登録して同期させても FILTERS に項目が表示されないことがある
  • ユーザー側で直す手段はないようなので、サポートに連絡して直してもらうしかない模様
  • 問い合わせたら、特定の操作で引き起こされたとかではないらしく、回避策はないとのこと
カスタムフィールドによる絞り込みで「AにもBにも属している」状態をCSVで設定する方法
  1. CSVは[string]で作成し、データはカンマ区切りで列記する
  2. CSVをアップロード
  3. Search index で Valu data type にListを選ぶ
  4. FILTERS で設定する
カスタムフィールドによる絞り込みでレンジスライダーを使う
  1. CSVは[integer]で作成し、データは数値で入力
  2. CSVをアップロード
  3. Search index で Valu data type にNumberを選ぶにする
  4. FILTERS で設定する
絞り込み検索画面に画像が出ない

Ultimate Product Filter+Search を Debut や Narrative などのShopifyデフォルトの無料テーマ(試していないが有料テーマでも同じかも)に自動インストール(手動でも同じかも)で使う場合、絞り込み検索画面で画像や価格などが出ず、全体の商品点数しかでなかった。

以下の操作を行えば表示されることを確認。

  1. 「アプリ管理」から「Ultimate Product Filter+Search」を選び、「Ultimate Product Filter+Search」のアプリ管理画面に移動する
  2. 左サイド下部の「歯車アイコン」を押す
  3. 「Search index」を押す
  4. ページ上部の「Sync」ボタンを押す
商品画像にマウスオーバーした際にでる「Add to Cart」や目のアイコンを消す
  1. 「アプリ管理」から「Ultimate Product Filter+Search」を選び、「Ultimate Product Filter+Search」のアプリ管理画面に移動する
  2. 左サイドの「PLUGINS」を選択
  3. 「Storfront」の[Add to CART」や「Product Preview」のチェックを外す
  4. 商品名先頭の星も不要なら「Shopify Review」のチェックも外す

「Add to Cart」や目のアイコンによるクイックビューなどはプラグインで実装されているため、連携を解除すれば解消される。

商品画像にマウスオーバーした際に画像が切り替わるのを止める
  1. 「アプリ管理」から「Ultimate Product Filter+Search」を選び、「Ultimate Product Filter+Search」のアプリ管理画面に移動する
  2. 左サイド下部の「歯車アイコン」を押す
  3. 「Advanced」を選ぶ
  4. 「Show alternative image on hover」のチェックを外す

マウスホバーで画像が切り替わるのですが、その際に1枚目の画像と縦横比が違うとレイアウトが動いてしまう。

商品に関連する画像の縦横比(またはサイズ)が一定であれば発生しない問題。

この切り替わる画像は商品登録した2枚目の画像の模様。

Sync ボタンの同期処理がいつまで経っても終わらない
  1. Sync ボタンを押した後、長時間経過しても同期が終わらずにボタンが押せなくなることがある
  2. 一度アプリを削除して入れ直すと改善された

頻繁に登録と削除をするのも問題が起きそうなので、実行する場合は自己責任で。

optionで追加したバリエーションの値に Range Slider が使えない
  • optionで「靴底の厚さ」を追加したと仮定
  • 絞り込み検索時に「靴底の厚さ」の項目を、価格や重量と同じ Range Slider で使いたいが、対応していないので使えない
  • サポートに確認すると、Range Slider が対応しているのは、価格、重量,カスタムフィールドのみとのこと

サポートからは下記のように返答あり。

You can use Range as display mode for Price, Weight, Metafields.

絞り込み用の項目をどの形にするのかは、Ultimate Product Filter+Search の管理画面内の「FILTERS」で設定できる。

CSVなどで新たに絞り込み項目対象を追加した場合には、この「FILTERS」で追加する必要がある。

追加次には入力欄をクリックするだけ候補がでるので、いちいち文字を入力する必要はない。

テーマエディタで商品表示数変更などのセクションが表示されなくなる
  • テーマエディタで商品表示数変更などのセクションが表示されなくなるが、これは仕様のためバグなどではない
  • アプリの管理画面に移動して、下部の歯車アイコンを押し、Advanced を選択
  • Seach result settings の Number of itmes per page などで設定を変更できる
ブラウザをリサイズすると開発者ツールにエラーが出る
  1. Debutを使い、デザインが変わるラインを超えてブラウザ幅を伸縮する
  2. 開発者ツールに以下のエラーがでる

theme.js?v=1205460973318826507:2014 Uncaught TypeError: Cannot read property 'onBeforeDestroy' of undefined
 at PredictiveSearchComponent.Shopify.theme.PredictiveSearchComponent.PredictiveSearchComponent.destroy (VM136331 theme.js:2014)
 at Object.unload (VM136331 theme.js:4628)
 at MediaQueryList.initSearchAccordingToViewport (VM136331 theme.js:4677)

上記のエラーがでるが、アプリ開発会社に問い合わせたところ、以下のように返答があった。

  • 使用しているテーマに起因している
  • エラーは出ているが実害はない

対応策を調査いただけて、以下の方法で改善できることを確認。

  1. テーマ>カスタマイズ>テーマ設定(タブ式になっている)>Search に移動する
  2. Enable product suggestions のチェックを外す

このチェックはインスタントサーチの機能とのことで、アプリ側でこの機能が用意されているためチェックをはずしても問題ないとのこと。

絞り込み検索結果の商品表示の列数を変更する
  • 通常デスクトップサイズで4列のところを２列に変更したい
  • CSSのみで対応可能

// #PageContainer .usf-sr-container の部分は優先度を上げて、かつ他の部分への影響をなくすために追加
body:not(.usf-mobile) #PageContainer .usf-sr-container .medium-up--one-quarter{
  width:50%;
}
body:not(.usf-mobile) #PageContainer .usf-sr-container .grid--uniform .medium-up--one-quarter:nth-child(2n+1) {
    clear: both;
}

上記のような記述を追加すれば形は整う。

ただし、アプリ管理画面の「customization」からJSを見ると、window.usf_gridItemWidthという設定が参照されており、これがあるなら管理画面で何かしらの設定ができるはず。だが該当項目が見つからず。

usf_gridItemWidthの値を操作できる場所があるなら、そこを変更するのが正規の方法かもしれない。

絞り込み一覧画面にコレクションの「説明」欄の内容を任意の場所に表示させる
  • アプリ管理画面の「CUSTOOIZATION」でテーマを選び、Javascriptを選択してカスタマイズする

試したらできたという形だが、説明文の出力内容をJSで取得してからwindowオブジェクトなどに格納し、アプリのJSに渡すことで出力は可能。
単にdisplay:none;にした説明文のところからJSで内容を取得しても良かったかもしれない。

他のアプリとの連携
  1. アプリ管理画面の「PLUGINS」から併用できるアプリの一覧が確認できる
  2. チェックをいれるとサポートに連絡をくれと表示されるので、サポートに連絡
  3. あとはサポートの方で作業をしてくれる(全てのアプリがそうなのかは不明)

多言語化や多通貨化、お気に入り登録、そのほか実用的で評価が高そうなアプリが並んでいてそれらと連携可能。

パートナーフレンドリーなのに試用期間がすぎると動作しない

Ultimate Search and Filter Shopify app. Please consider subscribing to a plan before 1/01/2021 12:10:18 PM UTC to avoid any interuption.

上記のような文言が表示され、絞り込み検索画面が動作しなくなる(画像やテキストがワイヤーフレームのような表示になる)。

対策は以下の通り。

  • アプリのチャットを開く
  • 試用期間の延長を依頼する
  • 延長は何度でもできる

以下はチャットでやりとりした際の返答。

Yes, we will extend the trial days for development store upon your request.

The trial can be extended multiple times for stores in development stage.

通常、パートナーフレンドリーアプリを使うとこのようなことは必要がない。Shopifyサポートに質問してもそんなことはないと言われたが、実際には依頼が必要である。

Shopifyサポートの認識間違いか、アプリ側の独自解釈かは不明。

なお、おそらく以下でも再使用はできる。

  • アプリをアンインストールして48時間以上待つ

48時間以上経つとアプリ側がストアのデータを消すようなので、試用期間もリセットされるのではと考えている。

ただし、これは不正な方法とも考えられるので実行しない方がよく、たまたまそうなってしまった場合は繰り返さないように注意した方がいい。

結び

いくつか試したShopifyのアプリは、多機能な反面、どこに何があり、何ができるのかがわかり辛い印象です。

Ultimate Product Filter+Search のように迅速なサポートで対応してもらえるととても助かります。

2人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄