Templating plugin

This plugin allows you to easily theme your GuideChimp, replace the default templates with your custom templates.

Installation

Please refer to the plugins' installation and configuration Wiki page.

Note: Commercial GuideChimp plugins require a valid customer account with the assigned plan and additional configuration, which will be used to validate the availability of particular GuideChimp functions or plugins for the given customer account.

Templating engine

GuideChimp template engine has a number of features to help applying arbitrary data to your templates:

• Nested data and arbitrary Javascript ({{title}})
• Registration of event handlers (@click="next()")
• Conditional evaluation (if="condition")
• Looping (for="(step, index) in steps")
• Updates the element’s innerHTML with html attribute (html="{{title}}")
• Inserting variables containing DOM Element({{document.createElement('div')}})
• Template tag (

Nested data and arbitrary Javascript ({{currentStep.title}})

{{...}} blocks can be in attribute values and in HTML content.When used in an attribute value, the retrieved data is converted to a string before being added to the DOM. When used in element content, {{...}} blocks can return either strings or return DOM elements, in which case the DOM element will be added to the tree.

Simple use:

<div class="gc-title">{{title}}</div>

Using javascript expressions:

<div class="gc-navigation-next {{ (!nextStep || !showNavigation) ? 'gc-hidden': '' }}"></div>

Registration of event handlers (@click="next()")

You can use the @eventName attribute to listen events and run some function when they’re triggered.

<div class="gc-navigation-next"
     @click="next"></div>

The template above is equal to:

const next = ()=>{ console.log('User clicked Next') };

const el = document.createElement('div');

el.classList.add('gc-navigation-next');

el.addEventListener('click', ()=>{
  return next();
});

Sometimes you need to pass an event object, it is available in the $event variable

<div class="gc-navigation-next"
     @click="next($event)"></div>

const next = (e)=>{ console.log(e) };

Conditional evaluation (if="condition")

If an element contains an "if" attribute, then its value will be evaluated, and if the result is "false", then the entire element will be removed from the tree. This allows for simple if statements.

<div if="title"
     class="gc-title">{{ title }}</div>

You can also use elseif and else

<div>
   <div if="condition1">
     ...
   </div>
   <div elseif="condition2">
     ...
   </div>
   <div else>
     ...
   </div>
</div>

Looping (for="(step, index) in steps")

If an element contains a for attribute, then that element will be repeated in the final document once for each member of the array returned by the attribute value.

<div for="step in steps">
  {{ step.title }}
</div>

You can also specify an alias for the index or object key

<div for="(step, index) in steps"></div>

Updates the element’s innerHTML with html attribute (html="{{title}}")

The html attribute inserts its value into the innerHTML

const title= '<div>Lorem ipsum</div>'

<div html="{{ title }}"></div>

It will be rendered to

<div>
  <div>Lorem ipsum</div>
</div>

Inserting variables containing DOM Element ({{document.createElement('div')}})

You can insert Dom element and NodeList

const el = document.createElement('div');
el.classList.add('gc-title');
el.innerHTML = 'Lorem ipsum'
el.addEventListener('click', (e) => {
   console.log(e);
});

<!--template-->
<div>{{ el }}</div>

It will be rendered to

<div>
  <div class="gc-title">Lorem ipsum</div>
</div>

Template tag (<template>)

Sometimes you need to use if or for attributes, but you don't want to display their html el, in which case you can use the <template> tag that won't display.

<!--template-->
<div>
   <template if="title">
      {{ title }}
   </template>

   <template else>
      no title
   </template>
</div>

In case title is false, it will be rendered to

<div>
    no title
</div>

Templates

The plugin allows you to modify the following templates:

• tooltip - is a container for other templates
• preloader - preloader template that occurs when waiting for asynchronous events
• close - tour closing element template
• progressbar - progressbar template
• title - step title template
• description - step description template
• customButtons - template for displaying custom buttons
• pagination - pagination template
• previous - previous arrow template
• next - next arrow template

Default data

The following data is passed to each template above by default:

• previousStep - definition of the previous step or null in case of the first step
• currentStep - definition of the current step
• nextStep - definition of the next step or null in case of the last step
• fromStep - defenition of the step from which the transition to the current step was made or null in case the tour has just started
• toStep - defenition of the step to which the transition, in most cases is equal to currentStep
• previousStepIndex - the index of the previous step in the array of steps
• currentStepIndex - the index of the current step in the array of steps
• nextStepIndex - the index of the next step in the array of steps
• fromStepIndex - the index of the step from which the transition to the current step was made in the array of steps
• toStepIndex - the index of the step to which the transition in the array of steps
• steps - array of steps
• go - method to go to a specific step number
• previous- method to go to the previous step
• next - method to go to the next step
• stop - method to stop the tour