Template Configuration

Templates allow you to fully customize the HTML output of any page or component in the Artisio webapp. Each template is a Vue.js template string that is passed as part of the webapp configuration object.

General Usage Example

To override a template, pass the template name as a key inside the window.artisioWebAp.templates configuration object, before the Artisio CDN script is included. The value must be a valid HTML string (Vue template syntax is supported).

<div id="artisioTimedAuctions"></div>

<script>
  window.artisioWebApp = {
    clientId: "YOUR_CLIENT_ID",

    templates: {
      // Override the lot list item template
      lotListItemTemplate: `
        <div class="my-custom-lot-item">
          <lot-list-item-image :lot="lot" />
          <lot-list-item-title :lot="lot" />
          <lot-current-price :lot="lot" />
          <lot-countdown-timer :lot="lot" />
        </div>
      `,

      // Override the home page template
      homePageTemplate: `
        <h1>Welcome to our auction house</h1>
        <lot-list-items />
      `,
    }
  }
</script>

<!-- Include AFTER window.artisioWebApp is defined -->
<script src="https://cdn.artisio.co/v1.14.5/js/app.js"></script>

Each template has a fixed name (e.g. lotListItemTemplate, homePageTemplate) documented in the pages below, along with the components and data properties available inside it.

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>

Important

Components can be used both with dashed naming or with pascal case naming.
For example component BidAmounts can be used:

  1. <bid-amounts />
  2. <BidAmounts />

Full list of components

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

Last Updated:
Contributors: Zura Sekhniashvili