Skip to main content
Skip table of contents

Using Templates Editor

Purpose and scope

Do you want to add a personalized welcome message to your Account Dashboard in WebShop? Perhaps you want to display only the customer’s name, and not their account number on the Account Dashboard? Or maybe you have a promotional video you wish to share with your customers and you’d like to include this at the bottom of the Account Dashboard screen? Our Templates Editor feature is a code-based design tool to extend the look and feel of your Account Dashboard.

The Templates Editor gives you more control over the look and feel of your WebShop. Initially, we have exposed objects and variables in the Account Dashboard, allowing you to add messages, links to customer promotions and/or move the order of elements contained in the body of the Account Dashboard screen. Use our Using account dashboard icons feature to re-order menu items on the Account Dashboard. We have also introduced a TWIG block to our Visual Page Builder, which allows you to use the Template Editor on content pages also.

This feature is a work in progress. It is enabled upon request. It will be extended to expose more objects and variables over time giving you even more control over the look and feel of your WebShop.

The purpose of this article is to explain what the Templates Editor feature is, and to provide some use cases where you may find it useful.

Key points

  • Knowledge of coding is required to use this feature. You must understand some basic programming constructs and be comfortable using HTML, CSS and variables.

  • You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop. We do not provide free support fix code you have written in the Templates Editor.

  • This feature is a work in progress.

  • Currently, it is enabled upon request.

Benefits

Key benefits are:

  • Tailor messaging to your customers

  • Highlight and link promotions and offers for your customers directly from their Account Dashboard

  • Consistency across pages on your WebShop

  • Any changes you make can be done at a time that suits you.

  • Any changes that you make are applied immediately, so it is quick and easy to update WebShop as you go along.

Introducing terms and concepts used in this article

Term

Definition

Hypertext Markup Language

(HTML), the standard markup language for creating Web pages, used to describe the structure of a Web page.

Twig

an open source template engine which we refer to as our templating language. It consists of a standard syntax that uses expressions, variables and tags to control the content and logic of each template or code snippet.

Fitting it all together

The Templates Editor is integrated with Management Interface. It is a code-based design tool that can be used to extend the look and feel of your WebShop Account Dashboard. The Template Editor uses Twig. Twig is an open source template engine1, which we refer to as our templating language. Twig consists of a standard syntax that uses expressions, variables and tags to control the content and logic of each template. Read Introduction to Twig - the fast, fast and secure template engine for PHP (external site) for more information about how to use Twig.

When you open the Templates Editor, the interface is displayed as two panels, a navigational tree and a code editor. The Twig templates that you can modify or add to are listed under the navigational tree. Clicking on the name of the file opens code in the editor to the right of the screen.

Templates-Editor-Desc.png

Each template file identifies which part of your Account Dashboard will be updated with your code changes. For example, if you add code to the “dashboard-pre.twig” template, changes are displayed at the top of the main account dashboard page for both B2C and B2B customers. You can change the template’s logic using tags or personalize it using exposed objects and variables. An object groups a set of attributes (variables) associated with that object together. Currently, two objects are available to include in your code:

  • customer

  • account

The variables associated with each of these objects are listed under the Documentation tab.

Object and variable names are case sensitive.

Templates-Doc.png

More information

Set up

Contact our support team to enable this feature.

Key point

Use this feature at your own risk.

You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop.

We have included Reset and Versioning functionality to allow you to revert back to the default or previous version of your WebShop. However, we do not support any code changes you make using the Templates editor.

Any fixes that you require from Support are chargeable.

Using the Templates code editor

Open the Templates Editor using the Templates option in Management Interface. This opens the feature which allows you to extend the look and feel of your Account Dashboard.

Select the code snippet you wish to update. Use Twig, our templating language, to add logic and content to the selected template. Once you click Save, your updates are immediately visible in WebShop.

Alternatively, click Reset to reset any code snippet to its default version or click Versioning to either restore a previous version or compare versions of code snippets.

Read our detailed step by step guide to using the Templates Editor.

Use cases

Use case 1: Add a Welcome message to the top of your Account Dashboard

Use case 1

To add a personalized welcome message to your customers to the top of your Account Dashboard, add the following code to “dashboard-pre.twig” and click Save.

<h2> Welcome back, {{customer.Name}}! </h2>

