Slim UI integration

We developed a lightweight UI of the Printess Editor that integrates seemlessly into your shop system. It is not feature complete compared to our Panel UI, but it is way faster and does not require the user to leave the shop system at all.

A basic implementation of the Slim UI is very straightforward:

const r = await import("https://editor.printess.com/slim-ui.js");
const token = "[your-shop-token]"

const printess = await r.createSlimUi({
    previewContainer: document.querySelector(".printess-preview"),
    uiContainer: document.querySelector(".printess-ui"),
    previewImage: document.querySelector(".printess-preview-image"),
    loader: document.querySelector(".printess-image-loader"),
    shopToken: token,
    templateName: "Framed-Canvas-Slim",
    published: false,
    theme: "",
    lang: "de",
    textUpdateTimeout: "short",
    formFields: [{ name: "head", value: "Neue Überschrift" }]
});

document.getElementById("buttonBasket")
    .addEventListener("click", async () =>  {
        const data = await printess.createSaveToken();
        prompt("Save Token:", data.saveToken);
        prompt("Thumbnail Url:", data.thumbnailUrl);
    });

As you can see, the process is fairly similar to the Panel UI, the main difference being that you need to have at least a <div class="printess-ui"></div> in your webpage for the UI to attach itself to.

Loading Parameters

You give the createSlimUi() call an object that has to contain some data in order for it to work, such as a correct templateName, shopToken and uiContainer.

Additionally, some loading parameters give you options to influence the state in which the UI is initialized.

Initial Form Field values

formFields accepts an array of objects, each containing the name of a form field and the value you want to be selected initially.

Merge Snippet on load

The layout value accepts a string containing a Layout Snippet ID, which will be merged when the template is loaded.

You can find your Layout Snippet ID in the Account Portal.

Load Layout Snippet selection

If you want your users to be able to select a Layout Snippet for their customisation, you need to give the loader the loadingParameter layoutSnippetSearchTags, which accepts an array of tags as strings, such as layoutSnippetSearchTags: ["slim-portrait", "printess-canvas-portrait"].

The menu only loads if you have at least one of the tags selected in the template in the Printess Editor and it only loads the tags selected there.

You can also load a Keyword Menu with the layoutSnippetMenuId loading parameter.

API

The createSlimUi() call returns a reference to a JS/TS api, which you can utilise to enrich your shop with more functionality.

Slim UI use cases

Following are some code examples of use cases that were inspired by our customers.

Switching to the Panel UI

The benefits of the SlimUI come at a cost: It is not feature complete compared to the full Printess editor which you can use through the PanelUI. You might have a product that most of your users can easily customize to their wishes through the Slim options, but some want to take more control. For these you can offer a switch to the full editor experience in two simple steps.

First you must save the current state of settings in the slimUI to a saveToken: await slimApi.createSaveToken().

You can then use this saveToken to load the state in the PanelUI after loading it:

const printessPanel = await printessPanelLoader.load({
    token: "[your-shop-token]",
    templateName: "Framed-Canvas-Slim",
    templateVersion: "published",
    basketId: "Some-Unique-Basket-Or-Session-Id",
});

printessPanel.api.load(data.saveToken);
printessPanel.ui.show();