商品一覧の並び替えをページ移動なしで行うカスタマイズ

カラーミーショップの商品一覧（カテゴリ・グループ）と検索結果ページには、標準で並び替え機能が実装されています。

この並び替えは普通にURLリンクなので、並び替えを行うごとに新しいページに移動します。

商品リストの前に長いカテゴリ説明があったりすると、もう一度リスト部分までスクロールさせる手間がかかってしまうので小さなストレスがたまります。ですので、リンクを使用せずにリストそのものを置き換えてしまうカスタマイズを行います。

非同期でリスト部分を更新する

簡単に説明すると、テンプレート編集で更新する部分をあらかじめ任意のセレクタで囲っておき、並び替えするときはその囲った部分を非同期で入れ替え(JavaScript)てしまえばOKです。

<!-- 大雑把な説明 -->
<ul>
  <li>価格順</li><li>おすすめ順</li><li>新着順</li>
</ul>
<div id="入れ替え部分"> ~ </div>

<script>
function narabikae(){
  fetch('新しい並び替えURL')  
    .then(res => DOM)
    .then( =>{
      新しい入れ替え部分 = DOM.querySelector('#入れ替え部分');
      document.getElementById('入れ替え部分' ).innerHTML = 新しい入れ替え部分
      })
}
</script>

１ページに120商品表示しているショップで実装してみましたが、体感では一瞬でリストが更新されるのでユーザーもストレスフリーです。