Bring your own template

Not happy with a default template provided with the LiSA Library? — No worries, bring your own template! As long as you're familiar with Handlebars.js.

Required markup / CSS selectors

When implementing a custom template, LISA Library gives you all the freedom you need to create the perfect library experience for your storefront or website. Yet there are a few markup elements and CSS selectors required:

Launch show Call to Action

While initializing the library using its default or your custom template, LiSA Library searches for elements decorated with the class name lisa__show-cta-play. It will attach an event listener to that element, in order to launch a show upon a click or touch event.

Show class name and identifier data attribute

In order to launch a show in response to a click or touch event on the launch call to action (CTA) element, LiSA needs to find the respective show's identifier. To find the show id LiSA traveses the CTA's ancestor nodes of the DOM tree until it finds an element, that has the class name lisa__show assigned to it — typically, this is the show's container element. This element also requires a data-attribute data-lisa-show-id, which stores the show's id.

Custom helpers

#eq

Block helper that renders a block if a is equal to b. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare="" hash argument for the second value.

Params

a {String}

b {String}

options {Object} — Handlebars provided options

object returns {String} — Block, or inverse block if specified and falsy.

#neq

Block helper that renders a block if a is not equal to b. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare="" hash argument for the second value.

Params

a {String}

b {String}

options {Object} — Handlebars provided options object

returns {String} — Block, or inverse block if specified and falsy.