javascript でカラーミーショップのトップページに全商品一覧を表示
ショッピングサイトを作れる『COLOR ME(カラーミーショップ)』。
だいぶ前からある老舗の ASP サービスで、今まで何度かサイトを構築したことがありました。
そして最近、その中から「テンプレートを別のに変更して、ついでにトップページに全商品のリストを表示したい」と。
今までも、トップページにおすすめ商品リストとかは表示させたことはあったので、独自タグあたりを探せばあるだろうと思ったのですが…。
ないッ。
試しにそれっぽいタグを挿入してみても、商品一覧は表示されませんでした。
そこで調べたところ、javascript を使用して表示する方法を紹介しているサイトがあり、それに変更を加えつつ解決したので、もし同じ感じで困っている方がいたら、その参考になればと。
ここから続き
javascript を使って全商品一覧を表示
これは下記サイトを参考にさせていただきました。ありがたや。
カラーミーショップで任意のカテゴリをTOPに表示する方法
ajaxで他ページからのコンテンツを取得して表示させる
やり方は、キーワードとかを指定せずに検索をすると、検索結果のページに全商品がヒットするので、その一覧部分をトップページに引っ張ってくるイメージ。
- js
-
<script type="text/javascript"> $(function(){ $.ajax({ url: 'https://example.com/?mode=srh&sort=n&keyword=', //検索結果のURL cache: false, dataType:'html', success: function(html){ var list = $(html).find('.○○○'); //商品一覧を表示してるタグのクラス名 $('.top-list').append(list); } }); }); </script> <div class="top-list"></div>
↑をトップページテンプレートの、商品リストを表示させたい箇所に入れれば全商品が表示されます。
商品一覧を表示してるタグのクラス名は、ソースを見るなり、検索結果のテンプレートを見れば確認できます。
取得した商品一覧を分割で表示
上記の方法だと登録されている商品数が多い場合、トップページがだいぶ長くなってしまいます。
そこで全商品リストを取得しつつも、それを○件ずつに分割し『さらに読み込む』ボタンを設置しようと。
こちらは下記サイトを参考にさせていただきました。ありがたや。
【jQuery】指定の要素数毎に自動で「続きを読む」ボタンを生成
- js
-
<script type="text/javascript"> $(function(){ $.ajax({ url: 'https://example.com/?mode=srh&sort=n&keyword=', //検索結果のURL cache: false, dataType:'html', success: function(html){ var list = $(html).find('.○○○'); //商品一覧を表示してるタグのクラス名 $('.top-list').append(list); //分割したい個数を入力 var division = 12; //要素の数を数える var divlength = list.children('.product-list__unit').length; //分割数で割る dlsizePerResult = divlength / division; //分割数 刻みで後ろにmorelinkを追加する for(i=1;i<=dlsizePerResult;i++){ list.children('.product-list__unit').eq(division*i-1).after('<span class="morelink link'+i+'">さらに読み込む</span>'); } //最初のli(分割数)と、morelinkを残して他を非表示 list.children('.product-list__unit').hide(); $('.morelink').hide(); for(j=0;j<division;j++){ list.children('.product-list__unit').eq(j).show(); } $('.morelink.link1').show(); //morelinkにクリック時の動作 $('.morelink').click(function(){ //何個目のmorelinkがクリックされたかをカウント index = $(this).index('.morelink'); //(クリックされたindex +2) * 分割数 = 表示数 for(k=0;k<(index+2)*division;k++){ list.children('.product-list__unit').eq(k).fadeIn(); } //一旦全てのmorelink削除 $('.morelink').hide(); //次のmorelink(index+1)を表示 $('.morelink').eq(index+1).show(); }); } }); }); </script>
.product-list__unit は、検索結果のテンプレートによっては違うクラス名になります。
ただ『○件ずつ表示』はしていますが、ブラウザ的には『全商品を読み込んでいる』状態なので、商品数がとんでもなく多いとトップページの読み込みに時間がかかるので注意が必要。
実際に Firefox とかのウェブ開発ツールで見ると、
- html
-
<ul> <li>商品1</li> <li>商品2</li> <span>読み込むボタン</span> <li>商品3</li> <li>商品4</li> ︙ </ul>
ってな事になってます。
(li タグの間に span が入るは致し方ない。)
まぁ、読み込んでるリストが検索結果なので、検索ワードを入れればある程度は絞り込めるかなと。
Comment Form