Contents x
    Implementing Brand Favorite Function
      • Print
      Contents

      Implementing Brand Favorite Function

        • Print
        Article summary

        Turning on this feature

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

        Before using the brand favorite function, you need to create and configure the brand by referring to the Brand Creation & Setting guide for implementing the brand-favorite function.

        messageCallback

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

        Action

        Payload

        Description

        ON_CHANGED_BRAND_FAVORITE

        • campaignKey (string)

        • identifier(string)

        Event that is called when the player for a campaign with a brand is started, or when brand information is changed in real-time

        ON_CLICK_BRAND_FAVORITE_BUTTON

        • brand(string)

        • campaignKey (string)

        • favorite(string)

        • identifier(string)

        • name(string)

        The event is called by clicking "Brand Favorite"

        SEND_COMMAND_MESSAGE

        SEND_COMMAND_MESSAGE is one type of command fired by the sendMessage(), which can deliver the below action and payload.

        Action

        Payload

        Description

        SET_FAVORITE_BRAND

        JSON object

        Command to set the brand favorite status.

        Payload

        Name

        Type

        Example

        Description

        favorite

        boolean

        true | false

        Whether brand favorite

        identifier

        string

        shoplive

        Brand identification name

        Sample Code

        This is a sample code for defining a messageCallback that is called when the brand favorite button is clicked in the player.

        var messageCallback = {

    // Event that is called when the player with a brand is started, or when brand information is changed in real time.
    ON_CHANGED_BRAND_FAVORITE: function(payload) {

        const { identifier } = payload; // Brand identifier that is set
        // You can change the current user's brand favorite status.
        if (identifier === "USER_FAVORITE_BRAND_IDENTIFIER") {
            const commandPayload = {
                command: "SET_BRAND_FAVORITE",
                payload: { identifier: identifier, favorite: true }
            }
            const player = cloud.shoplive.getPlayer();

            player.sendMessage("SEND_COMMAND_MESSAGE", commandPayload)
        }
    },

    // Event that is called on clicking "Brand Favorite"
    ON_CLICK_BRAND_FAVORITE_BUTTON: function(payload) {
        const { favorite, identifier } = payload;
        console.log(identifier, favorite);
        fetch("favorite save api address")
            .then((res) => res.json())
            .then((res) => {
                // In case the brand favorite processing result is returned in success.
                if (res.success) {
                    alert(`${identifier} has been added to favorite`);
                } else {
                    alert(`${identifier} has been removed from favorite`);
                }
            });
    },
}

// Starting the player by specifying the brand favorite status.
var options = {
    messageCallback: messageCallback,
    brand: {
        identifier: "YOUR_BRAND_IDENTIFIER",
        favorite: true,
    },
};

cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });

        What's Next