目次 x
    「カートに追加」機能の実装
      • 印刷する
      目次

      「カートに追加」機能の実装

        • 印刷する
        記事の要約

        機能の有効化

        この機能を有効にするには、Shopliveにお問い合わせください

        事前にShoplive担当者へ連絡をいただくと、カートボタンを表示し、ボタンのカスタムアクションを定義することができます。

        商品カート機能の実装については、以下のガイドを参考にしてください。

        メッセージコールバック

        ユーザーがカートボタンをクリックしたときにトリガーされる messageCallback を実装することで、必要な機能を定義できます。

        アクション

        ペイロード

        説明

        CLICK_PRODUCT_CART

        JSON オブジェクト

        messageCallback がカートボタンのクリック時に呼び出される

        ペイロード オブジェクト

        名前

        種類

        例

        説明

        campaignId

        LosslessNumber

        {
        value: "16943",
        type: "LosslessNumber",
        isLosslessNumber:true
        }

        現在のキャンペーン ID
        (LosslessNumber 型のオブジェクトから値を取得するには、campaignId.value を使用します。）

        goodsId

        LosslessNumber

        {
        value: "44153",
        type: "LosslessNumber",
        isLosslessNumber:true
        }

        カートに追加された商品 ID

        (LosslessNumber 型のオブジェクトから値を取得するには、goodsId.value を使用します。)

        name

        string

        商品

        商品名

        brand

        string

        Shoplive

        商品のブランド

        description

        string

        説明

        商品の説明

        url

        string

        https://shoplive.cloud

        商品ランディング URL

        sku

        string

        prod123SP

        識別用の商品 ID

        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

        日本円

        表示通貨

        isCartOn

        boolean

        true | false

        カート追加リクエスト

        campaignKey

        string

        12e1cc456e7a

        キャンペーンキー

        SEND_COMMAND_MESSAGE

        SEND_COMMAND_MESSAGEは、sendMessage()によってトリガーされるコマンドタイプの1つで、以下のアクションとペイロードを伝達することができます。

        Action

        Payload

        Description

        SET_PRODUCT_CART_ON

        json object

        製品のPRODUCT_CART_ON状態を設定する

        Payload.products[]

        Name

        Type

        Example

        Description

        sku

        string

        product123

        製品SKU

        isCartOn

        boolean

        true

        製品のCART_ON状態

        サンプルコード

        これは、プレイヤーで「カートに追加」ボタンがクリックされたときに呼び出されるmessageCallbackを定義するためのサンプルコードです。

        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