progress-bar

Component displaying a progress bar that show in which step of the checkout out flow the customer are at.

Progress Bar

Screenshots

The Progress bar UI

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://nonprod.cloud.tui.com/osp/ao/ui/progress-bar/current/progress-bar.esm.js" defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.

<tui-progress-bar
	locale="VALUE"
	step-one-url="VALUE"
	step-three-url="VALUE"
	step-two-url="VALUE">
</tui-progress-bar>

Examples

• Basic example

  <tui-progress-bar
  	locale="sv-SE"
  	current-step="0"
  	step-one-url="/bestill-hotell/hotel-bcl-levante-club-and-spa-only-adults-a2975231/"
  	step-two-url="/bestill-hotell/checkout/"
  	step-three-url="/bestill-hotell/payment/">
  </tui-progress-bar>

Attributes

This microfrontend accepts the following attributes: