Overview

These methods allow you to connect user clicks on widget buttons such as Add to Cart to your website's backend functionality.

These methods will only be called if you've configured them in the widget setup page.

Getting Started

Without your code, the window.skutree.commerce object should look like this.

window.skutree = {
    commerce: {
        handleInStockAction(data, callback) { }, // data = { referenceId }
        handleSoldOutAction(data, callback) { }, // data = { referenceId, quantity }
        handleUnlistedAction(data, callback) { }, // data = { brand, sku, barcode }
        handleAddToWishlist(data, callback) { }, // data = { referenceId }
    },
    authentication: { // for information see https://docs.skutree.com/widget/authentication
        getToken() { }
    }
}

Callback

All window.skutree.commerce methods are provided with the callback parameter to call once you've finished with the action.

const success = myApp.someAction(); // your function to handle the request

const response = {
    success: success, // boolean. For internal widget logic
    message: success ? 'Success!' : 'Error!' // string. Text (not HTML) to notify the user
}

callback(response); // Make sure you call the callback with the response object

In Stock Action

Note: window.skutree.commerce.handleAddToCart() is also supported for legacy.

window.skutree = {
    commerce: {
        handleInStockAction({ referenceId, quantity }, callback) {

            // your function to add product to the user's shopping cart
            const added = myApp.addToCart(referenceId, quantity)

            const response = {
                success: added,
                message: added ? 'Added!' : 'Error!'
            }

            callback(response)
        }
    }
}

Sold Out Action

window.skutree = {
    commerce: {
        handleSoldOutAction({ referenceId }, callback) {

            // backorder or notify me etc
            const backOrdered = myApp.backOrderProduct(referenceId)

            const response = {
                success: backOrdered,
                message: backOrdered ? 'Back Ordered!' : 'Error!'
            }

            callback(response)
        }
    }
}

Unlisted Action

window.skutree = {
    commerce: {
        handleUnlistedAction({ brand, sku, barcode }, callback) {

            // email purchasing dept. to order in
            const emailed = myApp.emailAdminToOrderIn({ brand, sku, barcode })

            const response = {
                success: emailed,
                message: emailed ? 'Subscribed!' : 'Error!'
            }

            callback(response)
        }
    }
}

Add to Wishlist

window.skutree = {
    commerce: {
        handleAddToWishlist({ referenceId }, callback) {

            // your function to add the product to the user's wishlist
            const added = myApp.addToWishlist(referenceId)

            const response = {
                success: added,
                message: added ? 'Added!' : 'Error'
            }

            callback(response)
        }
    }
}

Full Example

If we bring the snippets above, it looks like this. Feel free to use this as boiler plate code to get started.

window.skutree = {
    commerce: {
        handleInStockAction({ referenceId, quantity }, callback) {

            // your function to add product to the user's shopping cart
            const added = myApp.addToCart(referenceId, quantity)

            const response = {
                success: added,
                message: added ? 'Added!' : 'Error!'
            }

            callback(response)
        },
        handleAddToWishlist({ referenceId }, callback) {

            // your function to add the product to the user's wishlist
            const added = myApp.addToWishlist(referenceId)

            const response = {
                success: added,
                message: added ? 'Added!' : 'Error'
            }

            callback(response)
        },
        handleSoldOutAction({ referenceId }, callback) {

            // backorder or notify me etc
            const backOrdered = myApp.backOrderProduct(referenceId)

            const response = {
                success: backOrdered,
                message: backOrdered ? 'Back Ordered!' : 'Error!'
            }

            callback(response)
        },
        handleUnlistedAction({ brand, sku, barcode }, callback) {

            // email purchasing dept. to order in
            const emailed = myApp.emailAdminToOrderIn({ brand, sku, barcode })

            const response = {
                success: emailed,
                message: emailed ? 'Subscribed!' : 'Error!'
            }

            callback(response)
        }
    }
}