Skip to main content
The WEBSALE template language offers a powerful and flexible way to individually design the frontend of an online shop. Dynamic content such as product or user data can be seamlessly embedded in HTML templates, and language-dependent texts or complex conditions can be taken into account. This documentation conveys the basic functions and tools that are frequently used in daily work when designing online shops. From the use of variables to the application of loops and conditions and the use of modifiers, it describes how content can be designed and adjusted dynamically.

​
WEBSALE template engine

The WEBSALE template engine is used for the complete creation and design of the storefront. You do not need knowledge of programming languages such as PHP or Java, nor knowledge of database access, to create and customize your individual WEBSALE online shop. With the WEBSALE template engine, dynamic content in the online shop can be easily displayed — entirely without complex backend logic. As a template manager, you can fully focus on HTML, CSS, and JavaScript and embed dynamic data such as product information, user profiles, or prices with the help of our template engine and template language.

​
Basics and syntax of the WEBSALE template engine

In the WEBSALE template environment, all templates are based on standard HTML files with the extensions .htm or .html, which are stored within the shop’s directory structure. Within these HTML files, so-called template tags can be used to embed dynamic content or language-dependent texts in the frontend. Template tags allow the inclusion of:
  • Text snippets for language-dependent content.
  • Placeholders for dynamic content such as product data, user data, or shop functions.

​
Text snippets

Text snippets are used to centrally manage language-dependent texts such as button labels or headings and to insert them into templates. Their syntax is simple and unambiguous: 
%%TextSnippetName%%
Example: “Add to cart” button 
<button type="button">%%AddToCart%%</button>
Text snippets are used not only in templates but also in configurations, provided that language-dependent texts for the frontend output are stored there, for example display texts or descriptions. More information about using text snippets in configurations can be found in the Configurations section.

​
Placeholders (for dynamic content)

Placeholders are used to embed dynamic data that is provided by the backend at runtime. The syntax is HTML-like and uses double curly braces {}: 
{{= $variable }}
Example: Product name and product description 
<h1>{{= $myProduct.name}}</h1>
<p>{{= $myProduct.description }}</p>
The template engine interprets these placeholders and replaces them at runtime with the corresponding values from the system.

​
Standard escaping

The WEBSALE template engine has built-in standard escaping that is automatically applied to all dynamically embedded content. This ensures that HTML or JavaScript code contained, for example, in product data or CMS content is not interpreted but displayed as plain text. Many contents in the shop — e.g., product descriptions, CMS articles, or other editorial texts — contain HTML for formatting. To prevent these contents from being unintentionally executed as actual HTML code, automatic escaping is applied during output with {{= ... }}. Example: Standard escaping enabled 
{{= $product.description }}
Content in the shop data: 
<p><strong>Super breathable</strong> – ideal for sports and leisure. Now available in the <em>latest generation</em>.</p>
Output in the browser: 
&lt;p&gt;&lt;strong&gt;Super breathable&lt;/strong&gt; – ideal for sports and leisure. Now available in the &lt;em&gt;latest generation&lt;/em&gt;.&lt;/p&gt;
The HTML code is not interpreted but displayed as normal text. This protects against unintended code execution. If content is to be deliberately output as HTML — for example because product texts or CMS content contain HTML and should be rendered correctly — escaping can be deactivated in a targeted manner. To do this, an exclamation mark ! is used instead of =: 
{{! $product.description }}
Output in the browser: 
<p><strong>Super breathable</strong> – ideal for sports and leisure. Now available in the <em>latest generation</em>.</p>
Now the HTML code is correctly interpreted and rendered. Important: Disabling escaping should only be done for trusted content — for example, for data from your own product backend or CMS. Content that originates, for example, from customer form inputs should not be output unfiltered without escaping.

​
Variables

With the WEBSALE template language, you can output the data provided by the shop system. Each page rendered by the template engine receives the data needed to display the requested content. This data is stored in so-called template variables. All template variables can be called via the template language with a $ followed by the variable name. Variable names can be chosen freely. There are also system variables that begin with $ws and whose names are predefined, e.g., $wsProduct, $wsCategory, etc. A complete overview of the WEBSALE system variables and more information about variables in general can be found here.

​
Setting & using variables

Example: New variable 
{{ var $myProduct = $wsProduct.load('1234') }}
New variables are always defined with the var keyword. In this example, the function $wsProduct.load('1234') loads the product data of the product with the item number 1234. This is stored in the variable $myProduct and can be used later. Example: Using the variable 
{{ var $myProduct = $wsProduct.load('1234') }}

<h1>{{= $myProduct.name }}</h1>
<p>{{= $myProduct.description }}</p>
<p>Price: {{= $myProduct.price }} €</p>
Variables that have been defined once can be used in any place in the template. In this case:
  • The product data is stored in $myProduct.
  • The product name, description, and price are dynamically inserted into the template.
Example: Nested variable 
{{ var $myProduct = $wsProduct.load('1234') }}

