Add to Cart Function

Implementing Add to Cart Function

Article summary

Did you find this summary helpful?

Thank you for your feedback

Turning on this feature
Please contact Shoplive at ask@shoplive.cloud to enable this feature

By coordinating with Shoplive in advance, you can display the cart button and define custom actions for the button. Please refer to the following guide for implementing the product cart function.

messageCallback

You can define the desired functionality by implementing a messageCallback triggered when the user clicks the cart button.

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

Payload Object

Name	Type	Example	Description
campaignId	LosslessNumber	{ “value”: "16943", “type”: "LosslessNumber", “isLosslessNumber” true }	Current campaign ID (To get the value from an object of type LosslessNumber, use campaignId.value.)
goodsId	LosslessNumber	{ “value”: "44153", “type”: "LosslessNumber", “isLosslessNumber”: true }	Cart added product ID (To get the value from an object of type LosslessNumber, use goodsId.value.)
name	string	PRODUCT NAME	Product name
brand	string	SHOPLIVE	Brand of product
description	string	Description	Description of product
url	string	https://shoplive.cloud	Product landing URL
sku	string	prod123sp	Product ID for identifying
showingNow	boolean	`true` \| `false`	Whether the product is NOW
salesStatus	string	ON_SALE \| ALMOST_SOLD_OUT \| SOLD_OUT	Status of sales
auctionStatus	string	READY \| ONGOING \| ENDED	Status of auction
originalPrice	string	1100	Original price
discountedPrice	string	800	Discounted price
discountPercentage	string	20	Rate of discount
currency	string	KRW	Currency to display
isCartOn	boolean	`true` \| `false`	Cart add request
campaignKey	string	12e1cc456e7a	Campaign Key

SEND_COMMAND_MESSAGE

SEND_COMMAND_MESSAGE is one of the command types triggered by the sendMessage(), which can convey the following actions and payloads.

Action	Payload	Description
SET_PRODUCT_CART_ON	json object	Setting the PRODUCT_CART_ON status of product

Payload.products[]

Name	Type	Example	Description
sku	string	product123	product sku
isCartOn	boolean	true	CART_ON status of the product

Sample code

This is a sample code for defining a messageCallback that is called when the add to cart button is clicked in the player.

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} was added to cart.`);
                        }
                    });
            },
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

Overriding Shoplive Plugin List Item

Table of contents

messageCallback
SEND_COMMAND_MESSAGE
Sample code