Bikefit Landing Page

Release Notes

Release Notes

v21

  • better handling when airtable data is corrupted

224

v20

  • Support for data mismatch between Airtable and Magento

213

v19

  • New size selection model ( needs now one click more ) Added border to color display from color chooser Removed red batch from color chooser Improved name to label mapping between component and

v18

  • Complete redesign

v17

  • Data comes now from s3 storage via Airtable sync

v16

  • disable click when inventory is empty for size and color combination

v15

  • better sentry error filters

  • slightly different UI so that first input box in slider has focus and the input box is now white

v14

  • fixed Magento issues

  • products now also work for without colors

v13

  • bugfixes

168 166

  • changed callback signature
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}`);
    }
  • add products with id instead of availableSizes and availableColors
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'
    }
]

v12

  • new docs here
  • labels for size chooser
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\")"}
    ]

v11

v10

color chooser

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"}
    ]
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 }}
    ]

v9

set maximum amount displayed at inventory states e.g. 3 --> 3+

v8

  • Support for empty arm and inseam length in the google sheet
  • New Mixed Mode
  • Modal does not not close anymore when clicking outside on the overlay

28.08.2021

V7

21.07.2021

  • Support for XXS and XS
  • Support for inventory states ( sold out, only one left etc. ...)
  • Support for custom labels
  • Tracker support with hotjar
  • Bugfix for bike names in result view
  • Pass gender and sizes in result callback

v6

Escape bike names

V5

08.07.2021

Default bike groups, so that if a bike group is not defined in the google sheet, the bike group "DEFAULT" is used

Webcomponent

Classic   download

Static   download

V4

05.07.2021

  • Unisex support ( hide gender chooser and use a gender neutral image for the biker )
  • Simple mode ( in simple mode only person height is used for bike size calculation )
  • Wording and spelling corrections
  • Better support for mobile devices ( responsiveness )
  • Static builds for Magento Support
Webcomponent

Classic   download

Static   download

V3

V2

V1

Edit this page on GitLab

Prev

Introduction

Next

Getting started