ある商品サイトを制作していて、「商品一覧ページで、ユーザによる商品の並び替えを行いたい」というご要望がありました。
既存のスクリプトがあればな~と探していたところ、応用して使えそうなものを発見したのでメモとして残します!
やりたいこと
- 商品種類別のボタンをクリックして、商品一覧をグループごとに並び替え
- 選択したグループに含まれない商品は選択したグループ一覧のあとに順次表示
▸デモ
↑写真のように、「スイーツ」「フルーツ」「食事」のグループで区別される商品がランダムでならんでいて、
「スイーツ」ボタンをクリックするとスイーツグループの商品が上に表示され、その後フルーツ、食事グループの商品が並ぶようにします。
詳しくはデモをみてみてください!
MUURIダウンロード
▸MUULI公式
▸Github
ソース
1.必要なファイルの読み込み
|
|
<script type="text/javascript" src="js/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script> <script type="text/javascript" src="js/muuri.js"></script> |
MuuriのアニメーションはWeb Animations APIを使用しており、サポートされていないブラウザで使用する場合はポリフィル用のスクリプトを使用します。
*参考URL:
https://coliss.com/articles/build-websites/operation/javascript/responsive-grid-layouts-muuri.html
2.並び替えボタン生成
|
|
<div class="list-btn"> <ul> <li class="sort-sweet"><a href="#"><button>スイーツ</button></a></li> <li class="sort-fruit"><a href="#"><button>フルーツ</button></a></li> <li class="sort-meal"><a href="#"><button>食事</button></a></li> </ul> </div> |
・わかりやすいように各ボタンにclassを付与
3.商品リストの生成
|
|
<div class="list"> <ul class="grid"> <li class="item"><a class="item-content" data-sweet="5" data-fruit="5" data-meal="1"><div class="meal">グラタン</div></a></li> <li class="item"><a class="item-content" data-sweet="6" data-fruit="1" data-meal="5"><div class="fruit">いちご</div></a></li> <li class="item"><a class="item-content" data-sweet="1" data-fruit="6" data-meal="6"><div class="sweet">プリン</div></a></li> <li class="item"><a class="item-content" data-sweet="7" data-fruit="2" data-meal="7"><div class="fruit">もも</div></a></li> <li class="item"><a class="item-content" data-sweet="2" data-fruit="7" data-meal="8"><div class="sweet">ケーキ</div></a></li> <li class="item"><a class="item-content" data-sweet="8" data-fruit="8" data-meal="2"><div class="meal">スパゲティ</div></a></li> <li class="item"><a class="item-content" data-sweet="9" data-fruit="3" data-meal="9"><div class="fruit">ぶどう</div></a></li> <li class="item"><a class="item-content" data-sweet="10" data-fruit="9" data-meal="3"><div class="meal">ピザ</div></a></li> <li class="item"><a class="item-content" data-sweet="11" data-fruit="4" data-meal="10"><div class="fruit">みかん</div></a></li> <li class="item"><a class="item-content" data-sweet="3" data-fruit="10" data-meal="11"><div class="sweet">マカロン</div></a></li> <li class="item"><a class="item-content" data-sweet="12" data-fruit="11" data-meal="4"><div class="meal">お茶漬け</div></a></li> <li class="item"><a class="item-content" data-sweet="4" data-fruit="12" data-meal="12"><div class="sweet">ゼリー</div></a></li> </ul> </div> |
・リストの大枠を「.grid」で囲む
・並び替えを行う商品それぞれに「.item」を付与
・「.item」要素の内側に「.item-content」を付与
・「スイーツ」「フルーツ」「食事」それぞれのボタンを押したときに並ばせたい順番にdata属性をふる。
例:今回スイーツボタンを押下したとき、プリン・ケーキ・マカロン・ゼリーと並ばせたあとに元々並んでいた順に並ばせたいので、その順番通りにdata-sweetの属性を1から順にふっていきます。
4.CSSの記載
ここは、デザインに合わせて記載してください。
ただ、大枠の「.grid」には position: relative;を、各.itemにはposition: absolute;をふるのが重要なポイントです。
|
|
.list .grid { position: relative; /**重要**/ padding-left: 0; } .list .grid li { position: absolute; /**重要**/ width: calc(50% - 0px); width: 48%; display: inline-block; padding-bottom: 10px; line-height: 1; } |
4.JSの記載
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(function(){ var grid = new Muuri('.grid', { sortData: { sweet: function (item, element) { return parseFloat(element.children[0].getAttribute('data-sweet')); }, fruit: function (item, element) { return parseFloat(element.children[0].getAttribute('data-fruit')); }, meal: function (item, element) { return parseFloat(element.children[0].getAttribute('data-meal')); } } }); $('.list-btn li.sort-sweet').click(function(){ grid.sort('sweet'); return false; }); $('.list-btn li.sort-fruit').click(function(){ grid.sort('fruit'); return false; }); $('.list-btn li.sort-meal').click(function(){ grid.sort('meal'); return false; }); }); |
・Muuriの関数の呼び出し
・スイーツボタン(.sort-sweet)をクリックでdata-sweet、フルーツボタン(.sort-fruit)をクリックでdata-fruit、食事ボタン(.sort-meal)をクリックでdata-mealを並び変えるように記載
・今回.itemの子供要素にdata-sweetなどがあるため、element.children[0]としています
デモ
以上すべて行うとデモの動きになります。機会があれば使ってみてください!
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
