Placing the addon settings into Shoptet administration

If your addon includes user settings, you can place the settings page directly in Shoptet administration, as an iframe. The link to addon settings will then be displayed directly in the Shoptet administration menu.

What to do

URL pages

The settings page must run at your URL
The URL protocol must be https
The URL with the settings is entered in the addon’s editor, “Description” tab. The “Link to external addon settings” field may vary for a specific language
The URL of the link to the external addon settings supports the placeholder #LANGUAGE#. The system can easily detect the language of the e-shop administration
The page must allow iframe display. This means that the X-Frame-Options header must not be sent within the http response.
To authenticate the user, we recommend using the OAuth mechanism described here.

IFrame and cookies in Safari

Some versions of Safari refuse to set up a cookie for a page in iframe, if the user does not have a page in the history of the pages visited.
The solution is to redirect the user’s browser before displaying the iframe to a page on the same domain as iframe, return the user back, and then display iframe.

Procedure:

Create any URL on the same domain as the addon settings is running, with the following content:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script>
    document.cookie = 'safari_cookie_fix=fixed; secure; path=/';
    const urlParams = new URLSearchParams(window.location.search);
    const backUrl = urlParams.get('backUrl');
    if (backUrl !== null) {
        window.location.replace(decodeURIComponent(backUrl));
    }
</script>
</body>
</html>

JavaScript adds the URL to the browser history and redirects it to the URL received in the GET parameter backUrl.

Enter the URL you created into the addon administration settings.

Inserting JavaScript into a page

Add JavaScript to your setting pages to resize the iframe, based on the current page content. You have chosen this solution
So add [this javascript code]to this page (https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js “this javascript code”)

Set up Page stylising

Prepare a page with the addon settings that best respect the design of the shop administration.
The iframe Demo is prepared for you
We have prepared a design guide for you, which can be found at /admin/designova-prirucka/ in your partner e-shop
Both CSS styles, and most necessary [JavaScripts]are available for download (https://gist.github.com/VencaV/3f407016bf09654e90010056f0039a73 “JavaScripty”)
JavaScripts contain jQuery, jQuery UI and some basic interactions used in administration – tool tips, tabs and the option to close the message, all indicated in the demo.
Should you need to use the icon font, you can find it here
The resizer gets the page height information from the tag <body>. For proper functionality, the CSS style for the <body> tag must not have the height set. The height must change according to the current content of the page.

body {
    height:auto
}

Contents of the page

What the page shall contain

Service name and logo (same as used for Shoptet addons)
A concise presentation of the service and its benefits – in a maximum of two sentences – in perex at the beginning of the page
The addon setup section – the goal is to transfer all addon settings directly to the administration of the e-shop without going to third-party pages
The ability to insert your own widgets, graphs and other elements
If a user sets up something on the page, adds, selects in select boxes, etc., add the tooltips to each location
If you mention another part of administration on the page, be sure to include the appropriate link to the page

What the page should not include

The page serves only to set up the addon itself, directly in the administration of the e-shop. Therefore it is prohibited to use it for other purposes. This means:

Do not present or link any of your other services
Do not collect any e-shop data via the site which are not needed for the addon to work

Test the page display in administration

After testing the display, please contact us at api@shoptet.cz. We enable you to see the page in your administration (not visible to other Shoptet clients yet)
If you have the e-shop addon installed, you will see a link to the addon settings in the administration menu of the addon “Link -> Your addon name” (apart from the exceptions at the top of the list, addons are sorted alphabetically)
Let us know when you have completed the page. We will review the settings and, once the page is approved, will set it up so that the link to the settings is visible to all users.

TIP: If you want to convert the administration view of an existing addon, it is recommended that you create a test addon with identical settings to test and debug the administration view.