<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://products.scott-sports.com/280761/2000/280761.jpg" alt="Scott Axis eRIDE 10" />
</section>
<section class="product-info">
<p class="manufacturer">Scott</p>
<h1 class="product-title">Axis eRIDE 10</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="7615523134243" data-oz-name="Scott Axis eRIDE 10" data-oz-image="https://products.scott-sports.com/280761/2000/280761.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="7615523134243" data-oz-name="Scott Axis eRIDE 10" data-oz-image="https://products.scott-sports.com/280761/2000/280761.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;
}
}
}
/**
* 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.