옥션 기능 연동하기

    옥션 기능 연동하기


    기사 요약

    샵라이브에서는 실시간 경매 기능을 제공하며, 경매 기능을 위해서는 간단한 개발 연동이 진행되어야 합니다. 경매 상품을 생성하고, 경매를 진행하는 방법은 다음 가이드를 참고해주세요.


    경매 기능 활성화를 위한 데이터 추가

    경매 참여는 사용자 인증 가이드에 따라 인증된 유저(로그인 유저) 중 canBid parameter가 true로 설정되어 있는 사용자만 참여가 가능합니다.

    간편 인증 payload

    Property name

    Description

    Sample

    Comment

    userId (Required)

    사용자 아이디

    sample_user_id

    로그인 사용자의 유일성을 보장할 수 있는 값

    userName

    사용자 이름

    (채팅창에서 사용)

    닉네임

    이름을 지정하지 않을 경우 캠페인의 채팅 설정에 따라 채팅시 입력을 강제하도록 하거나 임의로 생성되도록 할 수 있습니다.

    gender

    사용자 성별

    빈 값(미지정), m(남), f(여)

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    age

    사용자 나이

    25

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    custom

    사용자 임의 데이터

    custom data

    최대 1KB까지 임의의 데이터를 세팅할 수 있습니다.

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    userScore

    사용자 등급

    10

    사용자 등급을 세팅하면 등급에 따른 입장 제한, 이벤트 추첨 제한 등의 기준으로 사용할 수 있습니다.

    -100에서 100까지의 정수로 세팅할 수 있습니다.

    userType

    사용자 유형

    VIP

    방송 입장 제한(Entry Type)이 설정된 방송에 입장할 때, 해당 값을 참조하여 특정 유저(VIP)만 방송에 입장하도록 설정할 수 있습니다.

    profile

    사용자 프로필 이미지 URL

    https://image.shoplive.cloud/sample_profile.png

    방송의 채팅 목록에서 프로필 이미지를 표시할 때 이미지 경로를 직접 설정할 수 있습니다.

    권장되는 이미지 크기는 64px X 64px입니다. 이미지 파일 크기를 과도하게 증가시키지 않도록 주의하십시오.

    canBid

    옥션 참여 가능 여부

    true

    이 값은 true 또는 false의 값을 받을 수 있으며, 이 값에 따라 옥션 입찰이 가능한 상태 또는 불가능한 상태로 구분됩니다.

    JWT 인증 Payload

    Property name

    Description

    Sample

    Comment

    expiration (Required)

    만료 시간 (timestamp)

    1516239022

    토큰 만료 시간

    userId (Required)

    사용자 아이디

    sample_user_id

    로그인 사용자의 유일성을 보장할 수 있는 값

    name

    사용자 이름

    (채팅창에서 사용)

    닉네임

    이름을 지정하지 않을 경우 캠페인의 채팅 설정에 따라 채팅시 입력을 강제하도록 하거나 임의로 생성되도록 할 수 있습니다.

    gender

    사용자 성별

    빈 값(미지정), m(남), f(여)

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    age

    사용자 나이

    25

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    custom

    사용자 임의 데이터

    custom data

    최대 1KB까지 임의의 데이터를 세팅할 수 있습니다.

    전체/로그인 시청자 데이터에서 확인할 수 있습니다.

    userScore

    사용자 등급

    10

    사용자 등급을 세팅하면 등급에 따른 입장 제한, 이벤트 추첨 제한 등의 기준으로 사용할 수 있습니다.

    -100에서 100까지의 정수로 세팅할 수 있습니다.

    userType

    사용자 유형

    VIP

    방송 입장 제한(Entry Type)이 설정된 방송에 입장할 때, 해당 값을 참조하여 특정 유저(VIP)만 방송에 입장하도록 설정할 수 있습니다.

    profile

    사용자 프로필 이미지 URL

    https://image.shoplive.cloud/sample_profile.png

    방송의 채팅 목록에서 프로필 이미지를 표시할 때 이미지 경로를 직접 설정할 수 있습니다.

    권장되는 이미지 크기는 64px X 64px입니다. 이미지 파일 크기를 과도하게 증가시키지 않도록 주의하십시오.

    canBid

    옥션 참여 가능 여부

    true

    이 값은 true 또는 false의 값을 받을 수 있으며, 이 값에 따라 옥션 입찰이 가능한 상태 또는 불가능한 상태로 구분됩니다.


    경매 낙찰자 전용 페이지 연동

    경매 낙찰자에게는 경매 낙찰 안내 시트가 노출됩니다.

    해당 시트 내 구매 버튼을 클릭하였을 때 전달되는 ON_CLICK_BUY_BUTTON에 원하는 액션을 정의하여 이용할 수 있습니다. 관련 가이드를 참고하세요.


    Sample code

    <script
         type="text/javascript"
         src="https://static.shoplive.cloud/shoplive.js"></script>
    
    
    <script>
    Let messageCallback = {
    /* 옥션종료시 표시되는 구매버튼을 사용자가 클릭시 발생하는 이벤트입니다. 
    Payload 참고를 위해 url이동을 하지 않고 payload만 console.log하도록 재정의했습니다.*/
    ON_CLICK_BUY_BUTTON:(payload)=> {
             console.log(payload)
             console.log(`winner ${payload.auction.winner.name}`)
             console.log(`winningPrice ${payload.auction.winningPrice.value}`)
           }
    }
    cloud.shoplive.init({
           accessKey: ACCESS_KEY,
           messageCallback: messageCallback,     
         });
    // 사용자 userID와 userName을 set하며 canBid:true 를 함께 전달합니다.
    cloud.shoplive.setUserObject({userId: “{userId}”, userName: “{userName}”, canBid:true,});
    </script>
    
    
    <div id="shoplive_div"></div>
    <script defer>
         cloud.shoplive.setPlayer("shoplive_div", {
           campaignKey: campaignKey,
           isFullScreen: true,
         });
    </script>