<div class="card js-card">
    <div class="card__inner">
        <a class="card__link js-card-url" href="#202-02" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
            data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true"
            data-HT202-71-2-stock="true">
            <ul class="rating">
                <li class="rating__star rating__star--star-full">
                    <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                </li>
                <li class="rating__star rating__star--star-full">
                    <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                </li>
                <li class="rating__star rating__star--star-full">
                    <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                </li>
                <li class="rating__star rating__star--star-full">
                    <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                </li>
                <li class="rating__star rating__star--star-empty">
                    <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                </li>
            </ul>

            <img class="card__image js-card-image" data-angle="front" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"
                data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340" data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"
                data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"
                data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"
                data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"
                data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"
                data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"
                data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"
                data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"
                data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340">
            <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="New" data-H202-10-status="" data-H202-2M-status="" data-H202-70-status="New" data-HT202-71-status="" data-H202-2M-2-status="" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
            <h5 class="card__title">PEAHI</h5>
            <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00"
                data-HT202-71-2-price="$229.00">
        $149.00
      </span>
            <span class="card__tax">
        Inkl. MWST
      </span>
        </a>
        <div class="card__variants-wrapper">
            <ul class="card__variants js-card-variants">
                <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                </li>
                <li class="card__variant js-card-variant" data-id="B202-2M">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                </li>
                <li class="card__variant js-card-variant" data-id="H202-10">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                </li>
                <li class="card__variant js-card-variant" data-id="H202-2M">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                </li>
                <li class="card__variant js-card-variant" data-id="H202-70">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                </li>
                <li class="card__variant js-card-variant" data-id="HT202-71">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                </li>
                <li class="card__variant js-card-variant" data-id="H202-2M-2">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                </li>
                <li class="card__variant js-card-variant" data-id="H202-70-2">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                </li>
                <li class="card__variant js-card-variant" data-id="HT202-71-2">
                    <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                </li>
            </ul>
            <div class="card__variants-controls js-card-variants-controls">
                <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

        </button>
                <button class="card__variants-control card__variants-control--next" type="button">
          <span class="u-visually-hidden">Next</span>
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </button>
            </div>
        </div>
    </div>
