Template Configuration

Global filters available in every template

asCurrency

Formats the given amount into the given currency.

Parameters

  • amount - The amount that needs to be formatted.
  • currency - The currency code in which the amount needs to be formatted
<!--Example -->
{{ 123456789 | asCurrency('USD') }}
{{ 123456789.12345 | asCurrency('EUR') }}

<!--Outputs-->
$123,456,789
€123,456,789.12345

currentLocale

This filter is necessary if you have to render translatable content. It renders content into current language.

Example

{{ ({ en: 'English Content', de: 'German Content' }) | currentLocale }}

Outputs "English Content" if lang is set to en and "German Content" if lang is set to de.

Using filters

date

Formats the given date into preconfigured dateFormat.

<!--Example-->
{{ new Date() | date }}

<!--Outputs-->
22 Nov 2023

datetime

Formats the given date into preconfigured datetimeFormat.

<!--Example-->
{{ new Date() | datetime }}

<!--Outputs-->
22 Nov 2023 14:25

datetimeWithSeconds

Formats the given date into preconfigured datetimeFormatWithSeconds.

<!--Example-->
{{ new Date() | datetimeWithSeconds }}

<!--Outputs-->
22 Nov 2023 14:40:26

stripTags

Removes HTML tags from the content.

Let's say you have a variable myHTMLContent="<p>Some text with <b>tags</b></p>" and you want to remove tags from that.

{{ myHTMLContent | stripTags }}

<!--Outputs-->
Some text with tags

time

Formats the given date into preconfigured timeFormat.

<!--Example-->
{{ new Date() | time }}

<!--Outputs-->
14:40

timeWithSeconds

Formats the given date into preconfigured timeWithSecondsFormat.

<!--Example-->
{{ new Date() | timeWithSeconds }}

<!--Outputs-->
14:40:34

truncate

Truncates the given string with the number of provided characters and show 3 dots at the end.

Parameters

  • num - The number of characters the text should be truncated.
<!--Example-->
{{ ("lorem ipsum") | truncate(4) }}

<!--Outputs-->
lore...

ucFirst

Converts the first character of the given string into uppercase.

<!--Example-->
{{ 'lorem ipsum' | ucFirst }}


<!--Outputs-->
Lorem ipsum

Global properties available in every template

is_authorized

  • Type: boolean

This property can be used to detect if customer is authenticated on the website or not.
Because every template is Vue.js template you can use this property inside v-if.

Example - Display custom HTML when user is not logged in

<div v-if="is_authorized">
  You are logged in.
</div>
<div v-else>
  You are not logged in, please login.
</div>

mainConfig

This is the main configuration object merged to default properties. From here you can access what configuration options are set.

Example

<div v-if="mainConfig.lang === 'en'">
  Current Language is English
</div>

Render Translatable content

Adding custom JavaScript

If you want to write custom JavaScript on HTML elements provided in the templates, there are two possible options for that.

Option 1 - Global JavaScript function.

<script>
    function myGlobalCustomHandler() {
      console.log('Custom Handler triggered')
    }
</script>

<button onclick="myGlobalCustomHandler()">My Custom Button</button>

<!--If you are going to have multiple custom handlers, it's recommended to define a namespace object for these handlers.-->
<script>
  var myGlobalHandlers = {
    onButton1Click() {
      console.log('button 1 clicked')
    },
    onButton2Click() {
      console.log('button 2 clicked')
    }
  }
</script>
<button onclick="myGlobalHandlers.onButton1Click()">My Custom Button 1</button>
<button onclick="myGlobalHandlers.onButton2Click()">My Custom Button 2</button>

Option 2 - Listen on body click

<!--Give custom CSS class to your element-->
<button class="my-custom-button">My Custom Button</button>
<script>
  // Listen click on body and check if the target is your element
  document.querySelector('body').addEventListener('click', function(event) {
    if (event.target.classList.contains('my-custom-button')) {
      console.log('Clicked')
    }
  });
</script>

Full list of components

Here you will find list of all available configurable templates in Artisio Webapp.

Last Updated:
Contributors: Zura Sekhniashvili