<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$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;420 420w"
                    src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;900" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;900"
                    data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900"
                    data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;900" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;900"
                    data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;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$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;420 420w"
                    src="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;900"
                    data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;900" data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900"
                    data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900" data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;900"
                    data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;900" data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;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$&amp;wid&#x3D;900 900w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;768 768w, https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;420 420w"
                    src="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900" sizes="100vw, (min-width: 920px) 900px" data-202-02="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;900" data-B202-2M="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;900"
                    data-H202-10="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;900" data-H202-2M="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900" data-H202-70="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900"
                    data-HT202-71="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;900" data-H202-2M-2="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;900" data-H202-70-2="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;900"
                    data-HT202-71-2="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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$&amp;wid&#x3D;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
    }
  ]
}
  • Content:
    (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);
    
  • URL: /components/raw/product-detail/product-detail.js
  • Filesystem Path: src/components/02-components/product-detail/product-detail.js
  • Size: 7.3 KB
  • Content:
    .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;
    }
    
  • URL: /components/raw/product-detail/product-detail.scss
  • Filesystem Path: src/components/02-components/product-detail/product-detail.scss
  • Size: 7.2 KB

HTML Attributes

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.