The insertion of HTML codes is controlled by the obligatory rules, which can be found in HTML codes.
The Shoptet also allows HTML codes to be inserted directly in the e-shop administration. Article HTML codes describes how to work with them.
Partners-developers do not have the option to insert HTML code directly into the administration of the final e-shop. When developing the addons, there are two ways to insert these:
/template-include
. For more information, see Documentation API website. This is the most advanced option. Specific HTML codes can be inserted for each e-shop. (See “Example 1”)The HTML codes that you insert in the resulting page are generated in the following order:
/template-include
. If there are more codes from several addons, the order of insertion cannot be relied upon.Within multiple HTML blocks of one type (e.g. multiple addons in a single e-shop), a fixed order is not guaranteed.
You can fill/edit inserted HTML codes in the administration for the addon detail page of the Codes tab.
The code inserted in the addon administration is inserted statically into all the e-shops, that have this addon installed. This code is inserted in each e-shop in the same form.
You can use placeholders to customize HTML code according to the properties of a particular e-shop. These will be replaced with the values from e-shop environment, when the page is rendered.
Tags can be used to replace values, for example as follows:
— #HOST#
→ For example fenix.myshopet.com
— #PROJECT_ID#
→ For example 159834
— #TEMPLATE#
→ For example Step
, Classic
, Techno
— #LANGUAGE#
→ For example cs
, sk
The example shows how you can customize both JS and CSS codes for a specific e-shop, including the use of tags.
<script type="text/javascript">
var projectSpecificVariable = "I am variable specific to each e-shop.";
</script>
<strong>Hello world, I am text specific to each e-shop.</strong>
As you can see, you can use projectSpecificVariable
defined via API endpoint here.
<script type="text/javascript">
var demoPartner = {
'host': '#HOST#',
'projectId': #PROJECT_ID#,
'template': '#TEMPLATE#',
'lang': '#LANGUAGE#',
'someSetting': projectSpecificVariable
};
</script>
<script src="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/common.js" type="text/javascript"></script>
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#TEMPLATE#.css" rel="stylesheet" />
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#HOST#/style.css?v=1" rel="stylesheet" />
The appearance of the e-shop depends on the template used, layout settings, selected color scheme, and other options. There are three ways you can find them and use them for your edits:
shoptet.design