Understanding templates

In short, template is a frontend counterpart of the plugin. It is a TWIG file containing your HTML code alongside with the Javascript.

Example of a template

Code below shows the very simple template that renders the header part of a page. For example, this template is a part of WAI/Common/Header plugin which is used in each page.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Surikata.io Hello World</title>
  <meta name="robots" content="noindex, follow" />
  <meta name="description" content="{{header.metaDescription}}">
  <meta name="keywords" content="{{header.metaKeywords}}">

  <!-- Favicon -->
  <link rel="shortcut icon" href="{{uploadedFileUrl}}/favicon.png" />

  <link rel="stylesheet" href="{{rootUrl}}/theme/assets/css/main.css">
  <script src="{{rootUrl}}/theme/assets/js/jquery-3.5.1.min.js"></script>
</head>
<style>
  :root {
    --theme-main-color: {{settings.design.themeMainColor}};
    --theme-second-color: {{settings.design.themeSecondColor}};
    --theme-third-color: {{settings.design.themeThirdColor}};
    --theme-grey-color: {{settings.design.themeGreyColor}};
    --theme-lightgrey-color: {{settings.design.themeLightGreyColor}};

    --body-bg-color: {{settings.design.bodyBgColor}};
    --body-text-color: {{settings.design.bodyTextColor}};
    --body-link-color: {{settings.design.bodyLinkColor}};
    --body-heading-color: {{settings.design.bodyHeadingColor}};

    --header-bg-color: {{settings.design.headerBgColor}};
    --header-text-color: {{settings.design.headerTextColor}};
    --header-link-color: {{settings.design.headerLinkColor}};
    --header-heading-color: {{settings.design.headerHeadingColor}};

    --footer-bg-color: {{settings.design.footerBgColor}};
    --footer-text-color: {{settings.design.footerTextColor}};
    --footer-link-color: {{settings.design.footerLinkColor}};
    --footer-heading-color: {{settings.design.footerHeadingColor}};
  }
  {{settings.design.custom_css}}
</style>
<body>

Variables

As you can see in the code about, there are variables used. For example:

<meta name="keywords" content="{{header.metaKeywords}}">

Each template is a TWIG file which means that the syntax for using variables can be found in TWIG's documentation. Try google "twig using variables" for more information.

TWIG offers more than just using variables. We recommend you to get familiar with it.

You also should read the List of default variables available in TWIG templates.

Working with assets

There is also a reference to the main.css file in the example:

<link rel="stylesheet" href="{{rootUrl}}/theme/assets/css/main.css">

Each asset file (Javascript, CSS, image, video, ...) must be placed in an apropriate folder. Read the chapter Theme folder structure about where and how to store the assets.

Followingly, read the chapter Working with assets to learn how to use the assets in your template.

Accessing uploaded files

Surikata.io's administration panel has (as expected) a functionality to upload files (see "Files and Media" in the left sidebar of the administration panel). If you want to access such a file (or image), you should use the {{ uploadedFileUrl }} variable.

See this very simple example...

<link rel="shortcut icon" href="{{uploadedFileUrl}}/favicon.png" />

... or something more sophisticated:

{% for item in cartContents.items %}
  <a href="{{ item.PRODUCT.url }}">
    <img
      src="{{uploadedFileUrl}}/{{item.PRODUCT.image}}"
      alt="{{item.PRODUCT.TRANSLATIONS.name}}"
    />
  </a>
{% endfor %}

In most cases these files are stored in ROOT_DIR/upload folder but this can be configured differently.

In the example below, the variable cartContents is prepared by the WAI/Customers/Cart plugin.

Surikata
E-commerce development framework