Livetree Certmark Widget Angular Module

The livetree certmark (certwidget) is a pluggable widget provided by livetree.com.

This library was generated with Angular CLI version 11.0.6.

Install

The widget is provided in two forms:

• Angular library module
• Web component (please see main repo readme for details on how to install the web component)

Angular Library Module

Add to Library Project

Add the widget to the project using you nodejs package manager.

Using npm:

  npm install livetree-certwidget-angular --save

Using yarn:

  yarn add livetree-certwidget-angular

Import into Angular module

To make the widget available in your templates, import the library into the relevant Angular module. For example:

  import { LivetreeCertwidgetModule } from 'livetree-certwidget-angular';

  @NgModule({
    imports: [
      LivetreeCertwidgetModule
    ],
  })

Add to template

Add the certwidget component to your template:

  <livetree-certwidget [config]='yourCertwidgetConfig' [pg]='currentPage'></livetree-certwidget>

Usage

Configuration Attributes

The configuration attributes for the certwidget are:

| attribute | required | type | description | | - | - | - | - | | config | true | string/object | See below configuration attribute notes | | pg | true | string | URL of the page the certwidget is being displayed on | | linkurl | false | string | Brand learn more link (default: linkurl provided in config JSON) | | expandalphaout | false | boolean | Certwidget is open on load, then closes after 3 seconds (default: false) | | showfeaturedproducts | false | boolean | If set to false, featured products section will not be displayed (default: true) |

Configuration JSON

The configration for the certwidget is defined in the LivetreeCertwidgetJSONConfigSchema which is provided in the docs directory of this repository. The configuration will be validated against this schema on load.

A sample JSON config can also be found in the docs directory here

The config is passed to the component through the config attribute, and can be provided in three different forms:

• URL (string) - URL for the JSON config
• Stringified JSON Object (string) - See example in src/index.html
• JS object (object) - Bind attribute to valid config object (Angular library use only)

TypeScript Config Interface

The certwidget config property will accept any typescript object interface. However, if you wish to type the config in your code, the interface can be imported using: import { LivetreeCertwidgetJSONConfigSchema } from 'livetree-certwidget-angular';

Development

Please see the development notes for details on how to setup the development and testing environment.

License

MIT © 2021 Livetree Community Ltd