</div>
<div class="card js-card{{#each classes}} {{this}}{{/each}}">
  <div class="card__inner">
    <a class="card__link js-card-url"{{#each variants}}{{#if active}} href="{{url}}"{{/if}} data-{{id}}-url="{{url}}"{{/each}}{{#each variants}} data-{{id}}-stock="{{#if stock}}true{{else}}false{{/if}}"{{/each}}>
      {{#if mauijim}}
      {{render '@rating'}}
      {{/if}}
      <img class="card__image js-card-image" data-angle="front"
          {{#each variants}}
            {{#if active}} src="{{productImage images.front 340}}" data-variant="{{id}}"{{/if}}
            {{#each images}} data-{{../id}}-{{@key}}="{{productImage this 340}}"{{/each}}
          {{/each}}>
      {{#unless excludeStatus}}
      <span class="card__status js-card-status"{{#each variants}} data-{{id}}-status="{{status}}"{{/each}}>
        {{#each variants}}
          {{#if active}}{{status}}{{/if}}
        {{/each}}
      </span>
      {{/unless}}
      <h5 class="card__title">{{name}}</h5>
      {{#unless excludePrice}}
      {{#if zeal}}
      <span class="card__sale-price js-card-sale-price" {{#each variants}}{{#if salePrice}}data-{{id}}-saleprice="{{salePrice}}"{{/if}}{{/each}}>
        {{#each variants}}{{#if active}}{{#if salePrice}}{{salePrice}}{{/if}}{{/if}}{{/each}}
      </span>
      {{/if}}
      <span class="card__price js-card-price"{{#each variants}} data-{{id}}-price="{{price}}"{{/each}}>
        {{#each variants}}{{#if active}}{{price}}{{/if}}{{/each}}
      </span>
      {{/unless}}
      {{#if showTax}}
      {{#if tax}}
      <span class="card__tax">
        {{tax}}
      </span>
      {{/if}}
      {{/if}}
      {{#if reserveInStore}}
      <span class="card__back-link">{{render '@icons--arrow-left'}} Back</span>
      <span class="card__variant-name js-card-variant-name"{{#each variants}} data-{{id}}-variant-name="{{name}}"{{/each}}>
        {{#each variants}}{{#if active}}{{name}}{{/if}}{{/each}}
      </span>
      {{render '@icons--arrow-right'}}
      {{/if}}
      {{#if reservedStyle}}
      <span class="card__variant-name js-card-variant-name"{{#each variants}} data-{{id}}-variant-name="{{name}}"{{/each}}>
        {{#each variants}}{{#if active}}{{name}}{{/if}}{{/each}}
      </span>
      {{/if}}
    </a>
    {{#unless excludeVariants}}
    <div class="card__variants-wrapper">
      <ul class="card__variants js-card-variants">
        {{#each variants}}
        <li class="card__variant js-card-variant{{#if active}} js-card-variant--active{{/if}}" data-id="{{id}}">
          <button class="card__variant-button js-card-variant-button" style="background-color:{{color}};{{#if swatchImage}}background-image:url({{swatchImage}});{{/if}}" type="button">{{name}}</button>
        </li>
        {{/each}}
      </ul>
      <div class="card__variants-controls js-card-variants-controls">
        <button class="card__variants-control card__variants-control--prev" type="button">
          <span class="u-visually-hidden">Previous</span>
          {{render '@icons--arrow-left'}}
        </button>
        <button class="card__variants-control card__variants-control--next" type="button">
          <span class="u-visually-hidden">Next</span>
          {{render '@icons--arrow-right'}}
        </button>
      </div>
    </div>
    {{/unless}}
    {{#if callToAction}}
    <a class="card__call-to-action-button button button--primary{{#unless variants.0.stock}} js-button-disabled{{/unless}}" href="#">{{callToAction}}</a>
    {{/if}}
  </div>
</div>
{
  "name": "PEAHI",
  "summary": "Polarized men's classic sunglasses",
  "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
  "category": "Wrap",
  "rating": [
    "star-full",
    "star-full",
    "star-half",
    "star-empty",
    "star-empty"
  ],
  "vip": null,
  "tax": "Inkl. MWST",
  "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": "New",
      "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": 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-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": 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-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": "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-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": "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-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": "New",
      "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"
      }
    }
  ],
  "callToAction": null,
  "mauijim": true,
  "zeal": null,
  "excludeVariants": null,
  "mymaui": "true",
  "prescription": null,
  "showTax": true
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeVariantClass = 'js-card-variant--active';
      const variantSliderPagesAttribute = 'data-pages';
      const variantSliderPageAttribute = 'data-page';
      const variantSliderButtonDirectionAttribute = 'data-direction';
      const variantSliderHiddenButtonClass = 'js-card-variants-slider-button--hidden';
    
      function switchVariant(e) {
        const variant = e.target.closest('.js-card-variant');
    
        if (!variant.classList.contains(activeVariantClass)) {
          const card = variant.closest('.js-card');
          const cardVariants = card.querySelectorAll('.js-card-variant');
    
          for (let i = 0; i < cardVariants.length; i++) {
            cardVariants[i].classList.remove(activeVariantClass);
          }
    
          variant.classList.add(activeVariantClass);
    
          switchImageVariant(card, variant.getAttribute('data-id'));
    
          switchStatusVariant(card, variant.getAttribute('data-id'));
    
          switchNameVariant(card, variant.getAttribute('data-id'));
    
          switchPriceVariant(card, variant.getAttribute('data-id'));
    
          switchSalePriceVariant(card, variant.getAttribute('data-id'));
    
          switchUrlVariant(card, variant.getAttribute('data-id'));
    
          switchStockVariant(card, variant.getAttribute('data-id'));
        }
    
        e.preventDefault();
      }
    
      function variantMouseover(e) {
        const hoveredVariant = e.target.closest('.js-card-variant');
    
        if (!hoveredVariant.classList.contains(activeVariantClass)) {
          const card = hoveredVariant.closest('.js-card');
    
          switchImageVariant(card, hoveredVariant.getAttribute('data-id'));
    
          switchNameVariant(card, hoveredVariant.getAttribute('data-id'));
        }
      }
    
      function variantMouseout(e) {
        const card = e.target.closest('.js-card');
        const activeVariant = card.querySelector('.' + activeVariantClass);
    
        switchImageVariant(card, activeVariant.getAttribute('data-id'));
    
        switchNameVariant(card, activeVariant.getAttribute('data-id'));
    
      }
    
      function switchImageVariant(card, newVariantId) {
        const cardImage = card.querySelector('.js-card-image');
        const currentAngleId = cardImage.getAttribute('data-angle');
        const newImageAttribute = 'data-' + newVariantId + '-' + currentAngleId;
    
        cardImage.setAttribute('src', cardImage.getAttribute(newImageAttribute));
        cardImage.setAttribute('data-variant', newVariantId);
      }
    
      function switchStatusVariant(card, newVariantId) {
        const cardStatus = card.querySelector('.js-card-status');
        const newStatusAttribute = 'data-' + newVariantId + '-status';
    
        if (cardStatus) {
          cardStatus.textContent = cardStatus.getAttribute(newStatusAttribute);
        }
      }
    
      function switchNameVariant(card, newVariantId) {
        const cardName = card.querySelector('.js-card-variant-name');
        const newNameAttribute = 'data-' + newVariantId + '-variant-name';
    
        if (cardName) {
          cardName.textContent = cardName.getAttribute(newNameAttribute);
        }
      }
    
      function switchPriceVariant(card, newVariantId) {
        const cardPrice = card.querySelector('.js-card-price');
        const newPriceAttribute = 'data-' + newVariantId + '-price';
    
        if (cardPrice) {
          cardPrice.textContent = cardPrice.getAttribute(newPriceAttribute);
        }
      }
    
      function switchSalePriceVariant(card, newVariantId) {
        const cardSalePrice = card.querySelector('.js-card-sale-price');
        const newPriceAttribute = 'data-' + newVariantId + '-saleprice';
    
        if (cardSalePrice) {
          cardSalePrice.textContent = cardSalePrice.getAttribute(newPriceAttribute);
        }
      }
    
      function switchUrlVariant(card, newVariantId) {
        const cardUrl = card.querySelector('.js-card-url');
        const newUrlAttribute = 'data-' + newVariantId + '-url';
    
        cardUrl.setAttribute('href', cardUrl.getAttribute(newUrlAttribute));
      }
    
      function switchStockVariant(card, newVariantId) {
        const disabledButtonClass = 'js-button-disabled';
        const callToActionButton = card.querySelector('.card__call-to-action-button');
        const cardUrl = card.querySelector('.js-card-url');
        const newStockAttribute = 'data-' + newVariantId + '-stock';
        const newStockValue = cardUrl.getAttribute(newStockAttribute);
    
        if (callToActionButton) {
          if (newStockValue === "true") {
            callToActionButton.classList.remove(disabledButtonClass);
          }
          else {
            callToActionButton.classList.add(disabledButtonClass);
          }
        }
      }
    
      function selectVariant(e) {
        const card = e.currentTarget;
    
        card.classList.add('card--reserved-style');
    
        card.removeEventListener('selectVariant', selectVariant);
        card.addEventListener('confirmVariant', confirmVariant, {once: true});
        card.addEventListener('deselectVariant', deselectVariant, {once: true});
        card.addEventListener('resetVariant', resetVariant, {once: true});
      }
    
      function deselectVariant(e) {
        const card = e.currentTarget;
    
        card.classList.remove('card--reserved-style');
    
        card.removeEventListener('confirmVariant', confirmVariant);
        card.removeEventListener('resetVariant', resetVariant);
        card.removeEventListener('deselectVariant', deselectVariant);
        card.addEventListener('selectVariant', selectVariant, {once: true});
      }
    
      function confirmVariant(e) {
        const card = e.currentTarget;
        const container = card.parentElement;
    
        container.classList.remove('modal-form__item-group--product');
        container.classList.add('modal-form__item-group--reserved-product');
    
        card.classList.remove('card--reserved-style');
        card.classList.remove('card--reserve-in-store');
        card.classList.add('card--confirmed-style');
    
        card.removeEventListener('confirmVariant', confirmVariant);
        card.removeEventListener('deselectVariant', deselectVariant);
      }
    
      function unconfirmVariant(e) {
        const card = e.currentTarget;
        const container = card.parentElement;
    
        container.classList.add('modal-form__item-group--product');
        container.classList.remove('modal-form__item-group--reserved-product');
    
        card.classList.add('card--reserved-style');
        card.classList.add('card--reserve-in-store');
        card.classList.remove('card--confirmed-style');
    
        card.addEventListener('confirmVariant', confirmVariant, {once: true});
        card.addEventListener('deselectVariant', deselectVariant, {once: true});
      }
    
      function resetVariant(e) {
        unconfirmVariant(e);
        deselectVariant(e);
      }
    
      function init() {
        const cards = Array.prototype.filter.call(document.querySelectorAll('.js-card'), el => !el.classList.contains('card--confirmed-style'));
    
        for (let i = 0; i < cards.length; i++) {
          if (!cards[i].classList.contains('js-component-init')) {
            const card = cards[i];
            const variants = card.querySelectorAll('.js-card-variant');
    
            for (let j = 0; j < variants.length; j++) {
              variants[j].addEventListener('click', switchVariant);
              variants[j].addEventListener('mouseover', variantMouseover);
              variants[j].addEventListener('mouseout', variantMouseout);
            }
    
            if (variants.length > 5 && !card.classList.contains('card--reserve-in-store')) {
              const slider = tns({
                container: card.querySelector('.js-card-variants'),
                controlsContainer: card.querySelector('.js-card-variants-controls'),
                items: 5,
                slideBy: 5,
                nav: false,
                loop: false
              });
            }
    
            if (card.classList.contains('card--reserve-in-store')) {
              card.addEventListener('selectVariant', selectVariant, {once: true});
            }
    
            // Prevent a card from being initialized more than once.
            card.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/card/card.js
  • Filesystem Path: src/components/02-components/card/card.js
  • Size: 7.9 KB
  • Content:
    .card {
      text-align: center;
    }
    
    .card__inner {
      display: inline-block;
      max-width: 340px;
      padding: 30px 0;
      background-color: $color-white;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-xl) {
        transition: box-shadow $transition-standard;
    
        &:hover {
          position: relative;
          box-shadow: 0 0 60px 0 rgba(0, 0, 0, .3);
        }
      }
    }
    
    .card__link {
      text-decoration: none;
    
      &:focus {
        outline: none;
      }
    }
    
    .card__image {
      margin: 0 auto;
    }
    
    .card__status {
      @include text-ui($color-primary);
      display: block;
      height: 15px;
      color: $color-primary;
      text-transform: uppercase;
    }
    
    .card__title {
      max-width: 300px;
      margin: 10px auto 0;
      text-transform: uppercase;
    }
    
    .card__price {
      @include text-price;
      display: block;
    }
    
    .card__sale-price {
      display: block;
      margin: 6px 0 3px;
      color: $color-error;
      text-decoration: line-through;
    }
    
    .card__tax {
      display: block;
      margin: -5px 0 15px;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .card__variant-name {
      color: $color-darkest;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: $gutter-width / 2;
      }
    }
    
    .card__variants-wrapper {
      position: relative;
      width: 218px;
      height: 42px;
      margin: 0 auto;
      padding: 0 42px;
      overflow: hidden;
      box-sizing: content-box;
    }
    
    .card__variants {
      @include reset-list;
      @include clearfix;
      display: inline-block;
      text-align: center;
    }
    
    .card__variant {
      position: relative;
      width: 42px;
      height: 42px;
      float: left;
      line-height: 0;
    
      &:after {
        position: absolute;
        top: 0;
        right: 2px;
        bottom: 0;
        left: 0;
        transform: scale(0);
        transition: border-color .1s, transform .1s;
        border: 2px solid transparent;
        content: '';
        z-index: 0;
        pointer-events: none;
      }
    
      &:hover:after {
        transform: scale(1);
        border-color: $color-medium-light;
      }
    
      &.js-card-variant--active:after {
        transform: scale(1);
        border-color: $color-primary;
      }
    
      &:last-child {
        margin-right: 0;
      }
    }
    
    .card__variant-button {
      @include reset-button;
      position: relative;
      top: 6px;
      left: -1px;
      width: 30px;
      height: 30px;
      background-size: cover;
      font-size: 0;
      white-space: nowrap;
      z-index: 1;
    }
    
    .card__variants-controls {
      position: absolute;
      top: 0;
      width: 100%;
    }
    
    .card__variants-control {
      @include reset-button;
      position: absolute;
      width: 42px;
      height: 42px;
    
      .icon {
        position: absolute;
        top: 50%;
        width: 10px;
        height: 20px;
        transform: translateY(-50%);
      }
    
      &[disabled],
      &:not([data-controls]) {
        display: none;
      }
    }
    
    .card__variants-control--prev {
      left: -42px;
    
      .icon {
        right: 7px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon {
          right: 12px;
        }
      }
    }
    
    .card__variants-control--next {
      right: 42px;
    
      .icon {
        left: 7px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon {
          left: 12px;
        }
      }
    }
    
    .card__call-to-action-button {
      display: none;
      margin-top: 20px;
      padding: 2px 20px 0;
      transition: opacity $transition-standard;
      line-height: 2.8rem;
      pointer-events: none;
    
      @include breakpoint($breakpoint-xl) {
        display: inline-block;
        opacity: 0;
    
        .card__inner:hover & {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
    
    .card--reserve-in-store,
    .card--confirmed-style {
      @include breakpoint($breakpoint-md) {
        width: auto;
      }
    }
    
    .card--reserve-in-store {
      box-shadow: none;
      overflow: hidden;
    
      @include breakpoint($breakpoint-md) {
        padding: 0;
        overflow: visible;
      }
    
      .card__variants-wrapper {
        display: none;
    
        @include breakpoint($breakpoint-md) {
          display: block;
          position: static;
          width: 204px;
          height: auto;
          padding: 0;
        }
    
        @include breakpoint($breakpoint-xl) {
          width: auto;
          max-width: 300px;
        }
      }
    
      .card__variants {
        @include breakpoint($breakpoint-md) {
          margin: 0 auto;
        }
      }
    
      .card__variant {
        &:after {
          right: -2px;
          bottom: -2px;
        }
    
        @include breakpoint($breakpoint-md) {
          width: 50px;
          height: 50px;
          margin: 0 0 10px;
    
          &:nth-child(3n + 1) {
            margin-left: 0;
          }
    
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
    
        @include breakpoint($breakpoint-xl) {
          margin: 0 5px 15px;
    
          &:nth-child(3n +1),
          &:nth-child(3n) {
            margin-right: 5px;
            margin-left: 5px;
          }
    
          &:nth-child(5n + 1) {
            margin-left: 0;
          }
    
          &:nth-child(5n) {
            margin-right: 0;
          }
        }
      }
    
      .card__variant-button {
        @include breakpoint($breakpoint-md) {
          top: 6px;
          left: 1px;
          width: 40px;
          height: 40px;
        }
      }
    
      .card__image {
        width: 85px;
        margin-top: 4px;
        float: left;
    
        @include breakpoint($breakpoint-md) {
          width: 206px;
          margin: 0 auto 10px;
          float: none;
        }
    
        @include breakpoint($breakpoint-xl) {
          width: 300px;
          margin: 0 auto 20px;
        }
      }
    
      .card__title,
      .card__variant-name {
        display: block;
        margin: 0 0 0 85px;
        color: $color-darkest;
        font-size: 1.4rem;
        line-height: 1.8rem;
        text-align: left;
      }
    
      .card__title {
        color: $color-darkest;
        font-size: 1.4rem;
        line-height: 1.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    
        @include breakpoint($breakpoint-md) {
          margin: 0 0 15px;
          color: $color-dark;
          font-size: 1.6rem;
          line-height: 1.9rem;
          text-align: center;
          text-overflow: clip;
          white-space: normal;
          overflow: visible;
        }
    
        @include breakpoint($breakpoint-xl) {
          max-width: 290px;
          margin: 0 auto 25px;
          font-size: 2.7rem;
          line-height: 3.2rem;
        }
      }
    
      .card__price {
        display: none;
    
        @include breakpoint($breakpoint-md) {
          display: block;
          margin-bottom: 25px;
          font-size: 2.7rem;
          line-height: 3.2rem;
          text-align: center;
        }
      }
    
      .card__variant-name {
        text-overflow: ellipsis;
        text-transform: none;
        white-space: nowrap;
        overflow: hidden;
    
        @include breakpoint($breakpoint-md) {
          margin: 0 0 10px;
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 2.0rem;
          text-align: center;
          text-overflow: clip;
          white-space: normal;
          overflow: visible;
        }
    
        @include breakpoint($breakpoint-xl) {
          max-width: 290px;
          margin: 0 auto 10px;
        }
      }
    
      .card__inner {
        width: 100%;
        max-width: none;
        padding: 3px 0 7px;
    
        @include breakpoint($breakpoint-md) {
          &:hover {
            box-shadow: none;
          }
        }
      }
    
      .card__link {
        display: block;
        position: relative;
        max-height: 5rem;
        margin: 0;
        padding: 0;
        padding-right: 40px;
        cursor: default;
    
        * {
          pointer-events: none;
        }
    
        @include breakpoint($breakpoint-md) {
          max-height: none;
          padding: 0;
        }
      }
    
      .icon--arrow-right {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 10px 10px 10px 25px;
    
        @include breakpoint($breakpoint-md) {
          display: none;
        }
      }
    
      .card__back-link {
        display: none;
      }
    
      .card--confirmed-style {
        @include breakpoint($breakpoint-md) {
          width: auto;
        }
      }
    }
    
    .card--reserved-style {
      .card__inner {
        pointer-events: none;
      }
    
      .card__variants-wrapper {
        display: none;
    
        @include breakpoint($breakpoint-md) {
          display: block;
          margin-top: 10px;
          padding: 0;
        }
      }
    
      .card__variant {
        @include breakpoint($breakpoint-md) {
          display: none;
          margin: 0 auto 15px;
          float: none;
    
          &.js-card-variant--active::after {
            border-color: transparent;
          }
    
          &.js-card-variant--active {
            display: inherit;
          }
        }
      }
    
      .card__variant-button {
        @include breakpoint($breakpoint-md) {
          width: 40px;
          height: 40px;
        }
      }
    
      .card__back-link {
        display: none;
      }
    
      .icon--arrow-right {
        display: none;
      }
    }
    
    .card--confirmed-style {
      @include breakpoint($breakpoint-md) {
        padding-top: 15px;
      }
    
      .card__inner {
        pointer-events: none;
      }
    
      .card__image {
        width: 250px;
    
        @include breakpoint($breakpoint-sm-only) {
          width: 300px;
        }
    
        @include breakpoint($breakpoint-xl) {
          width: 300px;
        }
      }
    
      .card__title {
        margin-bottom: 10px;
    
        @include breakpoint($breakpoint-md) {
          font-size: 1.6rem;
          line-height: 1.9rem;
        }
      }
    
      .card__price {
        margin-bottom: 15px;
    
        @include breakpoint($breakpoint-md) {
          margin-bottom: 25px;
        }
      }
    
      .card__variant-name {
        font-size: 1.4rem;
        font-weight: $font-weight-bold;
        line-height: 2.0rem;
      }
    
      .card__variants-wrapper {
        display: none;
    
        @include breakpoint($breakpoint-md) {
          display: block;
          margin-top: 10px;
          padding: 0;
        }
      }
    
      .card__variant {
        @include breakpoint($breakpoint-md) {
          display: none;
          margin: 0 auto 15px;
          float: none;
    
          &.js-card-variant--active::after {
            border-color: transparent;
          }
    
          &.js-card-variant--active {
            display: inherit;
          }
        }
      }
    
      .card__variant-button {
        @include breakpoint($breakpoint-md) {
          width: 40px;
          height: 40px;
        }
      }
    
      .card__back-link {
        display: none;
      }
    
      .icon--arrow-right {
        display: none;
      }
    }
    
    .js-card-reserve-in-store--detail {
      .card__title {
        color: $color-dark;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .modal-form__item-group:not(:first-child) {
          display: none;
        }
    
        .card__back-link {
          display: block;
          position: absolute;
          top: 0;
          left: 10px;
        }
    
        .card__link {
          max-height: none;
          padding: 40px 0 0;
          color: inherit;
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 2.0rem;
          text-transform: uppercase;
    
          .icon {
            padding-right: $gutter-width / 2;
          }
        }
    
        .card__image {
          width: 300px;
          margin: 0 auto 5px;
          float: none;
        }
    
        .icon--arrow-right {
          display: none;
        }
    
        .card__variants {
          max-width: 300px;
          margin: 0 auto;
        }
    
        .card__variants-wrapper {
          display: block;
          position: static;
          width: 100%;
          height: auto;
          padding: 0;
        }
    
        .card__variant {
          width: 50px;
          height: 50px;
          margin: 0;
        }
    
        .card__variant-button {
          top: 6px;
          left: 1px;
          width: 40px;
          height: 40px;
        }
    
        .card__inner {
          box-shadow: none;
        }
    
        .card__title,
        .card__price,
        .card__variant-name {
          position: static;
          margin: 0;
          text-align: center;
        }
    
        .card__title {
          margin-bottom: 5px;
          font-size: 1.4rem;
          line-height: 2.0rem;
        }
    
        .card__price {
          margin-bottom: 50px;
          font-size: 2.7rem;
          line-height: 3.2rem;
        }
    
        .card__variant-name {
          margin-bottom: 5px;
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 2.0rem;
        }
      }
    }
    
    .card--find-an-optician {
      .card__variants-wrapper {
        @include breakpoint($breakpoint-md) {
          margin-top: 15px;
        }
      }
    }
    
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/components/02-components/card/card.scss
  • Size: 11.2 KB

There are no notes for this item.