Contents x
    Implementing the Add to Cart feature
      • Print
      Contents

      Implementing the Add to Cart feature

        • Print
        Article summary

        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