webruary

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 が入るは致し方ない。）

まぁ、読み込んでるリストが検索結果なので、検索ワードを入れればある程度は絞り込めるかなと。