castrol-oil-search

Usage

<FindTheRightOil country="xxx" />

API

• country - the selected country (required)
• i18n - for internationalization (optional, default to en)
• baseAPI - optional base api url (default to production url)
• onVehicleSelect - function that trigger by clicking the vehicle item(optional)
• onProductSelect -function that trigger by clicking the product item(optional)
• locales for the text of other language except

Data format of vehicles & products & locales

vehicles:

[{
    "ID": 1, \n
    "manufacturer": "Audi",
    "model": "A3",
    "description": "A3 1.4 Sportback e-tron Premium (CXUA,0DD) (A3 Sportback)",
    "modelYears": "2000-2002",
    "engineSize": "1.4L",
    "fuelType": "Gasoline",
    "vehicleType": "Cars",
    "country": "us"
}]

products:

 [{ 
    "id": 1,
    "name": "CASTROL MAGNATEC 5W-30 DX",
}]

locales:

[{
    "textId": 78,
    "text": {
        "id": 78,
        "englishDefault": "Access Minerva"
    },
    "replacement": "Access Minerva G"
}]

Use as Web Component

• npm run bundle and check build directory
• In your HTML file, add reference to the output js and css bundle

  <script defer="defer" src="/static/js/main.xxxxxxxx.js"></script>
  <link href="/static/css/main.xxxxxxxx.css" rel="stylesheet" />

• In you HTML file, use the component as web component

  <find-oil-component country="DNK" i18n="DEU" locales="XXXX"></find-oil-component>

Use JSON.stringify to make the locales format to string.