下部までスクロールするたびに商品を追加表示させたい（楽天API）
Q&A
Closed
プログラミング歴3ヶ月の初心者です。
楽天商品検索APIを活用し、商品リストを作成しているのですが
一度に大量の商品を取り込むと表示が遅いため、
下部までスクロールするたびに商品（ページ）を追加表示していくjs（jQuery）を書きたいのですが、
書き方が分からず苦戦しています。
どなたかご教示いただけませんでしょうか。
■やりたいこと
API取得時に、
・1ページあたりの取得件数（hits） ※1から30までの整数
・取得ページ数（page） ※1から100までの整数
の指定ができるため、一度に2ページ分の商品（60商品）を取り込み、
画面下部までスクロールすると追加で＋2ページ分の商品を取り込むような処理を
js（jQuery）で書きたいです。
もしこれが複雑なようであれば、シンプルに1ページ（30商品）ずつ追加表示する方法でも良いです。
スクロールイベントは下記のコードを参考に拝見していましたが、
このような処理をどこに記述すればよいかもわからない状態で、
現状のコード内にはスクロールイベントは記述していません。。
【参考】ページの下までスクロールしたときに何らかの処理を実行する例
■コード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="cssgrid"> </div>
<script>
// ------------------
// グローバル変数
// ------------------
let APPID = "-------アプリID--------"; //アプリID *必須
let MAX_PAGE = 100; //最大取得ページ件数
let HITS = 30; //1ページ当たりの表示件数
let KEYWORD = encodeURIComponent("カラコン"); //絞り込みしたい単語
// ------------------
// 楽天API
// ------------------
$(function () {
function put_item(item) {
let h = '<div>'
+ '<img src="'
+ item.mediumImageUrls[0].imageUrl.replace("?_ex=128x128","")
+ '" class="img">'
+ '<span><a href="'
+ item.affiliateUrl
+ '" target="_blank">●</a></span></div>';
//ループで表示したいHTML部分を作成
$(".cssgrid").append(h);
}
//ajax
function search_rakuten(page) {
$.ajax({
url:
"https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=" +
APPID +
"&keyword=" +
KEYWORD +
"&page=" +
page +
"&hits=" +
HITS,
type: "get",
dataType: "json",
timeout: 10000,
async: "true",
})
//読み込み成功時の処理
.done(function (data) {
// 1商品ずつhtml置く
for (let i in data.Items) {
put_item(data.Items[i].Item);
}
if (page < MAX_PAGE) {
search_rakuten(page + 1);
}
})
//読み込み失敗時の処理
.fail(function (data) {
console.log("読み込みエラー");
});
}
search_rakuten(1);
});
</script>
</body>
</html>
0
