<header>
    <div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 18">
        <path d="M21.587 0l-1.475 4.193H9.565c-.552 0-.976.111-1.274.332-.165.118-.343.34-.537.663-.03.045-.044.155-.044.332 0 .177-.008.265-.023.265a.637.637 0 0 0-.044.243c0 .443.335.664 1.005.664h8.112c.909 0 1.65.212 2.224.636.573.425.86 1.032.86 1.822 0 .417-.089.872-.268 1.364-.447 1.207-1.103 2.965-1.967 5.275-.238.67-.521 1.147-.849 1.43-.402.372-.968.559-1.698.559H0l1.497-4.194h10.526c.953 0 1.564-.332 1.832-.998.224-.574.365-.846.425-.816a.772.772 0 0 0 .022-.182c0-.469-.38-.703-1.14-.703H5.05c-.893 0-1.627-.214-2.2-.644-.574-.43-.861-1.044-.861-1.844 0-.415.081-.859.246-1.333 1.132-3.272 1.713-4.968 1.743-5.087C4.305.659 5.154 0 6.525 0h15.062M33.476 17.778l4.257-12.201c.045-.15.067-.305.067-.469 0-.61-.268-.915-.803-.915h-6.44c-.861 0-1.456.462-1.782 1.384l-4.234 12.2h-4.858L25.878 0H54.49c1.768 0 2.652.758 2.652 2.275 0 .64-.171 1.443-.513 2.41l-4.635 13.093h-4.791L51.46 5.577c.045-.15.067-.305.067-.469 0-.61-.268-.915-.802-.915h-6.44c-.862 0-1.457.462-1.783 1.384l-4.234 12.2h-4.792M77.897 3.546l-4.956 14.232H58.163c-.807 0-1.409-.268-1.806-.805-.322-.462-.484-1.042-.484-1.743 0-.477.074-.916.22-1.319l1.894-5.52c.456-1.341 1.388-2.012 2.798-2.012h11.32l.33-1.038c.044-.132.066-.257.066-.375 0-.515-.33-.772-.991-.772H59.42L60.872 0H75.76c1.556 0 2.334.788 2.334 2.364a3.5 3.5 0 0 1-.198 1.182m-7.246 7.027h-7.576c-.69 0-1.145.317-1.366.95l-.286.77a1.902 1.902 0 0 0-.088.544c0 .498.25.747.749.747h7.532l1.035-3.01M95.238 0l-1.495 4.193h-6.175c-.506 0-.955.116-1.35.346-.394.231-.643.502-.747.814l-4.417 12.425H76.19l5.355-15.19C82.155.862 83.485 0 85.538 0h9.7M96.722 0l-1.484 4.228h7.158l-4.692 13.55 4.757-.023v.023l4.692-13.55h6.94L115.557 0H96.722M129.833 6.452c.102-.148-.372 1.232-1.422 4.139h-8.77l-2.492 7.187h-4.768L118.548 0h13.515l-1.42 4.183h-8.792l-.788 2.27h8.77M134.342 0l-6.088 17.778h4.706L139.048 0h-4.706M141.167 0l-1.484 4.228h7.158l-4.692 13.55 4.757-.023v.023l4.692-13.55h6.94L160 0h-18.833"></path>
      </svg>
      <span>
        Online Sizing
      </span>
    </div>

    <nav class="links">
      <a href="https://www.onlinesizing.bike" target="_blank">Online Sizing Website</a>
      <a href="https://docs.onlinesizing.bike" target="_blank">Docs</a>
    </nav>
  </header>

  <main class="content">
    <section class="bike-image">
      <img src="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg" alt="Cinelli Veltrix" />
    </section>

    <section class="product-info">
      <p class="manufacturer">Cinelli</p>
      <h1 class="product-title">Veltrix Potenza Road Bike 2020</h1>

      <div class="product-meta">
        <p class="price">1.999,- €</p>

        <ul class="sizes">
          <li data-size="XS">XS</li>
          <li data-size="S">S</li>
          <li data-size="M">M</li>
          <li data-size="L">L</li>
          <li data-size="XL">XL</li>
        </ul>

        <div class="oz-buttons">
          <div class="oz-container" data-oz-widget="launcher" data-oz-code="8053323623809" data-oz-name="Cinelli Veltrix Potenza Road Bike 2020" data-oz-image="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg" data-oz-units="imperial" data-oz-confirm-size-label="Custom Confirm Text"></div>

          <div class="oz-container" data-oz-widget="launcher" data-oz-code="8053323623809" data-oz-name="Cinelli Veltrix Potenza Road Bike 2020" data-oz-image="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg" data-oz-language="de"></div>
        </div>

        <nav class="buy">
          <button disabled class="add-to-basket">Add to basket</button>
        </nav>
      </div>
    </section>
  </main>

  <aside class="callout">
    <p>This is a Demo Page for the Online Sizing v2 widget.</p>
    <p>Since this is a codepen, please feel free to open the editor view and change attributes on for example the "What's my size?" button.</p>
    <p>Thank you so much for testing with us – if you need anything at all please reach us at: <a href="mailto:onlinesizing@smartfit.bike">onlinesizing@smartfit.bike</a></p>
  </aside>
