Guides

브릿지 사용법

Suggest Edits

📘

라이브러리 브릿지 설정이란?

지정한 동작에서 원하는 커스텀 설정으로 변경하여 동작을 수정할수 있는 기능입니다.

// ex) 기본 동작 모아보기에서 방송 클릭시 기본 설정된 방송 URL 로 이동 
 function flexCollectMoveBroadcast(params){
         console.log('flexCollectMoveBroadcast',params)
     }
// 선언이후 방송 클릭시 console.log 로 방송 데이터를 확인할수 있게되며 방송 URL 로 이동되는 동작은 취소됩니다.

예시 코드

브릿지 세팅은 기본적으로 라이브러리의 기 사용법 혹은 모듈화 사용 사용시와 동일합니다.
브릿지 선언이후 라이브러리의 기본 사용법 혹은 모듈화 사용법을 적용해주시면됩니다.

본본법<html>
  <head>
    <title>sauce live 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 src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
  </head>
  <body>
  <div id='curation'></div>
  </body>
  <script>
    // 랜딩시에 자동으로 실행되는 함수입니다.
    // function flexCollectEnter(){
    //   console.log('flexCollectEnter')
    // }
    //  모아보기 로그인 버튼 클릭 시 실행되는 함수입니다.
    // function flexCollectLogin(){
    //   console.log('flexCollectLogin')
    // }
    // 방송 카드 클릭 시 실행되는 함수입니다.
    // function flexCollectMoveBroadcast(params){
    //   console.log('flexCollectMoveBroadcast',params)
    // }
    //  상품 클릭 시 실행되는 함수입니다.
    // function flexCollectMoveProduct(params){
    //   console.log('flexCollectMoveProduct',params)
    // }
    //  탑배너 클릭 시 실행되는 함수입니다.
    // function flexCollectMoveTopBanner(params){
    //   console.log('flexCollectMoveTopBanner',params)
    // }
    // 알람 버튼 클릭하여 신청시 실행되는 함수입니다.
    // function flexCollectApplyForNotification(params){
    //   console.log('flexCollectApplyForNotification',params)
    // }
    // 알람 버튼 클릭하여 취소시에 실행되는 함수입니다.
    // function flexCollectCancelForNotification(params){
    //   console.log('flexCollectCancelForNotification',params)
    // }
    // 방송 커스텀 버튼 클릭 시에 실행되는 함수입니다.
    // function flexCollectBroadcastCustomButton(params){
    //   console.log('flexCollectBroadcastCustomButton', params)
    // }
    // 기본 사용법 혹은 모듈화 사용시와 동일합니다.
   window.addEventListener('load',()=>{
     window.SauceWebLib.setInit({ partnerId:  'partnerId' });
     window.SauceWebLib.load('curation');
     // or window.SauceWebLib.loadCuration({curationId:'XXXX',elementId:'curation' });
    }) 

  </script>
</html>

Updated 2 days ago