Shoplive Plugin 샘플코드
Shoplive Plugin의 다양한 옵션을 사용한 샘플
messageCallback
을 사용하여DOWNLOAD_COUPON
,CLICK_PRODUCT
,LOGIN_REQUIRED
등의 이벤트에 수행할 동작을 재정의 합니다.- Shoplive Plugin을 사용하여 방송과 목록을 화면에 표시합니다.
예제
<html>
<head>
<title>Shoplive - Simple Shoplive Plugin example</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no"
/>
<script
type="text/javascript"
src="https://static.shoplive.cloud/shoplive.js"
></script>
<script>
let messageCallback = {
DOWNLOAD_COUPON: function (payload) {
// get Current Player
var player = cloud.shoplive.getPlayer();
// if, ONAIR player
if (
player.campaignStatus === "ONAIR" &&
player.campaignKey === payload.campaignKey
) {
// copy to clipboard
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value = payload.coupon;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
// Show Dialog
player.sendMessage("showDialog", {
title: "Copy to clipboard completed.",
message: payload.coupon,
});
}
},
CLICK_PRODUCT: function (payload) {
// 클릭한 상품 URL에 새로운 파라미터를 추가할 수 있습니다.
var url = payload.url + "¶meter=" + "{your_parameter}";
// 현재 창에서 상품 페이지로 이동합니다.
location.href = url;
},
LOGIN_REQUIRED: function (payload) {
alert("LOGIN_REQUIRED");
location.href = "YOUR_LOGIN_PAGE_URL";
},
};
cloud.shoplive.init({
accessKey: "{YOUR_ACCESS_KEY}",
messageCallback: messageCallback,
});
let userId = "USER_ID";
let userName = "USER_NAME";
if (userId) {
cloud.shoplive.setUserObject({ userId: userId, userName: userName });
}
</script>
</head>
<body>
<div id="shoplive-overall-area"></div>
<script defer>
cloud.shoplive.setOverall("shoplive-overall-area");
</script>
</body>
</html>
Updated 11 months ago