Requirements

Overview

By default, iframe addons are going to be hosted on different domain than shop/backoffice apps.

In that case, embedded iframe breaks Same-Origin Policy and browser permit access to any shared resources (for example window object). The javascript context is isolated and embeded application cannot access any resource regarding parent frame.

To overcome this problem, we created set of javascript SDK’s which talk to each-other using postMessage mechanism which is the only way to communicate is our case between frames.

Packages

All public packages which are designed for sdk communication are available in public npmjs repository.

Short summary of them:

(Required) @one-commerce/sdk-core - core package which contains communication boilerplate

(Required/Core dep) @one-commerce/sdk-shared - set of interfaces exchanged between ONe apps and SDK Core

(Optional) @one-commerce/sdk-backoffice-vue3 - wrapper for sdk-core as Vue3 Plugin for iframe_bo

(Optional) @one-commerce/sdk-shop-vue3 - wrapper for sdk-core as Vue3 Plugin for iframe_ofe

Installation

The default way is using npm/yarn package manager to install desired packages

plain text
yarn add @one-commerce/sdk-core

plain text
npm i --save @one-commerce/sdk-core

In case we are not using any package manager it is possible to embed the package in script tag using minifued, UMD version. Since the packages are publicy available in npmjs repository it is possible to use public CDNs like unpkg, jsdelivr, skypack or any other to embed the package.

plain text
<script src="https://cdn.jsdelivr.net/npm/@one-commerce/sdk-core@1.10.1/lib/bundles/bundle.umd.min.js"></script>

Later on the package is globally available under SdkCore variable.