【bubble】カテゴリ・金額の絞り込み機能

通販サイトの検索結果などで使える、カテゴリや金額での絞り込み。

今回これの実装をしたので、手順を紹介します。

完成品

選択したカテゴリーの商品が絞り込まれます。
選択した金額範囲の商品が絞り込まれます。

これら2つの条件は、同時に適用可能です。
また、全て解除したり指定なしにすることで、絞り込みが解除されます。

カテゴリー絞り込み機能

まず、カテゴリー絞り込みは複数選択ができるので、Checkboxで作ります。
項目はDBに定義しておき、これをRepeating Groupで表示します。

Repeating Group内に、Checkboxのみを入れています。
（）内は、カテゴリー登録された商品個数を表示しています。

選択したカテゴリーは、適当な場所に作ったCategory型のListへ格納します。
チェックが入っている時はplus、チェックを外した時はminusでListから出し入れします。

金額絞り込み機能

金額範囲はどれか1つのみ選択なので、RadioButtonで作ります。
こちらも選択肢はDBに、上限額と下限額をnumber型で設定します。

商品のRepeating Group設定

商品を表示しているRepeating GroupのData sourceに、絞り込み条件を設定します。

・「カテゴリー」がList内に含まれている
・「金額」が下限額より上
・「金額」が上限額より下

また「Ignore empty constraints」にチェックすることで、上記項目が未選択・空欄時に絞り込みが解除されるようになります。

以上の設定で、最初の動画のような絞り込みができました！

おわりに

絞り込みはよく使う機能ですし、今回の方法を知っておけば応用も効くと思います。

画像を多用して説明しましたが、初心者の方には分かりづらい部分もあるかと思います。

僕は現在「Secondee」という、予約なしでビデオチャットで相談できるサービスに登録しています。
もし詳しく聞きたい方は、こちらからお話に来てください！

Secondee

Secondeeは現在β版で期間限定ですので、お早めに！