상품 페이지 연동 플로팅

상품 페이지 연동 플로팅 — 소스클립 플레이어

⏱ 예상 소요 시간: 20분

📋 사전 조건: 라이브러리 설치 · 상품 페이지가 같은 도메인

이 기능이 만드는 화면

시청자가 클립을 보다가 상품을 누르면 영상이 작은 창으로 줄어 계속 재생되고, 그 뒤로 상품 페이지가 뜹니다.
영상을 끊지 않고 상품을 보게 하는 구성입니다.

구성	시청자가 상품을 클릭하면
기본 동작	창이 상품 페이지로 이동하고 재생이 멈춥니다
이 구성	플레이어가 작은 창으로 줄고 그 뒤에 상품 페이지가 깔립니다. 재생은 이어집니다

💡 setFloatingProductLinkUrl 은 상품 페이지를 띄우는 함수이고, setFloatingType 은 플레이어를 작은 창으로 바꾸는 함수입니다. 위 화면은 둘을 함께 호출해야 나옵니다 — 하나만 호출하면 작은 창만 남거나 상품 페이지만 깔립니다.

동작 순서

상품 클릭을 브릿지 이벤트로 가로채 플로팅 전환과 상품 페이지 표시를 직접 처리합니다.

전체 화면 재생→상품 클릭→sauceclipMoveProduct→플로팅 전환 + 상품 페이지

클립을 전체 화면으로 재생합니다.
시청자가 상품을 클릭하면 sauceclipMoveProduct 가 전송되고 기본 이동은 일어나지 않습니다.
핸들러에서 setFloatingType 으로 플레이어를 축소합니다.
setFloatingProductLinkUrl 에 상품 링크를 넘기면 그 페이지가 전체 화면 iframe 으로 깔립니다.

전체 코드

브릿지 이벤트 함수는 setInit 보다 먼저 정의해도, 뒤에 정의해도 동작합니다.

html

<div id="sauce_clip_player"></div>

<script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
<script>
  // 상품 클릭 — 기본 이동 대신 플로팅으로 전환한다
  window.sauceclipMoveProduct = function (params) {
    window.SauceClipPlayerLib.setFloatingType({ type: 'basic' })
    window.SauceClipPlayerLib.setFloatingProductLinkUrl(params.linkUrl)
  }

  // 플로팅 플레이어 탭 — 플로팅을 해제한다
  window.sauceclipTogglePlay = function () {
    window.SauceClipPlayerLib.resetFloatingType()
  }

  window.SauceClipPlayerLib.setInit({
    partnerUniqueId: '파트너 ID',
    clipId: '클립 ID'
  })
  window.SauceClipPlayerLib.load()
</script>

💡 sauceclipMoveProduct 의 페이로드 필드는 상품 클릭 연동에 있습니다.

상품 페이지가 뜨는 방식

setFloatingProductLinkUrl 은 상품 페이지를 화면 전체를 덮는 iframe 으로 깝니다. 플로팅 플레이어는 그 위에 남습니다.

요소	겹침 순서
플로팅 플레이어	`z-index: 9999`
상품 페이지 `iframe`	`z-index: 50`
자사몰 페이지	그 아래

⚠️ 상품 페이지는 라이브러리를 넣은 페이지와 같은 도메인이어야 합니다. 다른 도메인이면 브라우저가 iframe 내부에 접근할 수 없어, 겹쳐 띄우는 대신 그 주소로 페이지가 이동합니다.

상품 페이지 안에서의 이동

iframe 안의 상품 페이지를 클릭하면 창 전체가 그 상품 페이지 주소로 이동합니다.
링크뿐 아니라 페이지 안의 어느 곳을 눌러도 같습니다. 플로팅 플레이어는 이 시점에 사라집니다.

📍 linkUrl 이 PC용 주소면 플로팅 뒤에 PC 화면이 깔립니다. 어드민에 등록하는 상품 링크를 모바일 주소로 맞춥니다.

다음 단계

위치·크기·이동 영역 — size · floatingPosition · restrictionArea

→