<div class="product-detail product-detail--default js-product-detail">
<div class="product-detail__carousel-wrapper">
<ul class="product-detail__carousel js-product-detail-carousel">
<li class="product-detail__carousel-item">
<img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="front" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=420 420w"
src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=900" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&wid=900"
data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&wid=900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=900" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=900"
data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=900" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=900"
data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=900">
</li>
<li class="product-detail__carousel-item">
<img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="angle" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=420 420w"
src="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&wid=900"
data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&wid=900" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&wid=900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=900"
data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=900" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&wid=900"
data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&wid=900" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&wid=900">
</li>
<li class="product-detail__carousel-item">
<img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="side" srcset="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=420 420w"
src="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&wid=900" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&wid=900"
data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&wid=900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=900" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=900"
data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&wid=900" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&wid=900"
data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&wid=900">
</li>
<li class="product-detail__carousel-item">
<div class="product-detail__carousel-video-outer">
<div class="product-detail__carousel-video-inner">
<div class="js-slide-video" data-video-id="ovvgXEYnY04"></div>
</div>
</div>
</li>
</ul>
<div class="product-detail__carousel-controls js-product-detail-carousel-controls">
<button class="product-detail__carousel-control product-detail__carousel-control--prev">
<span class="u-visually-hidden">Previous</span>
</button>
<button class="product-detail__carousel-control product-detail__carousel-control--next">
<span class="u-visually-hidden">Next</span>
</button>
</div>
</div>
<div class="product-detail__carousel-nav js-product-detail-carousel-nav">
<button class="product-detail__carousel-nav-item">
<span class="u-visually-hidden">0</span>
</button>
<button class="product-detail__carousel-nav-item">
<span class="u-visually-hidden">1</span>
</button>
<button class="product-detail__carousel-nav-item">
<span class="u-visually-hidden">2</span>
</button>
<button class="product-detail__carousel-nav-item">
<span class="u-visually-hidden">3</span>
</button>
</div>
<div class="product-detail__variant-wrapper js-product-detail-variant-wrapper">
<h3 class="product-detail__variant-label js-product-detail-variant-label" data-current-name="Gloss Black">Gloss Black</h3>
<ul class="product-detail__variants js-product-detail-variants js-product-detail-variants--active">
<li class="product-detail__variant js-product-detail-variant js-product-detail-variant--active" data-id="202-02" data-name="Gloss Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&wid=140" alt="Gloss Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="B202-2M" data-name="Matte Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&wid=140" alt="Matte Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="H202-10" data-name="Dark Tortoise">
<button class="product-detail__variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&wid=140" alt="Dark Tortoise">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="H202-2M" data-name="Matte Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=140" alt="Matte Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="H202-70" data-name="Redfish">
<button class="product-detail__variant-button" style="background-color:#7d4a07;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=140" alt="Redfish">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="HT202-71" data-name="MahiMahi">
<button class="product-detail__variant-button" style="background-color:#218b16;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=140" alt="MahiMahi">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="H202-2M-2" data-name="Matte Black">
<button class="product-detail__variant-button" style="background-color:#000;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&wid=140" alt="Matte Black">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="H202-70-2" data-name="Redfish">
<button class="product-detail__variant-button" style="background-color:#7d4a07;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&wid=140" alt="Redfish">
</button>
</li>
<li class="product-detail__variant js-product-detail-variant" data-id="HT202-71-2" data-name="MahiMahi">
<button class="product-detail__variant-button" style="background-color:#218b16;">
<img class="product-detail__variant-image" src="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&wid=140" alt="MahiMahi">
</button>
</li>
</ul>
</div>
</div>
<div class="product-detail product-detail--{{_self.name}} js-product-detail{{#if excludeVariants}}{{#if active}} js-product-detail-variant--active{{/if}}{{/if}}"{{#if id}} data-id="{{id}}"{{/if}}{{#if skuForm}} data-sku-form="{{skuForm}}"{{/if}}>
<div class="product-detail__carousel-wrapper">
<ul class="product-detail__carousel js-product-detail-carousel">
{{#each images}}
{{#unless video}}
<li class="product-detail__carousel-item">
<img class="product-detail__carousel-image js-product-detail-carousel-image" data-angle="{{angleId}}"
{{#each angleImages}}
{{#if active}}
srcset="{{productImage src 900}} 900w, {{productImage src 768}} 768w, {{productImage src 420}} 420w"
src="{{productImage src 900}}"
sizes="100vw, (min-width: 920px) 900px"
{{/if}}
data-{{id}}="{{productImage src 900}}"
{{/each}}>
</li>
{{else}}
<li class="product-detail__carousel-item">
<div class="product-detail__carousel-video-outer">
<div class="product-detail__carousel-video-inner">
<div class="js-slide-video"{{#if youtubeId}} data-video-id="{{youtubeId}}"{{/if}}></div>
</div>
</div>
</li>
{{/unless}}
{{/each}}
</ul>
{{#if (multiple images)}}
<div class="product-detail__carousel-controls js-product-detail-carousel-controls">
<button class="product-detail__carousel-control product-detail__carousel-control--prev">
<span class="u-visually-hidden">Previous</span>
</button>
<button class="product-detail__carousel-control product-detail__carousel-control--next">
<span class="u-visually-hidden">Next</span>
</button>
</div>
{{/if}}
</div>
{{#if (multiple images)}}
<div class="product-detail__carousel-nav js-product-detail-carousel-nav">
{{#each images}}
<button class="product-detail__carousel-nav-item">
<span class="u-visually-hidden">{{@key}}</span>
</button>
{{/each}}
</div>
{{/if}}
{{#unless excludeVariants}}
<div class="product-detail__variant-wrapper js-product-detail-variant-wrapper">
{{#each variants}}
{{#if active}}
<h3 class="product-detail__variant-label js-product-detail-variant-label" data-current-name="{{name}}">{{name}}</h3>
{{/if}}
{{/each}}
{{#each magnifications}}
<ul class="product-detail__variants js-product-detail-variants{{#if active}} js-product-detail-variants--active{{/if}}"{{#if magnification}} data-magnification="{{magnification}}"{{/if}}>
{{#each ../variants}}
<li class="product-detail__variant js-product-detail-variant{{#if ../active}}{{#if active}} js-product-detail-variant--active{{/if}}{{/if}}" data-id="{{id}}" data-name="{{name}}">
<button class="product-detail__variant-button" style="{{#if color}}background-color:{{color}};{{/if}}{{#if swatchImage}}background-image:url({{swatchImage}});{{/if}}">
{{#if ../../showSwatch}}
<img class="product-detail__variant-image" src="{{swatch}}" alt="{{name}}">
{{/if}}
{{#unless ../../excludeVariantImages}}
<img class="product-detail__variant-image" src="{{productImage images.front 140}}" alt="{{name}}">
{{/unless}}
</button>
</li>
{{/each}}
</ul>
{{/each}}
</div>
{{/unless}}
</div>
{
"pageCss": [
"products"
],
"images": [
{
"angleId": "front",
"angleImages": [
{
"id": "202-02",
"src": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
"active": true
},
{
"id": "B202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
"active": null
},
{
"id": "H202-10",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
"active": null
},
{
"id": "H202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
"active": null
},
{
"id": "H202-70",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
"active": null
},
{
"id": "HT202-71",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
"active": null
},
{
"id": "H202-2M-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
"active": null
},
{
"id": "H202-70-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
"active": null
},
{
"id": "HT202-71-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
"active": null
}
],
"video": null
},
{
"angleId": "angle",
"angleImages": [
{
"id": "202-02",
"src": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
"active": true
},
{
"id": "B202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
"active": null
},
{
"id": "H202-10",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
"active": null
},
{
"id": "H202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
"active": null
},
{
"id": "H202-70",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
"active": null
},
{
"id": "HT202-71",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
"active": null
},
{
"id": "H202-2M-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
"active": null
},
{
"id": "H202-70-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
"active": null
},
{
"id": "HT202-71-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
"active": null
}
],
"video": null
},
{
"angleId": "side",
"angleImages": [
{
"id": "202-02",
"src": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$",
"active": true
},
{
"id": "B202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$",
"active": null
},
{
"id": "H202-10",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$",
"active": null
},
{
"id": "H202-2M",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$",
"active": null
},
{
"id": "H202-70",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$",
"active": null
},
{
"id": "HT202-71",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$",
"active": null
},
{
"id": "H202-2M-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$",
"active": null
},
{
"id": "H202-70-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$",
"active": null
},
{
"id": "HT202-71-2",
"src": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$",
"active": null
}
],
"video": null
},
{
"youtubeId": "ovvgXEYnY04",
"video": true
}
],
"variants": [
{
"id": "202-02",
"name": "Gloss Black",
"color": "#000",
"orderMonth": "12",
"orderYear": "2017",
"locationCategory": "Online Retailer",
"purchaseLocation": "Dicks.com",
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": true,
"price": "$149.00",
"salePrice": "$229.00",
"url": "#202-02",
"status": null,
"stock": "In Stock",
"lens": "Neutral Grey",
"lensId": "neutralgrey",
"lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "202-02",
"inactive": null,
"material": "superthin"
}
},
{
"id": "B202-2M",
"name": "Matte Black",
"color": "#000",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$189.00",
"salePrice": "$219.00",
"url": "#B202-2M",
"status": null,
"stock": "In Stock",
"lens": "Blue Hawaii",
"lensId": "bluehawaii",
"lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "B202-2M",
"inactive": true,
"material": "superthin"
}
},
{
"id": "H202-10",
"name": "Dark Tortoise",
"color": "#303032",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#H202-10",
"status": "New",
"stock": "In Stock",
"lens": "HCL® Bronze",
"lensId": "hclbronze",
"lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "H202-10",
"inactive": true,
"material": "superthin"
}
},
{
"id": "H202-2M",
"name": "Matte Black",
"color": "#000",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#H202-2M",
"status": "New",
"stock": "In Stock",
"lens": "HCL® Bronze",
"lensId": "hclbronze",
"lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "H202-2M",
"inactive": true,
"material": "superthin"
}
},
{
"id": "H202-70",
"name": "Redfish",
"color": "#7d4a07",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#H202-70",
"status": null,
"stock": "In Stock",
"lens": "HCL® Bronze",
"lensId": "hclbronze",
"lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "H202-70",
"inactive": true,
"material": "superthin"
}
},
{
"id": "HT202-71",
"name": "MahiMahi",
"color": "#218b16",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#HT202-71",
"status": null,
"stock": "In Stock",
"lens": "Maui HT™",
"lensId": "mauiht",
"lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
"lensMaterial": "MauiPure",
"lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
"lensDetailData": {
"product": "HT202-71",
"inactive": true,
"material": "mauipure"
}
},
{
"id": "H202-2M-2",
"name": "Matte Black",
"color": "#000",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#H202-2M-2",
"status": null,
"stock": "Out of Stock",
"lens": "HCL® Bronze",
"lensId": "hclbronze",
"lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "H202-2M-2",
"inactive": true,
"material": "superthin"
}
},
{
"id": "H202-70-2",
"name": "Redfish",
"color": "#7d4a07",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#H202-70-2",
"status": null,
"stock": "In Stock",
"lens": "HCL® Bronze",
"lensId": "hclbronze",
"lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
"lensMaterial": "SuperThin Glass",
"lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
"lensDetailData": {
"product": "H202-70-2",
"inactive": true,
"material": "superthin"
}
},
{
"id": "HT202-71-2",
"name": "MahiMahi",
"color": "#218b16",
"orderMonth": null,
"orderYear": null,
"locationCategory": null,
"purchaseLocation": null,
"images": {
"front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
"angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
"side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
},
"swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
"swatchImage": null,
"active": null,
"price": "$229.00",
"salePrice": null,
"url": "#HT202-71-2",
"status": null,
"stock": "In Stock",
"lens": "Maui HT™",
"lensId": "mauiht",
"lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
"lensMaterial": "MauiPure",
"lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
"lensDetailData": {
"product": "HT202-71-2",
"inactive": true,
"material": "mauipure"
}
}
],
"magnifications": [
{
"active": true
}
]
}
(function (window) {
'use strict';
const activeVariantsClass = 'js-product-detail-variants--active';
const activeVariantClass = 'js-product-detail-variant--active';
let angleCarouselWrapper = null;
let variantWrapper = null;
let variantLabel = null;
function initAngleCarousel(carousel) {
return imagesLoaded(carousel, function () {
const initializedCarousel = tns({
container: carousel,
controlsContainer: carousel.parentNode.querySelector('.js-product-detail-carousel-controls'),
navContainer: carousel.closest('.js-product-detail').querySelector('.js-product-detail-carousel-nav'),
loop: false
});
if (initializedCarousel) {
initializedCarousel.events.on('transitionStart', handleCarouselTransition);
}
});
}
function handleCarouselTransition(info) {
const video = info.slideItems[info.index].querySelector('.js-slide-video');
if (video) {
if (video.tagName == 'IFRAME') {
player.playVideo();
} else {
createCarouselSlideVideo(video);
}
} else {
if (typeof player !== 'undefined') {
player.pauseVideo();
}
}
}
function createCarouselSlideVideo(video) {
const youtubeScriptId = 'youtube-api';
const youtubeScript = document.getElementById(youtubeScriptId);
const videoId = video.getAttribute('data-video-id');
if (youtubeScript === null) {
const tag = document.createElement('script');
const firstScript = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';
tag.id = youtubeScriptId;
firstScript.parentNode.insertBefore(tag, firstScript);
}
window.onYouTubeIframeAPIReady = function() {
window.player = new window.YT.Player(video, {
videoId: videoId,
playerVars: {
autoplay: 1,
modestbranding: 1,
rel: 0
}
});
}
}
function switchVariant(e) {
const variant = e.target.closest('.js-product-detail-variant');
if (!variant.classList.contains(activeVariantClass)) {
const variants = variantWrapper.querySelectorAll('.js-product-detail-variant');
const carouselImages = angleCarouselWrapper.querySelectorAll('.js-product-detail-carousel-image');
const newVariantName = variant.getAttribute('data-name');
const newVariantId = variant.getAttribute('data-id');
const productInformation = document.querySelectorAll(`[data-product-id]`);
const variantInformation = document.querySelectorAll(`[data-product-id="${newVariantId}"]`);
// Update the variant that gets the active class.
for (let i = 0; i < variants.length; i++) {
variants[i].classList.remove(activeVariantClass);
}
variant.classList.add(activeVariantClass);
// Update the carousel images to show the new variant.
for (let i = 0; i < carouselImages.length; i++) {
const newVariantImage = carouselImages[i].getAttribute('data-' + newVariantId);
carouselImages[i].setAttribute('src', newVariantImage);
carouselImages[i].setAttribute('srcset', newVariantImage + ' 900w, ' + newVariantImage.slice(0, -3).concat('768') + ' 768w, ' + newVariantImage.slice(0, -3).concat('420') + ' 420w');
}
variantLabel.innerText = newVariantName;
variantLabel.setAttribute('data-current-name', newVariantName);
// Toggle visibility of page data specific to the selected variant.
for (let i = 0; i < productInformation.length; i++) {
productInformation[i].classList.add('js-hidden');
}
for (let i = 0; i < variantInformation.length; i++) {
variantInformation[i].classList.remove('js-hidden');
}
}
// Notify other components that might be listening (in this case, product
// controls will want to know).
window.componentEvents.emitEvent('active-product-variant');
e.preventDefault();
}
// Switch the variant label to the hovered variant's name.
function variantMouseover(e) {
const variant = e.target.closest('.js-product-detail-variant');
if (!variant.classList.contains(activeVariantClass)) {
variantLabel.innerText = variant.getAttribute('data-name');
}
}
// Switch the variant label back to the currently active variant's name.
function variantMouseout(e) {
variantLabel.innerText = variantLabel.getAttribute('data-current-name');
}
function switchMagnification(magnification) {
const magnificationVariants = variantWrapper.querySelectorAll('.js-product-detail-variants');
let activeVariants = null;
let activeVariantIndex = null;
for (let i = 0; i < magnificationVariants.length; i++) {
const instanceMagnification = magnificationVariants[i].getAttribute('data-magnification');
// Find the index of the active variant before the magnification change.
if (magnificationVariants[i].classList.contains(activeVariantsClass)) {
const variants = magnificationVariants[i].querySelectorAll('.js-product-detail-variant');
for (let i = 0; i < variants.length; i++) {
if (variants[i].classList.contains(activeVariantClass)) {
activeVariantIndex = i;
}
}
}
if (instanceMagnification && magnification) {
if (instanceMagnification == magnification) {
magnificationVariants[i].classList.add(activeVariantsClass);
activeVariants = magnificationVariants[i];
}
else {
magnificationVariants[i].classList.remove(activeVariantsClass);
}
}
}
// Maintain the active variant through magnification change.
if (activeVariants && activeVariantIndex != null) {
// nth-child does not begin counting at 0.
activeVariantIndex++;
const newlyActiveVariant = activeVariants.querySelector('.js-product-detail-variant:nth-child(' + activeVariantIndex + ')');
if (newlyActiveVariant) {
newlyActiveVariant.click();
}
}
}
function init() {
angleCarouselWrapper = document.querySelector('.js-product-detail-carousel');
variantWrapper = document.querySelector('.js-product-detail-variant-wrapper');
variantLabel = document.querySelector('.js-product-detail-variant-label');
if (angleCarouselWrapper && !angleCarouselWrapper.classList.contains('js-component-init')) {
initAngleCarousel(angleCarouselWrapper);
angleCarouselWrapper.classList.add('js-component-init');
}
if (variantWrapper && !variantWrapper.classList.contains('js-component-init')) {
const variants = variantWrapper.querySelectorAll('.js-product-detail-variant');
for (let i = 0; i < variants.length; i++) {
variants[i].addEventListener('click', switchVariant);
variants[i].addEventListener('mouseover', variantMouseover);
variants[i].addEventListener('mouseout', variantMouseout)
}
componentEvents.on('pdp-magnification-change', switchMagnification);
variantWrapper.classList.add('js-component-init');
}
}
// Allow application JS to reinitialize any instances added with Ajax, etc.
if (typeof componentEvents !== 'undefined') {
componentEvents.on('component-init', init);
}
init();
})(this);
.product-detail {
max-width: 940px;
margin: 0 auto;
text-align: center;
}
.product-detail__carousel-wrapper {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.product-detail__carousel {
@include reset-list;
overflow: hidden;
}
.product-detail__carousel-item {
// Prevents the other items from being shown before the carousel is
// initialized. The initialized carousel will add `display: inline-block` to
// these components, which overrides this.
&:not(:first-child) {
display: none;
}
}
// Responsive video player styles.
.product-detail__carousel-video-outer {
max-width: 515.5px;
max-height: 290px;
margin: 0 auto;
@include breakpoint($breakpoint-xl) {
padding-bottom: 30px;
}
}
.product-detail__carousel-video-inner {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
.product-detail__carousel-control {
@include reset-button;
display: none;
position: absolute;
top: calc(50% - 18px);
width: 36px;
height: 36px;
fill: $color-dark;
&[disabled] {
opacity: 0;
pointer-events: none;
}
// CSS chevron instead of an icon.
&:before {
display: block;
position: relative;
width: 24px;
height: 24px;
border-width: 1px 1px 0 0;
border-style: solid;
content: '';
pointer-events: none;
}
&:focus {
outline: none;
}
@include breakpoint($breakpoint-xl) {
display: block;
}
}
.product-detail__carousel-control--prev {
left: -36px;
&:before {
left: 13px;
transform: rotate(-135deg);
}
}
.product-detail__carousel-control--next {
right: -36px;
&:before {
left: -2px;
transform: rotate(45deg);
}
}
.product-detail__carousel-nav {
display: inline-block;
@include breakpoint($breakpoint-xl) {
margin-top: -30px;
}
}
.product-detail__carousel-nav-item {
@include reset-button;
position: relative;
width: 30px;
height: 30px;
float: left;
// CSS circles instead of an icon.
&:before,
&:after {
position: absolute;
border-radius: 50%;
content: '';
}
&:before {
top: 9px;
left: 9px;
width: 10px;
height: 10px;
border: 1px solid $color-dark;
}
&:hover {
&[aria-selected='false']:after {
top: 12px;
left: 12px;
width: 6px;
height: 6px;
background-color: $color-medium-dark;
}
}
&[aria-selected='true']:after {
top: 12px;
left: 12px;
width: 6px;
height: 6px;
background-color: $color-darkest;
}
}
.product-detail__variant-label {
min-height: 19px;
margin: 5px 0 10px;
color: $color-dark;
font-size: 1.6rem;
font-weight: $font-weight-bold;
letter-spacing: 1px;
line-height: 1.9rem;
@include breakpoint($breakpoint-lg) {
min-height: 28px;
font-size: 2.4rem;
line-height: 2.8rem;
}
}
.product-detail__variants {
@include reset-list;
@include clearfix;
display: inline-block;
text-align: center;
&:not(.js-product-detail-variants--active) {
display: none;
}
@include breakpoint($breakpoint-sm-only) {
// Fits 6 52px variant items.
max-width: 312px;
}
}
.product-detail__variant {
position: relative;
width: 52px;
height: 52px;
float: left;
cursor: pointer;
&:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: border-color $transition-standard;
border: 2px solid transparent;
content: '';
pointer-events: none;
}
&.js-product-detail-variant--active:after {
// !important ensures it overrides the hover action at larger breakpoints.
border-color: $color-primary !important;
}
@include breakpoint($breakpoint-md) {
width: calc(25% - 6px);
min-width: 142px;
height: auto;
min-height: 62px;
margin: 0 3px;
&:after {
right: auto;
left: 50%;
width: 142px;
transform: translateX(-50%);
}
}
@include breakpoint($breakpoint-lg) {
width: calc(20% - 6px);
}
@include breakpoint($breakpoint-xl) {
width: calc(16.6666% - 6px);
&:hover:after {
border-color: $color-medium-light;
}
}
}
.product-detail__variant-button {
@include reset-button;
position: relative;
top: 6px;
width: 40px;
height: 40px;
background-size: cover;
font-size: 0;
white-space: nowrap;
pointer-events: none;
@include breakpoint($breakpoint-md) {
top: 3px;
width: 140px;
height: auto;
}
.product-detail & {
@include breakpoint($breakpoint-md) {
// !important overrides the inline color and border set for mobile swatches.
border: 0 !important;
background: none !important;
}
}
}
.product-detail__variant-image {
width: 100%;
height: auto;
margin: 0 auto;
@include breakpoint($breakpoint-sm-only) {
display: none;
}
}
.product-detail__variants-controls {
position: absolute;
top: 0;
width: 100%;
}
.product-detail__variants-control {
@include reset-button;
position: absolute;
width: 26px;
height: 52px;
.icon {
position: absolute;
top: 50%;
width: 10px;
height: 20px;
transform: translateY(-50%);
}
&[disabled],
&:not([data-controls]) {
display: none;
}
@include breakpoint($page-width-min + 40px) {
width: 46px;
}
@include breakpoint($breakpoint-md) {
height: 67px;
}
}
.product-detail__variants-control--prev {
left: -26px;
@include breakpoint($page-width-min + 40px) {
left: -46px;
}
@include breakpoint($breakpoint-sm-only) {
.icon {
right: 7px;
}
}
@include breakpoint($breakpoint-xl) {
.icon {
right: 12px;
}
}
}
.product-detail__variants-control--next {
right: 26px;
@include breakpoint($page-width-min + 40px) {
right: 46px;
}
@include breakpoint($breakpoint-sm-only) {
.icon {
left: 7px;
}
}
@include breakpoint($breakpoint-xl) {
.icon {
left: 12px;
}
}
}
.product-detail__carousel-image {
max-height: 320px;
margin: 0 auto;
}
.product-detail--rimless,
.product-detail--core {
.product-detail__carousel-nav {
@include breakpoint($breakpoint-md) {
position: relative;
top: -25px;
}
}
.product-detail__variant-wrapper {
@include breakpoint($breakpoint-md) {
position: relative;
top: -25px;
}
}
.product-detail__variants {
@include breakpoint($breakpoint-md) {
max-width: 640px;
margin-top: 15px;
}
}
.product-detail__variant {
@include breakpoint($breakpoint-md) {
width: 72px;
min-width: unset;
height: 72px;
margin: 0 4px;
&:after {
width: 72px;
height: 72px;
box-sizing: border-box;
}
}
}
.product-detail__variant-button {
@include breakpoint($breakpoint-md) {
top: 6px;
width: 60px;
height: 60px;
}
}
.product-detail__variant-image {
@include breakpoint($breakpoint-sm-only) {
display: block;
}
}
}
.product-detail__carousel-controls {
outline: 0;
}
The product detail component may contain an attribute, data-sku-form
that is intended to enable a component receiving a
customization-options-notify event to assemble the contents of that
event into a product sku.
The attribute may contain any valid HTML character as well as three
possible tokens that will be replaced when the customize-page.js script
assembles a sku:
[s]: the frame style,[c]: the frame color,[t]: the temple length.All of these tokens are optional.