$breakpoint: 650px;

:root {
  --cta: #96bc33;
  --cta-darker: #749322;
  --highlight: #a4cb3e3d;
  --primary: #303538;
  --callout: #ffbf59;
}

body {
  padding: 5vw;
  font-size: 20px;
  color: var(--primary);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 5vh;

  a {
    font-size: 0.85em;
    text-decoration: none;
    border: 2px solid;
    border-radius: 0.3em;
    padding: 0.2em 0.4em;
    color: var(--cta);
  }
}

.logo {
  width: 180px;

  svg {
    fill: var(--cta);
  }

  span {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
  }
}

.content {
  display: grid;
  margin-bottom: 2vh;

  @media (min-width: $breakpoint) {
    grid-template-columns: 2fr minmax(300px, 1fr);
    gap: 5vw;
    align-items: center;
  }
}

.product-meta {
  display: grid;
  gap: 2vh;

  & > * {
    margin: 0;
  }
}

.bike-image {
  img {
    width: 100%;
    max-width: 800px;
    display: block;
  }
}

.manufacturer {
  margin: 0;
}

.product-title {
  font-size: 20px;
  margin-top: 0.25em;

  @media (min-width: $breakpoint) {
    font-size: 28px;
  }
}

.price {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: hotpink;
  font-size: 1.25rem;
}

.sizes {
  list-style: none;
  padding-left: 0;
  display: flex;

  li {
    padding: 1em;
    border: 2px solid;
    line-height: 1;
    font-size: 0.85em;
    cursor: pointer;
    border-radius: 0.5em;

    &.selected {
      color: var(--cta);
      background-color: var(--highlight);
    }

    &:not(:last-child) {
      margin-right: 0.2em;
    }
  }
}

.oz-buttons {
  font-size: 0.85rem;
}

.add-to-basket {
  width: 100%;
  max-width: 450px;
}

button {
  appearance: none;
  outline: none;
  border: none;
  background-color: var(--cta);
  color: white;
  padding: 0.75em 1em;
  line-height: 1;
  border-radius: 0.5em;
  cursor: pointer;
  border: 2px solid;
  transition: border-color 250ms ease;

  &[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  &:hover {
    border-color: var(--cta-darker);
  }
}

.callout {
  border-radius: 0.5em;
  font-size: 0.85rem;
  background-color: lightyellow;
  padding: 1em;
  border: 2px solid var(--callout);
  max-width: 650px;

  a {
    color: var(--cta);
  }

  p {
    margin-top: 0;
    margin-bottom: 0.5em;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
View Compiled
/**
 * Function to select frame size on your product page.
 * You probably have this already from Online Sizing v1.
 */
const selectSizeInShop = (payload) => {
  console.log(payload);
  const { size } = payload;
  const targetSizeElement = document.querySelector(
    `.sizes li[data-size="${size}"]`
  );

  selectSize(targetSizeElement);
};

/**
 * NEW: Global Online Sizing Config
 */
const OZ_CONFIG = {
  settings: {
    apiKey: "$oz_$7W0iJd8UhnY1gBTRWnMTLu4c2jadCAqhzPiVdXl9kKsFuP86D3rB2"
  },
  events: {
    confirmSize: {
      callback: selectSizeInShop
    }
  }
};

/**
 * NEW: Embed script
 * This takes the OZ_CONFIG variable you just declared to initialize all widgets on the page
 */
((win, doc, script, key, config, src) => {
  win["___OnlineSizing"] = key;
  win["___OnlineSizingConfig"] = config;
  const js = doc.createElement(script);
  js.id = key;
  js.src = src;
  js.async = true;
  const scripts = doc.getElementsByTagName(script);
  const lastScript = scripts[scripts.length - 1];
  lastScript.parentNode.insertBefore(js, lastScript);
})(
  window,
  document,
  "script",
  "oz",
  OZ_CONFIG,
  `https://widgets.onlinesizing.bike/loader.js`
);

/**
 * --------------------------------------------------------------------- *
 * Unrelated JS stuff for just this Demo page
 */
const sizeButtons = document.querySelectorAll(".sizes li");
const addToBasketButton = document.querySelector(".add-to-basket");

const selectSize = (el) => {
  if (el.classList.contains("selected")) {
    el.classList.remove("selected");
    addToBasketButton.disabled = true;
  } else {
    Array.from(sizeButtons).forEach((button) =>
      button.classList.remove("selected")
    );
    el.classList.add("selected");
    addToBasketButton.removeAttribute("disabled");
  }
};

Array.from(sizeButtons).forEach((button) => {
  button.addEventListener("click", () => {
    selectSize(button);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.