상품 장바구니 기능 연동하기

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

기능 활성화
기능 활성화 요청은 샵라이브(ask@shoplive.cloud)로 문의해주세요.

Shoplive와 사전 협의를 통해 장바구니 버튼을 노출하고, 해당 버튼에 대한 custom action을 정의할 수 있습니다. 장바구니 버튼을 구현하기 위하여 다음 가이드를 참고하세요.

messageCallback

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

Action	Payload	Description
CLICK_PRODUCT_CART	json object	messageCallback called on clicking the cart button

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 타입의 객체에서 값을 얻기 위해 campaignId.value 를 사용합니다.)
name	string	PRODUCT NAME	상품 이름
brand	string	SHOPLIVE	상품 브랜드
description	string	Description	상품 상세 설명
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	캠페인 키

SEND_COMMAND_MESSAGE

SEND_COMMAND_MESSAGE는 sendMessage()에 의해 발생하는 명령 유형 중 하나로, 아래의 동작과 페이로드를 전달할 수 있습니다.

Action	Payload	Description
SET_PRODUCT_CART_ON	json object	상품의 CART_ON 상태를 변경하기 위한 ACTION입니다

Payload.products[]

Name	Type	Example	Description
sku	string	product123	상품 식별자
isCartOn	boolean	true	상품의 장바구니\|좋아요 상태

Sample code

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}를 장바구니에 추가했습니다.`);
                        }
                    });
            },
ON_PRODUCT_LIST_SHOWN: function (payload) {

                console.log("ON_PRODUCT_LIST_SHOWN", payload);
                var message = {
                    command: "SET_PRODUCT_CART_ON",
                    payload: {
                        products: [
                            { sku: "product123", isCartOn: true },
                            { sku: "product456", isCartOn: true },
                        ],
                    },
                };
                const player = cloud.shoplive.getPlayer(payload.campaignKey);
                player.sendMessage("SEND_COMMAND_MESSAGE", message);
            },

What's Next

방송 목록 클릭 수동 제어하기

messageCallback
SEND_COMMAND_MESSAGE
Sample code