Global Configuration Options

note

Work in progress: Config options might change/update quickly. Please expect changes until we're out of the testing phase.

This page describes all the config options that are set once for Online Sizing to work on your site. The config is a plain JavaScript object and looks like this::

<script>
const OZ_CONFIG = {
settings: {
// config options here
},
};
</script>

This object is then loaded by every widget. Options you set here can be overridden by local options you set directly on the widget.

API Key – required

settings: {
apiKey: 'YOUR_API_KEY_HERE',
// more global config options …
}

Obtain the API_KEY from the admin.smartfit.bike adminstration platform.

Language

Set the language for all the widgets on your site. Currently supported languages are:

  • English: en (default)
  • German: de
  • Japanese: ja
settings: {
language: "de", // if `language` config option is not set, the widget will load English as default language
// more global config options …
}

Colors

To align Online Sizing with your brand perfectly you currently have the following color variables at your disposal:

Color Options

The color values can be any format accepted by normal CSS: #ffd868, rgb(150, 186, 50), hsl(187, 74%, 70%), …

This is what your config might look like:

settings: {
primary: '#ffd868',
cta: 'rgb(150, 186, 50)',
text: 'darkblue',
background: rgb(0, 0, 0, 0.1),
// more global config options …
}

Style/Decoration

It's also possible to adjust the overall roundness of the widget. The default roundness/corner radius is based on 8px.

To override this add the following option to your settings:

settings: {
roundness: '2px', // takes any valid CSS value: px, em, etc …
// more global config options …
}

Measurement Units

You can easily define if Online Sizing shows metric or imperial units. Metric units are the default setting.

To enable imperial units, add this to your config:

settings: {
units: "imperial",
// more global config options …
}
note

Work in progress: We're still working on the following improvements: Unit toggling in widget itself, Entering body height in feet/inch format.

Frame Size Display Format

By default, Online Sizing displays the results in format defined by the Manufacturer. So for example: L, 48cm, etc …

You also have the option to always display results in numerical format (i.e. 48cm). If for some reason, we don't yet have the numerical size in our database, the result will show in manufacturer format as a fallback.

To enable numerical display of result, add this to your config:

settings: {
frameSizeDisplay: "numerical",
// more global config options …
}

Events/Callbacks

To connect actions which you'd like to happen in your shop to events in Online Sizing, we provide the events: {} config object.

Confirm Size Callback

Use case:

I want to automatically select the suggested frame size on my product page, when my customer clicks "select size" in the Online Sizing widget.

We got that example covered in our CodePen example as well. Here how you would configure that:

const myVariantSelectionFunction = (payload) => {
const { code, id, size, type } = payload;
// do something with that information
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
confirmSize: {
callback: myVariantSelectionFunction, // don't add parentheses here, otherwise the funtion will execute immediately instead of waiting for invocation
},
},
};

The payload passed to your function looks like this:

Object {
code: "8053323623816",
id: "oz-trigger-1", // this is the ID of the widget that triggered this callback. Useful if you have more than one widget on a page
size: "L",
type: 1
}

Check available stock in shop

Use case:

I would like to check my own stock of the suggested frame size before displaying the result to the customer. If the size is out of stock and direct the customer to alternative products.

If your function returns false for the suggested size, the result screen of the widget will show a different button reading Show Alternatives. For this button to work, you need to provide another callback function confirmSizeUnavailable which decides what should happen in this scenario. You could – like in the example below – navigate to a category page in your shop, which shows other bikes in the same category.

const myCheckStockFunction = (result) => {
const { code, size, type } = result;
let sizeAvailable = false;
// check your stock …
// … and return `true` or `false`
return sizeAvailable;
};
const myShowAlternatives = (result) => {
// you get the same payload as in the checkIsAvailable callback,
// if you need that to construct your category filter url – for example.
const { code, size, type } = result;
return (window.location = "https://yourshop.com/?filter=mountainbikes");
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
checkIsAvailable: {
callback: myCheckStockFunction,
},
confirmSizeUnavailable: {
callback: myShowAlternatives,
},
},
};

Check if product code is in Smartfit Database

We have two callbacks available to handle scenarios around the fact a product code is available in our database or not.

note

You only need this if you are not using the ready made button widget, because that has the code check aleady integrated.

Of course if you would like to do something addtional to just showing "sizing unavailable" on the button, you may of course use this config option.

Sizing Available

Use case:

I'm using my own custom button element, which is hidden on page load and I would like to show that the user if sizing is available for this product code.

Consider this example for that use case:

const showMyButton = (data) => {
// the payload will contain the product code if you need that for something
// and the id of the trigger element/your button (if you configured an id…)
const { code, id } = data;
const myButton = document.getElementById(id);
// remove the hidden class to show the button
myButton.classList.remove("hidden");
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
sizingAvailable: {
callback: showMyButton,
},
},
};

Sizing NOT available

Use case:

I would like to trigger a custom interaction when sizing is not available. For example: show a sizing chart instead if the sizing button.

Consider this example for that use case:

const showSizingChart = (data) => {
// the payload will contain the product code if you need that for something
// and the id of the trigger element/your button (if you configured an id…)
const { code, id } = data;
const myButton = document.getElementById(id);
const mySizingChart = document.getElementById("my-sizing-chart"))
// hide the sizing button
myButton.classList.add("hidden");
// show the sizing chart
mySizingChart.classList.remove("hidden");
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
sizingUnavailable: {
callback: showSizingChart,
},
},
};