<img src="{{= $myProduct.custom.mainImage.thumbnail }}" alt="Product image">
Variables can also be nested to access specific values within complex data structures such as objects or arrays. Nesting is always done with dots . between the individual levels. In this example:
  • $product is the main variable for the product.
  • custom references custom data of the product.
  • mainImage indicates the main image of the product.
  • thumbnail accesses the smaller version of the image.
A complete list of all variables and their descriptions can be found in the variables overview.

​
Scope of variables

The scope of a variable defines where it can be used in the template. Variables that are defined outside of scope statements such as if or foreach are valid throughout the entire template: 
{{ var $myCategory = $wsCategory.load('5678') }}
  
  <h2>{{= $myCategory.name }}</h2>
{{ if $myCategory.isActive }}
      <p>This category is active.</p>
  {{ /if }}
Variables defined within scope statements only exist within that scope: 
{{ foreach $myProduct in $wsCategory.loadProducts('5678') }}
    <h3>{{= $myProduct.name }}</h3>
    <p>{{= $myProduct.price }} €</p>
{{ /foreach }}

<p>{{= $myProduct.name }}</p>  -> $myProduct is not valid outside the loop

​
Modifiers

Sometimes it is not enough to simply output the content of a variable — the value must first be changed or adjusted. This is exactly what modifiers are for. Modifiers can be applied to any variable to change its content. To do so, simply append a | (pipe character) and the modifier name to the corresponding variable. Additional parameters are added with :. Example: Truncating the product description 
{{= $myProduct.description|truncate:120 }}
In this example, the truncate modifier is applied to the product description. It truncates the text to a maximum length of 120 characters. Examples: Applying multiple modifiers to a variable You can also apply multiple modifiers to a variable in succession. They are processed in the order in which they are specified. A complete list of all modifiers and their descriptions can be found in the modifiers overview.

​
Conditions

The WEBSALE {if} conditions allow the same flexibility as in PHP or JavaScript, except for a few extensions for the template engine. Every {if} must be combined with a {/if}. {else} and {elseif} are also allowed. All common PHP comparison operators and functions, such as ||, or, &&, and, is_array(), etc., are allowed. With WEBSALE {if} conditions, you can vary the output in the storefront depending on certain conditions. To decide what is output, you can define a condition that checks a variable. A simple condition is represented by an {if} block that contains a check. This block is executed only if the check is true. Example: 
{{ if $myProduct.description }}
    {{= $myPproduct.description }}
{{ else }}
    {{= $myProduct.custom.shortdescr }}
{{ /if }}
In this example, we check whether the variable $myProduct.description has content. If so, its content is output. If not, the alternative content in the else block is rendered. Here we use the short description. In addition to if and else, more complex conditions can also be defined by adding {elseif}. This makes it possible to combine multiple checks in a single condition. Example: Greeting the visitor in the online shop
  • A personal greeting is displayed when an existing customer logs in.
  • A different greeting is displayed when a new customer logs in.
  • A general message is displayed for all visitors who are not logged in.
{{ if $wsAccount.isLoggedIn }}

  <p>Welcome back, {{= $wsAccount.name }}!</p>
  
{{ elseif $wsAccount.isLoggedIn.newUser }}

    <p>Welcome to our online shop, {{= $wsAccount.name }}</p>
    
{{ else }}

    <p>Welcome! Please register.</p>
     
{{ /if }}
Example: Complex conditions with operators, e.g., for stock levels You can use different operators to create complex conditions, e.g.:
  • > or < for comparing the quantity of a product
{{ if $myProduct.stock > 0 }}
    <p>This product is available.</p>
{{ else }}
    <p>This product is not available.</p>
{{ /if }}
A complete overview of the available operators and their use can be found in the conditions documentation.

​
Loops

Loops make it possible to iterate through an array containing multiple data records (e.g., products) and automatically generate content for each individual record. This allows you to efficiently create repeating structures such as product lists, image galleries, or similar content. A foreach loop is opened with the {{ foreach }} tag and closed with {{ /foreach }}. The name of the loop (the so-called loop variable) can be defined freely and may contain letters, numbers, and underscores. The foreach loop runs through each element of the array once and executes the enclosed code section for each element. With each iteration, the current element is assigned to the loop variable. Example: Product list of a category 
<div class="product-list">
    {{ foreach $wsCategory.loadProducts('5678') as $myProduct }}
        <div class="product-item">
            <h2>{{= $myProduct.name }}</h2>
            <p>{{= $myProduct.description }}</p>
            <p>Price: {{= $myProduct.price }} €</p>
        </div>
    {{ foreachelse }}
        <p>No products available in this category.</p>
    {{ /foreach }}
</div>
The loop runs through all products of a category with the ID 5678 and creates a new <div> element for each product. If no products are found in the category, the foreachelse section is executed and a corresponding message is displayed. Complete information on loops can be found here.

​
Complete reference documentation

Of course, the WEBSALE template language offers many other functions and possibilities. However, the basics described above are among the most frequently used tools in daily work when editing the WEBSALE online shop. A complete overview of all functions, modules, actions, and possibilities can be found in our reference documentation.