Getting started

What are iframe add ONe?

This kind of addons are external applications which are embedded in ONe frontend applications (backoffice or shop) as a separate pages under certain slug.

Types of iframe add ONe

For now, there are two types of iframe addons:

iframe_bo is used to embed backoffice addon

iframe_front is used to embed shop addon

How to add add ONe for tenant on environment

It is required to use integration API available in plugins backend service to add and manage the plugins for given tenant (specified in header of request).

Under this API it is possible to call PUT method using Swagger to add new plugin for given tenant.

Besides the body of request, it is required to set ID of a plugin (for development it is not that relevant, but its required and should be kept for later usage).

Backoffice add ONe component

With backoffice addon configuration it is possible to set label and icon for left sidebar menu. When enabled, addon will appear at the bottom of list as new page available for users.

plain text
{
    "type": "iframe_bo",
    "buttonLabel": {
      "en": "My plugin"
    },
    "buttonIcon": "cil-layers",
    "page": {
      "slug": "test-plugin",
      "iframeUrl": "https://my-plugin.domain.com",
      "title":  {
         "en": "This is a page title for My Plugin"
      }
    }
}

Shop add ONe

In shop case, the configuration is simpler. The addon is recognized as another page in shop routing. Header and footer remain the same where the content is an embedded app.

plain text
{
    "type": "iframe_front",
    "page": {
      "slug": "my-plugin",
      "iframeUrl": "https://my-plugin.domain.com",
      "title":  {
         "en": "This is a page title for My Plugin"
      }
    }
}

This is example request body which will an addon with two components, each for backoffice and shop

plain text
{
  "author": "John Doe",
  "name": {
    "en": "This is my first plugin!"
  },
  "components": [
    {
        "type": "iframe_front",
        "page": {
          "slug": "my-plugin",
          "iframeUrl": "https://my-shop-plugin.domain.com",
          "title":  {
             "en": "This is a page title for My Plugin"
          }
        }
    },
    {
      "type": "iframe_bo",
      "buttonLabel": {
        "en": "My plugin"
      },
      "buttonIcon": "cil-layers",
      "page": {
        "slug": "test-plugin",
        "iframeUrl": "https://my-backoffice-plugin.domain.com",
        "title":  {
          "en": "This is a page title for My Plugin"
        }
      }
    }
  ]
}