Welcome

Step 1Sign up for an Account

If you have not already done so, head over to the signup and register for an Online Sizing account.

Step 2Add config to your product detail page

For Online Sizing to work it needs a bit of information on the product and your Online Sizing credentials.

Place the following snippet into the `html` of your product detail page template:

<!-- smartfit OnlineSizer config -->
<script>
var onlineSizer = {
  bikeName: "Current Product Title/Bike Name",
  bikeImageUrl: "https://URL-TO-PRODUCT-IMAGE",
  code: "PRODUCT-CODE",
  widgetUrl: "https://[YOUR_ID].onlinesizer.de/xhr-onlinesizer.en.html",
  api: {
    username: "[YOUR_USERNAME]",
    password: "[YOUR_PASSWORD]"
  }
};
</script>

<!-- This is the element which will be populated with the onlineSizer HTML markup -->
<div class="smartfit-onlinesizing" id="onlinesizer-target"></div>

<!-- This is the button to show the onlineSizer after successful initialization -->
<button id="trigger-onlineSizer">Find your size</button>

Step 3Load Javascript

Now that your have the configuration in place, Online Sizing can be initialized.

Online Sizing relies on jQuery to work. If your platform already includes jQuery already: Great!

If not, please make sure to include it before the Online Sizing script:

<!-- Load jQuery before onlinesizer.js -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Please make sure your jQuery version is 3.2.1 or above.

After jQuery has loaded we can kick off Online Sizing by loading onlinesizer.js:

<!-- After jQuery loaded, add the onlinesizer.js script -->
<script src="https://[YOUR-ID].onlinesizer.de/assets/js/onlinesizer.js"></script>

Done!Try it out

Now, when you load your product detail page and click on "Find your size", you should see your beautiful new Online Sizing popup in front of you.

Another good way to see that Online Sizing is loading properly is to open the JavaScript Console in your fanvorite browser. If you see a message like Smartfit OnlineSizer Version: 1.x.x you're good to go.

Going further

Now that you have your basic Online Sizing config up and running, you might want to integrate Online Sizing a little more into your shop.

The first thing most customers want to do for better UX, is to select the recommended bike size after closing the Online Sizing popup.

Right when the result screen is shown to the user, the calculated bike size is available to you in JavaScript like so:

console.log(onlineSizer.result);

That should show you something like this:

{
  code: "601479917549",
  ean: "601479917549",
  size: "54"
}

You can use that result object in a custom callback function, which will be triggered when the user clicks the finish button, like so:

<script>
  // Custom Callback Function
  // make sure this function is defined before the config
  function selectBike() {
    console.log(onlineSizer.result);

    // implement your shop's API to select a product variant here.
  }

  // Online Sizing Config
  var onlineSizer = {
    […],
    finish: {
      action: selectBike
    },
  };
</script>

Now when you click the finish button on the result screen, you should see the result in the JavaScript console.