Getting started

onChange

Sets a callback, which passes the chosen bikeSize to the caller of the web component

onError

Sets a callback, which passes an error code, and an error text

Possible codes are:

404 not found

language

set the language of the component

possible values are:

en, de

passing parameters via js vs. as html attributes

There is actually no difference. That is just WebComponent Standard. The ja version is basically useful when you want to call the component from inside JavaScript. Whereas the html version is more useful when used in classic template / server side rendering.

Example usage

Copy
<battery-finder></battery-finder>
  <script type="text/javascript">
    let params = {};
    window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, (m, key, value) => {
      params[key] = value;
    });
    const component = document.querySelector('battery-finder');
    component.language = params['language'] || 'en';
    component.debug = params['debug'] || false;
    component.onChange = (sku) => {
        alert(`chosen sku is: ${sku}`)
    }
    component.onError = (errorCode, errorText) => {
      alert(`${errorText}, ${errorCode}`)
    }
  </script>