장바구니 버튼 구현하기

Shoplive와 사전 협의를 통해 장바구니 버튼을 노출하고, 해당 버튼에 대한 custom action을 정의할 수 있습니다.

장바구니 버튼을 구현하기 위하여 다음 가이드를 참고하세요.

messageCallback

사용자가 장바구니 버튼을 클릭할 때 발생하는 message callback을 구현하여 원하는 기능을 정의할 수 있습니다.

action	payload	설명
CLICK_PRODUCT_CART	json object	장바구니 버튼 클릭 시 호출되는 message callback 입니다.

Payload 객체

Name	Type	Example	Description
campaignId	LosslessNumber	{ value: "16943", type: "LosslessNumber", isLosslessNumber: true }	현재 캠페인 Id. LosslessNumber 타입의 객체에서 값을 얻기 위해 campaignId.value 를 사용합니다.
goodsId	LosslessNumber	{ value: "44153", type: "LosslessNumber", isLosslessNumber: true }	cart에 담은 상품 Id. LosslessNumber 타입의 객체에서 값을 얻기 위해 goodsId.value 를 사용합니다.
name	string	샵라이브 반팔티	상품 이름
brand	string	샵라이브	상품 브랜드
description	string	솔리드 무지 쿨 반팔티	상품 상세 설명
url	string	https://shoplive.cloud	상품 url
sku	string	prod123sp	상품 식별 코드
showingNow	boolean	`true` \| `false`	상품 now 표시 여부
salesStatus	string	ON_SALE \| ALMOST_SOLD_OUT \| SOLD_OUT	판매 상태 표시
auctionStatus	string	READY \| ONGOING \| ENDED	경매 상태
originalPrice	string	1100	판매가
discountedPrice	string	800	할인가
discountPercentage	string	20	할인율
currency	string	KRW	상품 표시 통화
isCartOn	boolean	`true` \| `false`	cart 담기 요청
campaignKey	string	12e1cc456e7a	캠페인키

샘플 코드

Shoplive 플레이어에서 장바구니 버튼 클릭 시 호출되는 message callback을 구현하는 샘플 코드입니다.

CLICK_PRODUCT_CART: function (payload) {
  const { goodsId, campaignId, campaignKey, name, isCartOn } = payload;

  fetch("cart update api address")
    .then((res) => res.json())
    .then((res) => {
      if (res.success) {
        alert(`${name}를 장바구니에 추가했습니다.`);
      }
    });
}

네이티브 연동하기

네이티브에 연동하기 위해서는 iOS/Android SDK의 CLICK_PRODUCT_CART 핸들러를 사용하여 웹과 동일하게 구현해주세요.

iOS SDK - Handler(CLICK_PRODUCT_CART)
Android SDK - Handler (CLICK_PRODUCT_CART)