Home » Addons » Documentation » Inserting HTML codes

Inserting HTML codes

The insertion of HTML codes is controlled by the obligatory rules, which can be found in HTML codes.

Addon Repository

For visual addons and templates, we require the use of the Addon Repository, an automated deployment tool. This GitHub application enables faster code reviews, along with automatic deployment and version control.

Please see the separate documentation.

Place to insert 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:

  1. Insertion via the API endpoint /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”)
  2. HTML codes inserted in the addon administration. (See “Example 2”)

The HTML codes that you insert in the resulting page are generated in the following order:

  1. addon codes inserted via the API endpoints /template-include. If there are more codes from several addons, the order of insertion cannot be relied upon.
  2. Codes from the addon administration. If there are more HTML codes from several addons, then the order of insertion cannot be relied upon.
  3. Codes from the e-shop administration

Within multiple HTML blocks of one type (e.g. multiple addons in a single e-shop), a fixed order is not guaranteed.

HTML codes inserted in the addon administration

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.

Dynamically inserted values

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.

Example 1

Code inserted via API endpoint.

<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>

Example 2

Code inserted from addon administration.

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" />

Website design information

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: