Documentation / Theme editor / Code examples

These code examples will help you add or edit dynamic content in your store. From simple output to nested foreach, everything is here.

General concept

Because we wanted our source code editor to be the most easier to understand and play with, whatever the server-side language you're familiar with (ASP.Net, Java, PHP, etc.), we decided to create our own programming language, which is very simple to understand. It gives you all the necessary power to build beautiful website and online stores.

All tags must start with "{{" and end with "}}". Everything inside must be valid to be parsed and executed properly. To learn how to write each tag, refer to this documentation.

Tags

All the available tags are listed here. If you have a special need that you think may not be supported, please contact us and we'll see if you can implement what you want.

{{ foreach: [...] }}

Creates a loop to repeat an HTML block as long as there is data in the collection. You can also determine a range of values to show using the "show" keyword. Supports all the foreach collections.

<table class="table table-striped table-condensed">
   <thead>
      <tr>
         <th>Name</th>
         <th width="200px">SKU</th>
         <th width="100px" class="text-right">Quantity</th>
         <th width="100px" class="text-right">Price</th>
         <th width="100px" class="text-right">Total</th>
      </tr>
   </thead>
   <tbody>
      {{ foreach: item in current.order.items show 1 to 10 }}
         <tr>
            <td><a href="{{ output: store.url }}/products/{{ output: item["slug"]}}">
               {{ output: item["itemname"] }}
            </a></td>
            <td>{{ output: item["sku"] }}</td>
            <td class="text-right">{{ output: item["quantity"] }}</td>
            <td class="text-right">{{ output: item["unitprice"] }}</td>
            <td class="text-right">{{ output: item["total"] }}</td>
         </tr>
      {{ end:foreach }}
   </tbody>
</table>

{{ foreach: year in blog.posts.years }}
   {{ output: year["year"]}} ({{ output: year["quantity"]}})<br/>
   {{ foreach: month in year.months }}
      {{ output: month["monthname"]}} ({{ output: month["quantity"]}})<br/>
   {{ end:foreach }}
{{ end:foreach }}

{{ if: [...] [condition] [...] }}

Creates an IF block to generate markup based on certain conditions. Supports all the global objects, foreach objects and global variables.
The [condition­] may be one of the following : ">" greater than, "<" less than, "==" equal, "!=" not equal.

{{ if: current.order["total"] > 10000 }}
   <label>Wow it's expensive !!</label>
{{ else:if }}
   <label>It's a normal price</label>
{{ end:if }}

{{ if: current.order["shippingaddressline2"] != "" }}
   <label>{{ output: current.order["shippingaddressline2"] }}</label>
{{ end:if }}

{{ if: store.phone != "" }}
   <phone>
      <{{ output: store.phone }}
   </phone>
{{ end:if }}

{{ output: [...] }}

Write to the HTML document the value of the specified variable or object's property. Supports all the global objects, foreach objects and global variables.
The | sign may be used to separate a couple of properties in case of a special treatment for null values. When used, the output processor will check if the first value is empty, then go to the next one until it finds a value.

{{ output: store.name }}

{{ output: current.order["billingfirstname"] | "-" }}

{{ output: item["name"] }}

{{ switch: [...] }}

Creates a loop to repeat an HTML block as long as there is data in the collection. Supports all the global objects, foreach objects and global variables.

{{ switch: order["status"] }}
   {{ switch:case: "PENDING" }}
      <label class="label label-primary">Pending</label>
   {{ switch:case: "WAIT_PAYMENT" }}
      <label class="label label-warning">Awaiting payment</label>
   {{ switch:case: "PROCESSING" }}
      <label class="label label-primary">Processing</label>
   {{ switch:case: "WAIT_PICKUP" }}
      <label class="label label-info">Awaiting pickup</label>
   {{ switch:case: "PARTIALLY_SHIPPED" }}
      <label class="label label-info">Partially shipped</label>
   {{ switch:case: "SHIPPED" }}
      <label class="label label-success">Shipped</label>
   {{ switch:case: "CANCELLED" }}
      <label class="label label-danger">Cancelled</label>
   {{ switch:case: "REFUNDED" }}
      <label class="label label-danger">Refunded</label>
   {{ switch:case: "COMPLETED" }}
      <label class="label label-success">Completed</label>
   {{ switch:default }}
      <label class="label label-default">{{ output: order["status"] }}</label>
{{ end:switch }}

{{ var: [...] = [...] }}

Sets a global variable to a specific value. Supports some specific global variables that influences foreach but you may also create any variable you want to refer it anywhere in the code.

{{ var: blog.posts.preview.length = 300 }}

{{ var: my.variable = "My value" }}
{{ output: my.variable }}