JS SDK For Easy Design

SDK is responsible for the communication between third-party pages and easy design iframe.

First, after entering the easy design, a group of brandgoodCode will be sent to the third party to represent the product information that needs to be provided by the third party.
The structure is as follows (add as needed):

JavaScript

//Product information (including all original and replaced products), brandgoodid as key
brandGoodList: {
    brandgoodCode1: {
        brandgoodName: string,
        previewImgUrl: string,
        price: number,
    },
    brandgoodCode2: {
        brandgoodName: string,
        previewImgUrl: string,
        price: number,
    }
}

Events exposed in easy design:

JavaScript

// The information of the products to be obtained for easy design is returned to the brandgoodlist (see the code above)
// brandgoodCodes: code list of products needed for easy design
getProductInfo(brandgoodCodes): Promise<brandGoodList>

// One click purchase event
// brandgoodCodes: list of items purchased
onBuy(brandgoodCodes: number[])

// Inform that the third party data has been obtained and the project data loading is completed
onReady()

// Click product details to trigger
// brandgoodCode: product code
onProductDetail(brandgoodCode)

// Click album and rendering button to trigger in non login state
// diffData: replacement data. After login, add the parameter diffdata = {replacement data} after the easy design URL
onLogin(diffData: string)

// Get the current easy design replacement data and click the render to trigger
// diffData: replacement data
onDiff(diffData: string)

For custom style:

JavaScript

toolbarTextStyle：Product list, Atlas and other text styles
toolbarIconStyle：Product list, Atlas and other icon styles
purChaseListName: Text replacement of product list

SDK parameters:

Name	Required	Type	Description
onBuy	false	see above	One click purchase callback
onReady	false	see above	Project data loading completed
onProductDetail	false	see above	Product details jump
getProductInfo	false	see above	Get Product Information
onDiff	false	see above	Get current easy design replacement data
onLogin	false	see above	Login event
class	false	string	Iframe class
src	true	string	Iframe src
dom	true	dom	Iframe mount point
custom	false	see above	Custom style section

JavaScript

// Call method example
// The new SDK initializes iframe and calls open() to open.
sdk = new DesignSDK({
    class,
    src,
    dom,
    custom: {
        toolbarIconStyle: {
            height: '300px'
        },
        toolbarTextStyle: {
            fontSize: '20px'
        },
        purChaseListName: 'nnakjs'
    },
    events: {
        onBuy,
        onReady,
        onProductDetail，
        getProductInfo,
        onDiff,
        onLogin
    }
})

sdk.open();