wixcodeデータベースで訪問者がソートやフィルターをかけれる？

こんにちは、WEBデザイナー兼
趣味で社会人バンドを
しているエミリです＊

今回は、久々Wixについて
書いていきます。

先日、以下の様な
ご相談を頂きました！

こちらのブログで以前
エクセルの表をHTMLに変換し
Wixでテーブル表示させる方法を
紹介しました。

その記事をご覧になったAさんより
ご相談をいただきました。

以下の記事がその内容です。

この記事で作成したテーブルは
HTML（フロント）部分のみを
作成したものになり
フィルタリング機能は
HTMLのみでは表現できない
（プログラム）部分となります。

なので、上記記事の方法では
フィルタリングさせることは
できません。

プログラミング不要で
フィルタリング機能を
もたせることが可能なのか？

もし、その辺で悩まれてる方は
以下より参考になさってください！

Wixで作成したテーブル一覧にフィルタリング機能はつけれるのか？

まず、Aさんからご相談を受け
すぐにWixのサイトで調べてみました。

すると、以下の様に記載が
ありました。

現在、訪問者が「フィルター」をかけたり、「ソート（分類）」できるリストを作成することはできません。

え～、できんのかい！！！
これ大事だろ・・・と思いつつ
もう一つ、違う記載も見つけました。

商品ギャラリーに並び替えとフィルターのオプションを追加し、購入者が探しているものを見つけやすくしましょう。

※並び替えとフィルターメニューはモバイル機器では表示されません。
※並べ替えとフィルターはスライダー商品ギャラリーではご利用いただけず、グリッド商品ギャラリーにのみご利用いただけます。

どうやら、Wixストアの商品リストで
あればフィルター機能を
つけれるようです。

しかし、モバイル機器では表示されない
グリッド表示のみにしか適応しないなど
まだまだ使い勝手はよくなさそうですね。

とまあ、こんな感じで
観覧者側でのフィルタリングは
現在のところできないようです。泣

ただ、WixではWixcodeという
データベースが用意されています。

大量の情報を扱う場合
Wixcodeを使用することで
観覧者側からのフィルタリングは
できませんが管理者側からの
フィルター追加が可能です。

これを利用すれば
ある程度分類させたものを
各ページに表示させることができます。

それでは、その具体的な方法を
以下より紹介していきます。

Wixcodeを使用してみよう！

まずは、Wixcodeを使用する手順と
情報入力～コンテンツ表示までは
以下の記事で紹介しております。

「Wixcodeとは何か？」から
説明しておりますので
ぜひ参考になさってください！

管理者側でフィルターを
かけるにはWixcodeの使用は
必須となります。

Wixのデータベースの情報にフィルターをかけ表示させる方法

データベースの表示まで完了したら
フィルターをかける準備を
していきます。

カテゴリー分けをしているリストは
カテゴリーを利用して
フィルタリングしていきましょう！

カテゴリー分けをしていない場合
まず、それぞれのリストに
IDをつけていきましょう！
具体的には以下のようにやっていきます。

私が作成したデータベースは
バンドスタッフの一覧です。

この一覧、情報が少ないのですが
スタッフの年齢を
「２０代」「３０代」「４０代」と
分類して表示させるようにします。

データベースに２０代のスタッフには
「２０」というIDを付与していきます。

３０代スタッフは「３０」
４０代スタッフは「４０」・・・

idの付与が完了したら
同期・公開して
エディタに戻ります。

エディタに戻りそれぞれの一覧を
表示させるページを作成します。

では、２０代一覧ページに
id「２０」のフィルターをかけて
表示したいと思います。

まず、元のテーブルを
２０代一覧ページにコピペします。

データベースのアイコンを
クリックしてスタッフ一覧を
選択します。

セットされたデータベースの
「設定」をクリックして
フィルターをかけます。

フィルター追加をクリックします。

次の設定で、

と選択しました。

プレビューで確認すると
きちんと２０代のスタッフのみが
表示されていました。

同じように、別の一覧ページも
作成していきます。

あとは、テーブルの近くに
一覧ページへのボタンを設置し
リンクさせて完了です！

今回の検証は以下のページで
確認することができます！

＞＞検証サイトで確認してみる！

最後に

上記の方法を使用すれば
観覧者側でフィルターを
かけれなくてもカテゴリー分けした
リスト一覧を表示させることが
できます。

ちょっと、面倒ではありますが
よりあなたの理想の形を
表現できるかもしれません。

また、今回お悩み相談をくださった
AさんはWixのテーブル表示が
スマホだと横スクロールに
なってしまうということで
ブログを使用する方法にしたそうです！

ブログを使用した場合
検索窓がついているので
そこで観覧者に検索を
かけてもらうということが
できますよね！

とても良いアイデアを
いただきました＊

もし、今回の方法をトライしてみたいけど
不安だという方はこちらのサービスを
ご利用いただければと思います！

【あなたにおすすめの記事】

■ページ作成のポイントについて

■wixカスタマイズまとめ
wixでツイッターを連動させたい！コンタクトフォームはどう設定するの？といったことを以下でまとめています。これからもどんどん追加していきます。リクエストも受け付けています！