jQueryでのグループ別ソート機能をjQuery初心者状態のアフィリエイターが自力で作った話

アフィリエイターの知人から
ページ遷移なしリアルタイム商品の並び替え絞り込みする機能をサイトに付けれる?」

といったような打診があり「時間がかかってもいいのなら」という条件付きで依頼を受けました。

所有サイトのモバイルフレンドリー対策も目処がついていたので早速作業に取り掛かったわけです。

この依頼があった段階でjQuery(Javascript)を使用すればいけるな」
と漠然としたものはあったのですが、如何せんほぼド素人…

仕込んでるサイトにアコーディオン風なメニューをつけたりといったことを
したことがある程度の知識しかありません。

ただ、jQueryにはプラグイン(機能を拡張するようなもの)なる便利なものがあってですね
「プラグインを利用すれば案外スムーズにいくかも」と何ともお花畑なことを思ってたわけですよ。

でも実際「jQuery ソート機能」みたいなキーワードで検索すると色々出てくるんです。

「どれにしようか迷っちゃう~」って感じだったのですが一番依頼内容を
満たしてくれそうな「MixItUp」というプラグインを選択しました。

とりあえず色々イジってみようということでローカル環境で実験開始。

「MixItUp」の基本的な設定方法は検索すれば出てくるのですが
もう少し突っ込んだ内容になると英語で書かれたプラグイン製作者のサイト
ぐらいしかないんですよね…

でもコードが書かれているのでjQueryの入門サイトで確認しながら
「これとこれを使ってこうすれば…」みたいにしてやってみたらなんとか形にはなったんです。

で、途中経過として知人に確認してもらうと…

「商品の一部だけ表示させて残りはボタンをクリックしたら見れるようにできる?」
といった宿題をいただきました。

実は、これが大きな壁となってわたしの前に立ちはだかるのです。

単に一部を表示させてボタンをクリックしたら全表示っていうのは
jQuery(Javascript)を触ったことがあるならそれほど難しいものじゃないんですね。

そういうこともあって「楽勝でしょ」とタカをくくってたんですが…

いざフタを開けてみると
並び替えも表示件数もグッチャグチャ

確認すると並び替え表示切り替えのそれぞれの動作がバッティングしてしまってました。
それを回避するためにあれやこれやと策を講じたんですが全然ダメ。

結局「MixItUp」の使用を断念して自力でコードを書くことになったわけです。
っていうか、そもそもこの「MixItUp」は商用利用不可なんですよね…

後から考えるとスタートの時点からつまずいてたんです。

それで苦心して書き上げたコードがこちらです。

あらかじめ言っておきますが、あくまでも初心者に毛が生えた程度の人間が
書いているものですので決してスマートでもなく美しくもありません。

jQuery熟練者の方からみると「ん??」となる箇所も多々あると思います。

もし「こうやったらもっと上手くいくぜ」という男前なご指摘をいただけるのであれば
コメント欄にガツガツ記入してやってください。

まずはHTML

ここで並び替えのきっかけになるクラス指定(mix)をしていしています。
他の(category-●)はグループ分けの動作をさせるためのクラス指定です。

で、肝心のjQuery

こんな感じです。

実際にこのソート機能を付けたサイトは知人の許可を得ることができず
お見せできないのが残念なんですが、上記のコードを元に足したり引いたりすれば
プラグインを使わなくてもそれなりのモノができるのではと思います。

このようなちょっとした演出を加える事でブログやサイトを訪問してくれた人の
利便性が上がったり、また興味を持たせたりといったこともできると思うので
サイトアフィリエイターとしても差別化という意味でも、こういったデバイスを
持っておくことも必要なんじゃないでしょうか。

最後に、このコードを書く際に大変お世話になったサイトを紹介しておきます。

「設計力を学ぶデザインドリル jQuery入門」

このサイトがなければおそらくこのコードは書けなかったでしょう。
運営されているデザインドリル株式会社さんには感謝しきりです。