STAFF START連携サービスの入力サンプル

<div class="sps-staffStart">
<section>
<div id="itemList">
<h2>新着コーディネート一覧</h2>
<a href="https://(www.)独自ドメイン/SHOP/coordinate?sort=time">もっと見る</a>
<div class="column-set" id="new-coordinate-list-render"></div>
</div>
</section>
</div>

<div class="sps-staffStart">
<section>
<div id="itemList">
<h2>人気コーディネート一覧</h2>
<a href="https://(www.)独自ドメイン/SHOP/coordinate?sort=pv">もっと見る</a>
<div class="column-set" id="popular-coordinate-list-render"></div>
</div>
</section>
</div>

<div class="sps-staffStart">
<section>
<div id="itemList">
<h2>人気スタッフ</h2>
<a href="https://(www.)独自ドメイン/SHOP/staff?sort=pv">もっと見る</a>
<div class="column-set" id="staff-list-render"></div>
</div>
</section>
</div>

$(function() {
const merchant_id = "マーチャントID";
const staffStartApiDomain = "https://api.staff-start.com";
const columnNum = 4;

const coordinateDetail = '/SHOP/coordinate/';
const staffDetail = '/SHOP/staff/';
let staffstartApi = new StaffStartApiCaller(staffStartApiDomain, merchant_id);

let appendNewCoodinateList = document.getElementById("new-coordinate-list-render");
let requestNewCoodinateData = {sort:'time'};
staffstartApi.getCoordinateList(requestNewCoodinateData)
.done(function (data) {
total = data.total;
result = data.item;

if (total <= 0) {
const template = '<div>該当コーディネートはありません</div>';
$("#new-coordinate-list-render").append(template);
return;
}

for(let i=0; i<columnNum; i++){
if (result[i] != undefined) {
let item = result[i];
let userResizedImage = item.user_resized_images.length > 2 ? item.user_resized_images[2].url : "/SHOP/img/simg/noimage.gif";
let coordlistResizedImages = "/SHOP/img/mimg/noimage.gif";
if (item.resized_main_images.length === 1 && Object.keys(item.resized_main_images[0]).length > 0 ) {
coordlistResizedImages = item.resized_main_images[0].m;
}
let template = '<section class="column4">';
template += '<div class="itemThumb-wrap">';
template += '<span class="badge"></span>';
template += '<p class="itemThumb">';
template += '<a href="' + coordinateDetail + item.cid + '"> <span class="item-list-span-img"><img class="max-height-333" src="' + coordlistResizedImages + '"></span></a>';
template += '</p>';
template += '</div>';

template += '<div class="description">';
template += '<div class="img-icon"><a href="'+ staffDetail + item.user_id + '"> <img src="' + userResizedImage + '"></a></div>';
template += '<div class="text"><span>' + item.user_name + '</span>';
if (item.user_height>0) {
template += '<span>' + item.user_height + 'cm</span>';
}
template += '</div>';
template += '</div>';
template += '</section>';
appendNewCoodinateList.innerHTML += template;
}
}
}).fail(function (error) {
console.log(error);
const template = '<div class="ss-api-error">情報を取得できませんでした。</div>';
$("#new-coordinate-list-render").append(template);
});
});

$(function() {
const merchant_id = "マーチャントID";
const staffStartApiDomain = "https://api.staff-start.com";
const columnNum = 4;

const coordinateDetail = '/SHOP/coordinate/';
const staffDetail = '/SHOP/staff/';
let staffstartApi = new StaffStartApiCaller(staffStartApiDomain, merchant_id);

let appendPopularCoodinateList = document.getElementById("popular-coordinate-list-render");
let requestPopularCoordinateData = {sort:'pv'};
staffstartApi.getCoordinateList(requestPopularCoordinateData)
.done(function (data) {
total = data.total;
result = data.item;

if (total <= 0) {
const template = '<div>該当コーディネートはありません</div>';
$("#popular-coordinate-list-render").append(template);
return;
}

for(let i=0; i<columnNum; i++){
if (result[i] != undefined) {
let item = result[i];
let userResizedImage = item.user_resized_images.length > 2 ? item.user_resized_images[2].url : "/SHOP/img/simg/noimage.gif";
let coordlistResizedImages = "/SHOP/img/mimg/noimage.gif";
if (item.resized_main_images.length === 1 && Object.keys(item.resized_main_images[0]).length > 0 ) {
coordlistResizedImages = item.resized_main_images[0].m;
}
let template = '<section class="column4">';
template += '<div class="itemThumb-wrap">';
template += '<span class="badge"></span>';
template += '<p class="itemThumb">';
template += '<a href="' + coordinateDetail + item.cid + '"> <span class="item-list-span-img"><img class="max-height-333" src="' + coordlistResizedImages + '"></span></a>';
template += '</p>';
template += '</div>';

template += '<div class="description">';
template += '<div class="img-icon"><a href="'+ staffDetail + item.user_id + '"> <img src="' + userResizedImage + '"></a></div>';
template += '<div class="text"><span>' + item.user_name + '</span>';
if (item.user_height>0) {
template += '<span>' + item.user_height + 'cm</span>';
}
template += '</div>';
template += '</div>';
template += '</section>';
appendPopularCoodinateList.innerHTML += template;
}
}
}).fail(function (error) {
console.log(error);
const template = '<div class="ss-api-error">情報を取得できませんでした。</div>';
$("#popular-coordinate-list-render").append(template);
});
});

$(function() {
const merchant_id = "マーチャントID";
const staffStartApiDomain = "https://api.staff-start.com";
const columnNum = 4;

const staffDetail = '/SHOP/staff/';
let staffstartApi = new StaffStartApiCaller(staffStartApiDomain, merchant_id);

let appendStaffList = document.getElementById("staff-list-render");
let requestStaffData = {sort:'pv'};
staffstartApi.getStaffList(requestStaffData)
.done(function (data) {
total = data.total;
result = data.item;

if (total <= 0) {
const template = '<div>該当スタッフはおりません</div>';
$("#staff-list-render").append(template);
return;
}

for(let i=0; i<columnNum; i++){
if (result[i] != undefined) {
let item = result[i];
let userResizedImage = item.resized_images.length > 2 ? item.resized_images[1].url : "/SHOP/img/mimg/noimage.gif";
let staffDetailLink = staffDetail + item.user_id;
let template = '<section class="column4 staff-item">';
template += '<div class="itemThumb-wrap">';
template += '<span class="badge"></span>';
template += '<p class="itemThumb">';
template += '<a href="' + staffDetailLink + '"><span class="item-list-span-img"><img class="max-height-333" src="' + userResizedImage + '"></span></a>';
template += '</p>';
template += '</div>';

template += '<div>';
template += '<a href="' + staffDetailLink +'">';
template += '<div class="staff-name">';
template += '<a href="' + staffDetailLink + '">'+item.name+'</a>';
template += '</div>';
template += '<div class="staff-height">';
if (item.height>0) {
template += '<a href="' + staffDetailLink+ '">'+item.height+'cm</a>';
}
template += '</div>';
template += '</a>';
template += '</div>';

template += '</section>';
appendStaffList.innerHTML += template;
}
}
}).fail(function (error) {
console.log(error);
const template = '<div class="ss-api-error">情報を取得できませんでした。</div>';
$("#staff-list-render").append(template);
});
});

<style>
.sps-staffStart #new-coordinate-list-render .description .img-icon img {
border-radius: 50%;
}

.sps-staffStart #popular-coordinate-list-render .description .img-icon img {
border-radius: 50%;
}
</style>