Bikefit Landing Page
Getting started
Getting started
bikeType
Sets the bike type picture in the size chooser
possible types are:
Road, Cargo, Mountain, City, Trekking
bikeName
the label of the bike in the bike size chooser
e.g. "Mondraker Superfoxy Carbon RR Gloss Racing Silver Matte Carbon UD 2021"
url
An url to an image of a bike displayed on the result page
defaultGender
Sets the default state of the gender switcher
If set to Unisex, gender switcher is hidden
possible values are:
Male, Female, Unisex
availableSizes
Sets the labels of the sizes and the inventory state
if a label is not in the list it is not shown
if the inventory hast -1 as the value the inventory state is not shown
if the label has a number of 0, a message is shown that there is nothing in the inventory ( e.g. sold out )
if the label has a number of 1, the inventory state is red
example values are:
do not show inventory state
availableSizes: [ { name: 'S', value: -1 }, { name: 'M', value: -1 }, { name: 'L', value: -1 }, { name: 'XL', value: -1 } ]show inventory state from S to XL
availableSizes: [ { name: 'S', value: 1 }, { name: 'M', value: 2 }, { name: 'L', value: 3 }, { name: 'XL', value: 0 } ]show inventory state from S1 to S4
availableSizes: [ { name: 'S1', value: 1 }, { name: 'S2', value: 2 }, { name: 'S3', value: 3 }, { name: 'S4', value: 0 } ]show inventory state with separate labels
availableSizes: [ { name: "XS",label: "XS (27,5\")",value: 1 }, {name: "S",label: "S (27,5\")"}, {name: "M",label: "M (29\")", value: 3 }, {name: "L",label: "L (29\")", value: 0 }, {name: "XL",label: "XL (29\")"} ]Make Sure that the size is available in the data sheet
availableColors
If bikes have different colors pass in an array of colors Each color may have the following properties:
id:
Used to reference the color in the availableSizes inventory array
code:
The color code used to display in the preview
name:
The name of the color
amount:
The number of bikes available in this color regardless of bike sizes
url:
A preview url with a picture showing a bike in that color
availableColors: [ { id: 'Ezxlkjghaskxdjg', code: '#FFFFFF', name: 'White', amount: 99, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '2', code: '#000000', name: 'Black', amount: 1, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '3', code: '#00b4b4', name: 'Space green', amount: 99, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '4', code: '#0000FF', name: 'Space black ', amount: 3, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '5', code: '#0942ce', name: 'Space blue', amount: 0, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '6', code: '#00FF00', name: 'Space gold', amount: -1, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"} ]availableSizes combined with availableColors
every color has an id, for every size the id can be referenced.
e.g. for size M and for color Black with the id '2' 5 bikes are available {name: "M", value: { 2: 5}}
{name: "M", value: { 2: 5}}availableSizes: [ {name: "S", value: { 1: 1, 2: 6, 3: 3, 4: 1, 5: 6, 6: 4 }}, {name: "M", value: { 1: 2, 2: 5, 3: 2, 4: 0, 5: 2, 6: 2 }}, {name: "ML", value: { 1: 3, 2: 4, 3: 1, 4: 0, 5: 4, 6: 3 }}, {name: "L", value: { 1: 4, 2: 3, 3: 3, 4: 2, 5: 6, 6: 2 }}, {name: "XL", value: { 1: 5, 2: 2, 3: 2, 4: 0, 5: 4, 6: 2 }}, {name: "XXL", value: { 1: 6, 2: 1, 3: 6, 4: 1, 5: 3, 6: 3 }} ]products
id is the EAN number
May be used instead of availableColors and availableSizes
products: [ { id: "Y", colorCode: '#000000', colorName: 'Space green', quantity: 1, sizeName: 'L', sizeLabel: 'L', url: 'https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613' }, { id: "X", colorCode: '#000000', colorName: 'Space green', quantity: 3, sizeName: 'M', sizeLabel: 'M', url: 'https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613' }]maxAmount
set maximum amount displayed at inventory states e.g. 3 --> 3+
mode
Set the working mode of the sizer
Simple mode means that only the person height is used for calculation Advanced means also the legs and arms are used
possible values are:
Simple, Advanced
display
Hide, show and disable button
None, make the button invisible
Disabled, disable the button, so clicks are ignored and the button is grayed out
Visible, show the button
onChange
Sets a callback, which passes the chosen bikeSize to the caller of the web component as well as the arm length, the person height, the inseam length the gender and the the id of the chosen color
onError
Sets a callback, which passes an error code, and an error text
Possible codes are:
404 not found
bikeGroupId
references a certain group in the google sheet ( alphanumeric )
language
set the language of the component
possible values are:
en, de
if not set browser language is used
default slider sizes
defaultPersonHeight defaultArmLength defaultFootLength
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 without colors
<bike-fit url="https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613" defaultPersonHeight="172" defaultArmLength="55" defaultFootLength="80" display="Visible" ></bike-fit> <script type="text/javascript"> let params = {}; window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, (m, key, value) => { params[key] = value; }); const component = document.querySelector('bike-fit'); component.bikeName = params['name'] || 'Trek Supercaliber 9.9 XX1 Full Suspension Mountainbike 2020'; component.bikeType = params['type'] || 'City'; component.defaultGender = params['gender'] || 'Unisex'; component.language = params['language'] || 'en'; component.bikeGroupId = params['group'] || 'Trek_Rail'; component.debug = params['debug'] || false; component.mode = params['mode'] || 'Advanced'; component.display = params['display'] || 'Visible'; component.maxAmount = params['maxAmount'] || '4'; component.availableSizes = params['availableSizes'] || [ {name: "S", value: 10}, {name: "M", value: 5}, {name: "ML", value: 0}, {name: "L", value: 5}, {name: "XL", value: 0}, {name: "XXL", value: 0}, ]; component.onChange = (productId, state) => { alert(`Your perfect bike size is: ${state.bikeSize} ${state.personHeight} ${state.armLength} ${state.inseamLength} ${state.gender} ${productId}!`) } component.onError = (errorCode, errorText) => { alert(`${errorText}, ${errorCode}`) } </script>example with colors
<bike-fit url="https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613" defaultPersonHeight="172" defaultArmLength="55" defaultFootLength="80" ></bike-fit> <script type="text/javascript"> let params = {}; window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, (m, key, value) => { params[key] = value; }); const component = document.querySelector('bike-fit'); component.bikeName = params['name'] || 'Trek Supercaliber 9.9 XX1 Full Suspension Mountainbike 2020'; component.bikeType = params['type'] || 'City'; component.defaultGender = params['gender'] || 'Unisex'; component.language = params['language'] || 'en'; component.bikeGroupId = params['group'] || 'Trek_Rail'; component.debug = params['debug'] || false; component.mode = params['mode'] || 'Advanced'; component.maxAmount = params['maxAmount'] || '4'; component.availableSizes = params['availableSizes'] || [ {name: "S", value: { 1: 1, 2: 6, 3: 3, 4: 1, 5: 6, 6: 4 }}, {name: "M", value: { 1: 2, 2: 5, 3: 2, 4: 0, 5: 2, 6: 2 }}, {name: "ML", value: { 1: 3, 2: 4, 3: 1, 4: 0, 5: 4, 6: 3 }}, {name: "L", value: { 1: 4, 2: 3, 3: 3, 4: 2, 5: 6, 6: 2 }}, {name: "XL", value: { 1: 5, 2: 2, 3: 2, 4: 0, 5: 4, 6: 2 }}, {name: "XXL", value: { 1: 6, 2: 1, 3: 6, 4: 1, 5: 3, 6: 3 }}, ]; component.availableColors = params['availableColors'] || [ { id: '1', code: '#FFFFFF', name: 'White', amount: 99, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '2', code: '#000000', name: 'Black', amount: 1, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '3', code: '#00b4b4', name: 'Space green', amount: 99, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '4', code: '#0000FF', name: 'Space black ', amount: 3, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '5', code: '#0942ce', name: 'Space blue', amount: 0, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, { id: '6', code: '#00FF00', name: 'Space gold', amount: -1, url: "https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613"}, ]; component.onChange = (productId, state) => { alert(`Your perfect bike size is: ${state.bikeSize} ${state.personHeight} ${state.armLength} ${state.inseamLength} ${state.gender} ${productId}!`); } component.onError = (errorCode, errorText) => { alert(`${errorText}, ${errorCode}`); } </script>example with products
<bike-fit url="https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613" defaultPersonHeight="172" defaultArmLength="55" defaultFootLength="80" ></bike-fit> <script type="text/javascript"> let params = {}; window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, (m, key, value) => { params[key] = value; }); const component = document.querySelector('bike-fit'); component.bikeName = params['name'] || 'Trek Supercaliber 9.9 XX1 Full Suspension Mountainbike 2020'; component.bikeType = params['type'] || 'City'; component.defaultGender = params['gender'] || 'Unisex'; component.language = params['language'] || 'en'; component.bikeGroupId = params['group'] || 'Trek_Rail'; component.debug = params['debug'] || false; component.mode = params['mode'] || 'Advanced'; component.maxAmount = params['maxAmount'] || '4'; component.products = params['products'] || [ { id: "1-47", colorCode: "#454442", colorName:"Lithium Grey", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "2-47", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "3-47", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "4-47", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "5-47", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "6-47", colorCode: "#640e12", colorName:"Rage red", quantity: 4, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "47 cm", sizeName: "47" }, { id: "1-50", colorCode: "#454442", colorName:"Lithium Grey", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "2-50", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 5, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "3-50", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "4-50", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 0, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "5-50", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "6-50", colorCode: "#640e12", colorName:"Rage red", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "50 cm", sizeName: "50" }, { id: "1-52", colorCode: "#454442", colorName:"Lithium Grey", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "2-52", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 4, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "3-52", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "4-52", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 0, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "5-52", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 4, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "6-52", colorCode: "#640e12", colorName:"Rage red", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "52 cm", sizeName: "52" }, { id: "1-54", colorCode: "#454442", colorName:"Lithium Grey", quantity: 4, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "2-54", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "3-54", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "4-54", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "5-54", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "6-54", colorCode: "#640e12", colorName:"Rage red", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "54 cm", sizeName: "54" }, { id: "1-56", colorCode: "#454442", colorName:"Lithium Grey", quantity: 5, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "2-56", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "3-56", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "4-56", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 0, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "5-56", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 4, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "6-56", colorCode: "#640e12", colorName:"Rage red", quantity: 2, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "56 cm", sizeName: "56" }, { id: "1-58", colorCode: "#454442", colorName:"Lithium Grey", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "2-58", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "3-58", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "4-58", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "5-58", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "6-58", colorCode: "#640e12", colorName:"Rage red", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "58 cm", sizeName: "58" }, { id: "1-60", colorCode: "#454442", colorName:"Lithium Grey", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "2-60", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "3-60", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "4-60", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "5-60", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "6-60", colorCode: "#640e12", colorName:"Rage red", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "60 cm", sizeName: "60" }, { id: "1-62", colorCode: "#454442", colorName:"Lithium Grey", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_slash_9.9_xo1_lithium_grey_2021.jpg", sizeLabel: "62 cm", sizeName: "62" }, { id: "2-62", colorCode: "#3c332b", colorName:"Satin Black Olive", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_satin_black_olive.jpg", sizeLabel: "62 cm", sizeName: "62" }, { id: "3-62", colorCode: "#bf7d29", colorName:"Factory Orange", quantity: 6, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_gx_lithium_grey_factory_orange.jpg", sizeLabel: "62 cm", sizeName: "62" }, { id: "4-62", colorCode: "#bf7d29", colorName:"Gloss Red / Matte Carbon Smoke ", quantity: 1, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_gloss_red_matte_carbon_smoke_2021.jpg", sizeLabel: "62 cm", sizeName: "62" }, { id: "5-62", colorCode: "#1e1e1c", colorName:"Voodoo Trek Black", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_top_fuel_9.8_gx_matte_raw_carbon_voodoo_trek_black_2021.jpg", sizeLabel: "62 cm", sizeName: "62" }, { id: "6-62", colorCode: "#640e12", colorName:"Rage red", quantity: 3, url: "https://www.e-bikes4you.com/media/catalog/product/cache/e46afbbc6d373fcd2d499317b32ad495/t/r/trek_fuel_ex_9.8_xt_raw_carbon_rage_red_2021.jpg", sizeLabel: "62 cm", sizeName: "62" } ]; component.onChange = (productId, state) => { alert(`Your perfect bike size is: ${state.bikeSize} ${state.personHeight} ${state.armLength} ${state.inseamLength} ${state.gender} ${productId}!`); } component.onError = (errorCode, errorText) => { alert(`${errorText}, ${errorCode}`); } </script>another example with products
<bike-fit url="https://images.internetstores.de/products/1089719/02/90302f/ns-bikes-soda-slope-26-copper-2.jpg?forceSize=true&forceAspectRatio=true&useTrim=true&size=613x613" defaultPersonHeight="172" defaultArmLength="55" defaultFootLength="80" ></bike-fit> <script type="text/javascript"> let params = {}; window.location.href.replace(/[?&]+([^=&]+)=([^&#]*)/gi, (m, key, value) => { params[key] = value; }); const component = document.querySelector('bike-fit'); component.bikeName = params['name'] || 'Trek Supercaliber 9.9 XX1 Full Suspension Mountainbike 2020'; component.bikeType = params['type'] || 'City'; component.defaultGender = params['gender'] || 'Unisex'; component.language = params['language'] || 'en'; component.bikeGroupId = params['group'] || 'Trek_Rail'; component.debug = params['debug'] || false; component.mode = params['mode'] || 'Advanced'; component.maxAmount = params['maxAmount'] || '4'; component.products = params['products'] || [ { "id": "66159", "quantity": 3, "url": "/e/n/entice_5.b_advance_grau_wa.jpg", "colorName": "grau", "colorCode": "#8F8F8F", "sizeName": "S / 43", "sizeLabel": "S / 43" }, { "id": "66160", "quantity": 1, "url": "/e/n/entice_5.b_advance_grau_wa_1.jpg", "colorName": "grau", "colorCode": "#8F8F8F", "sizeName": "M / 48", "sizeLabel": "M / 48" }, { "id": "66161", "quantity": 0, "url": "/e/n/entice_5.b_advance_grau_wa_5.jpg", "colorName": "grau", "colorCode": "#8F8F8F", "sizeName": "L / 53", "sizeLabel": "L / 53" }, { "id": "66162", "quantity": 0, "url": "/e/n/entice_5.b_advance_grau_wa_2.jpg", "colorName": "grau", "colorCode": "#8F8F8F", "sizeName": "XL / 58", "sizeLabel": "XL / 58" }, { "id": "66163", "quantity": 0, "url": "/e/n/entice_5.b_advance_gr_n_wa.jpg", "colorName": "grün", "colorCode": "#3F6B27", "sizeName": "S / 43", "sizeLabel": "S / 43" }, { "id": "66164", "quantity": 0, "url": "/e/n/entice_5.b_advance_gr_n_wa_1.jpg", "colorName": "grün", "colorCode": "#3F6B27", "sizeName": "M / 48", "sizeLabel": "M / 48" }, { "id": "66165", "quantity": 0, "url": "/e/n/entice_5.b_advance_gr_n_wa_5.jpg", "colorName": "grün", "colorCode": "#3F6B27", "sizeName": "L / 53", "sizeLabel": "L / 53" }, { "id": "66166", "quantity": 0, "url": "/e/n/entice_5.b_advance_gr_n_wa_2.jpg", "colorName": "grün", "colorCode": "#3F6B27", "sizeName": "XL / 58", "sizeLabel": "XL / 58" }]; component.onChange = (productId, state) => { alert(`Your perfect bike size is: ${state.bikeSize} ${state.personHeight} ${state.armLength} ${state.inseamLength} ${state.gender} ${productId}!`); } component.onError = (errorCode, errorText) => { alert(`${errorText}, ${errorCode}`); } </script>