Creating an app

Using core package

Core package exports couple of classes and interface (along with that available in sdk-share package). Depending on which type of iframe addon we are creating it is possible to use two main classes.

plain text
import { BackofficeSdk } from "@one-commerce/sdk-core"

or for shop addon

plain text
import { ShopSdk } from "@one-commerce/sdk-core"

Both of them works the same way but provides different set of methods and attributes. In later examples we will stick with BackofficeSdk for sake of bravity.

Initialization

Both BackofficeSdk and ShopSdk are classes which needs to be initialized. Also, both of them require some configuration object in constructor.

plain text
import { BackofficeSdk, SdkOptions } from "@one-commerce/sdk-core"

const options: SdkOptions = {
  origin: 'https://login.shop',
  debug: true
}
const sdk = new BackofficeSdk(options)

The origin is important and required attribute to properly initialize sdk and it should point to the origin of ONe Backoffice application under which our addon should be embedded. If the origin does not fit, the registration process will fail and the addon is not going to work. The same is for ShopSdk where origin should point to desired shop instance domain.

Origin cannot contain trailing slash.

The debug is an optional attribute which add more verbose logging to console.

Addon registration

When the iframe is embeded with our simple app, the registration is done by our sdk instance. Till its done, all attributes and methods are unavailable or are undefined.

Luckily, the sdk instance is an object which provide a possibility to listen for some set of events.

Events

All events which we can subscribe are defined in @one-commerce/sdk-shared package. Lets extend our previous script with events

plain text
import { BackofficeSdk, SdkOptions, SdkEvents } from "@one-commerce/sdk-core"

const options: SdkOptions = {
  origin: 'https://login.shop',
  debug: true
}
const sdk = new BackofficeSdk(options)

sdk.on(SdkEvents.INIT, (payload) => {
  console.log('We are registered with ONe Backoffice app')
})
sdk.on(SdkEvents.UPDATE, (payload) => {
  console.log('Some of attributes has been updated in ONe Backoffice app')
})

INIT event is emitted when instance is connected with parent frame,

UPDATE event id emitted, when some of attributes in services are changed.

Using framework wrapper (Vue3)

A lot of previous code is already done by our wrapping packages. In this example we will use @one-commerce/sdk-backoffice-vue3 wrapper which provides SDK as a Vue 3 plugin.

Let’s create simple Vue 3 app using vue-cli.

Our main.ts or main.js file might look like this

plain text
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import sdk from "@one-commerce/sdk-backoffice-vue3";

createApp(App)
  .use(store)
  .use(router)
  .use(sdk, {
    origin: "https://login.shop",
    debug: true,
  })
  .mount("#app");

Right now, the SDK is added as a plugin. Let’s use it in sample Vue SFC component.

plain text
<template>
  //
</template><script lang="ts">
import { defineComponent, onMounted, ref, SetupContext, watch } from "vue";
import { useOneSdk } from "@one-commerce/sdk-backoffice-vue3";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const $one = useOneSdk()
    watch($one!, () => {
      console.log('$one changed ', $one)
    })
    return {}
  },
});
</script>