Watch

Use case 2: Add a promotion to your Account Dashboard

Use case 2

To add a promotion to the top of your Account Dashboard that is visible to your B2B customers, add the following code to “dashboard-pre.twig” and click Save. This code includes a link to a specific location in your catalogue which lists your Sale Items.

{% if account.Type == 'B2B' %}

    <div style="background-color: #333333; color: #ffffff; padding: 20px; border-radius: 5px; margin-top: 20px;">

        <h2>Special Offers for B2B Customers!</h2>

        <p>Exclusive deals and discounts await you. See <a href="https://templating-demo.staging3.aphix.dev/on-sale/c-852.html">exclusive customer offers</a> just for you!</p>

        <hr/>

    </div>

{% endif %}

Watch

Use case 3: Move elements of your Account Dashboard page around

Use case 3

The Account Dashboard contains a number of different data elements relating to your customer’s account. This use case demonstrates how to move these elements around within the table.

Before changes, the Account Dashboard looks like this:

UseCase3-SwapElements-Before.png

In your updated version, you would like to

  1. Have customer code (“DEMO 3”) and customer name (“Aphix Software”) on different rows

  2. Have the customer’s contact number appear on the row before their admin email address.

UseCase3-SwapElements-After.png

To achieve this, open dashboard.twig, locate the code you wish to move / edit, make your changes and click Save.

For 1. above, find and change the following code:

From

CODE
<tr>
        <td><strong>{{ translation('customer.dashboard.name') }}</strong></td>
        <td>
            {{ (features.dashboard_show_account_code) ? (customer.Code ~ ' - ') : '' }} {{ service_call('name') }}
        </td>
    </tr>

To

CODE
    <tr>
        <td><strong>{{ translation('customer.dashboard.name') }}</strong></td>
        <td>
            {{ service_call('name') }}
        </td>
    </tr>
        <td> <strong> Account code </strong> </td>
        <td>
            {{ (features.dashboard_show_account_code) ? (customer.Code) : '' }}
        </td>
    </tr>

For 2. above, open dashboard.twig, find the class you want to move and copy and paste it the new location

From

CODE
 <tr class="account-dashboard-email">
        <td><strong>{{ translation('customer.dashboard.contactemail') }}</strong></td>
        <td colspan="3" style="word-break: break-all">{{ service_call('email') }}</td>
    </tr>  

    <tr class="account-dashboard-phone">
        <td><strong>{{ translation('customer.dashboard.contactnum') }}</strong></td>
        <td colspan="3">{{ service_call('phone') }}</td> 
         
    </tr>

To

CODE
<tr class="account-dashboard-phone">
        <td><strong>{{ translation('customer.dashboard.contactnum') }}</strong></td>
        <td colspan="3">{{ service_call('phone') }}</td> 
         
    </tr>

    <tr class="account-dashboard-email">
        <td><strong>{{ translation('customer.dashboard.contactemail') }}</strong></td>
        <td colspan="3" style="word-break: break-all">{{ service_call('email') }}</td>
    </tr>  

Watch

Use case 4: Add a YouTube video to the bottom of your Account Dashboard

Use case 4

To add a YouTube video to the bottom of your Account Dashboard that is visible to your B2B customers, add the following code to “dashboard-extra.twig” and click Save. This code includes a link to a recent Customer Webinar from Experlogix Digital Commerce.

CODE
{% if account.Type == 'B2B' %}
    <div style="background-color: #000000; color: #ffffff; padding: 20px; margin-top: 12px;">
        <p>Watch a webinar on <a href="https://www.youtube.com/watch?v=wsG3BH63EFc" target="_blank">recent updates in Experlogix Digital Commerce</a></p>
        <hr/>
    </div>
{% endif %}

Watch

Use case 5: Add a welcome message to your landing page

Use case 5

To add a personalized welcome message to your customers on your WebShop landing page, use the Twig Block in Visual Page Builder. Open Visual Page Builder, scroll down to Misc in the left panel controls to locate the Twig Block. Drag it to where you wish it to be displayed, open the Twig editor and add the following code.

<h2> Welcome back, {{customer.Name}}! </h2>

Changes are automatically saved and visible in WebShop immediately.

Watch

Related content

References

1 Introduction to Twig - the fast, fast and secure template engine for PHP

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.