<div class="filters js-filters u-page-width-max-gutters">
<div class="filter-controls">
<span class="filter-controls__result-summary">
<span class="filter__controls-result-count">14</span> Results
</span>
<button class="filter-controls__button filter-controls__button--open js-filters-open-button">
<span class="filter-controls__icon filter-controls__icon--open">
<svg class="icon icon--filters">
<use xlink:href="/assets/icons/icons.svg#filters"></use>
</svg>
</span>
<span class="filter-controls__label">Filter</span>
</button>
<div class="filter-controls__prescription filter-controls__prescription--medium">
<input type="checkbox" id="filters-prescription" class="js-filters-prescription-control checkbox checkbox--default">
<label for="filters-prescription">Available for prescription</label>
</div>
<div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
<button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
<span class="filter-controls__label">Sort by</span>
<span class="filter-controls__icon">
<svg class="icon icon--sort">
<use xlink:href="/assets/icons/icons.svg#sort"></use>
</svg>
</span>
</button>
<select class="js-select-tooltip-select">
<option value="new-arrivals" selected="selected">New Arrivals</option>
<option value="price-asc">Price (low to high)</option>
<option value="price-dsc">Price (high to low)</option>
<option value="name-asc">Name (A-Z)</option>
<option value="name-dsc">Name (Z-A)</option>
</select>
<ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
<li class="js-select-tooltip-option js-select-tooltip-option--active" data-value="new-arrivals">New Arrivals</li>
<li class="js-select-tooltip-option" data-value="price-asc">Price (low to high)</li>
<li class="js-select-tooltip-option" data-value="price-dsc">Price (high to low)</li>
<li class="js-select-tooltip-option" data-value="name-asc">Name (A-Z)</li>
<li class="js-select-tooltip-option" data-value="name-dsc">Name (Z-A)</li>
</ul>
</div>
</div>
<div class="filters__categories-wrapper js-filters-categories-wrapper">
<button class="filters__close-button js-filters-close-button">
<svg class="icon icon--arrow-left">
<use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>
Close filters
</button>
<div class="js-selected-filter-close-icon"><svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</div>
<ul class="filters__selected js-filters-selected"></ul>
<div class="filter-controls__prescription filter-controls__prescription--small">
<input type="checkbox" id="filters-prescription-small" class="js-filters-prescription-control checkbox checkbox--default">
<label for="filters-prescription-small">Available for prescription</label>
</div>
<ul class="filters__categories js-filters-categories">
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Frame
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--frame-style">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Frame Style</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-aviators" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-aviators" data-value="Aviators">
<label class="filters__item-label" for="fs-aviators">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_aviators_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_aviators_active.svg">
Aviators
<span class="filters__item-count">
(13)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-rectangular" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-rectangular" data-value="Rectangular">
<label class="filters__item-label" for="fs-rectangular">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_rectangular_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_rectangular_active.svg">
Rectangular
<span class="filters__item-count">
(19)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-cateye" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-cateye" data-value="Cat Eye">
<label class="filters__item-label" for="fs-cateye">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_cat_eye_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_cat_eye_active.svg">
Cat Eye
<span class="filters__item-count">
(8)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-rimless" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-rimless" data-value="Rimless">
<label class="filters__item-label" for="fs-rimless">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_rimless_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_rimless_active.svg">
Rimless
<span class="filters__item-count">
(34)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-classic" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-classic" data-value="Classic">
<label class="filters__item-label" for="fs-classic">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_classic_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_classic_active.svg">
Classic
<span class="filters__item-count">
(14)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-shield" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-shield" data-value="Shield">
<label class="filters__item-label" for="fs-shield">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_shield_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_shield_active.svg">
Shield
<span class="filters__item-count">
(4)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-fashion" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-fashion" data-value="Fashion">
<label class="filters__item-label" for="fs-fashion">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_fashion_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_fashion_active.svg">
Fashion
<span class="filters__item-count">
(15)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--image">
<input type="checkbox" id="fs-wrap" class="checkbox checkbox--image filters__item-input js-filters-item-input" name="frame-style" data-id="fs-wrap" data-value="Wrap">
<label class="filters__item-label" for="fs-wrap">
<img class="filters__item-image-default" src="/assets/images/frame-styles/sunglasses_wrap_default.svg">
<img class="filters__item-image-active" src="/assets/images/frame-styles/sunglasses_wrap_active.svg">
Wrap
<span class="filters__item-count">
(19)
</span>
</label>
</li>
</ul>
</div>
</div>
<div class="filters__subcategory filters__subcategory--frame-color">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Frame Color</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-black" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-black" data-value="Black">
<label class="filters__item-label" for="fc-black">
<span class="filters__item-alternate-fill" style="background: #303032;"></span>
Black
<span class="filters__item-count">
(2)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-brown" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-brown" data-value="Brown">
<label class="filters__item-label" for="fc-brown">
<span class="filters__item-alternate-fill" style="background: #543a10;"></span>
Brown
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-green" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-green" data-value="Green">
<label class="filters__item-label" for="fc-green">
<span class="filters__item-alternate-fill" style="background: #66da4a;"></span>
Green
<span class="filters__item-count">
(1)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-purple" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-purple" data-value="Purple">
<label class="filters__item-label" for="fc-purple">
<span class="filters__item-alternate-fill" style="background: #8c46d2;"></span>
Purple
<span class="filters__item-count">
(2)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-blue" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-blue" data-value="Blue">
<label class="filters__item-label" for="fc-blue">
<span class="filters__item-alternate-fill" style="background: #5353df;"></span>
Blue
<span class="filters__item-count">
(4)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-gold" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-gold" data-value="Gold">
<label class="filters__item-label" for="fc-gold">
<span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #f2e575 0%, #a59937 50%, #f2e575 100%);"></span>
Gold
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-grey" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-grey" data-value="Grey">
<label class="filters__item-label" for="fc-grey">
<span class="filters__item-alternate-fill" style="background: #ccc;"></span>
Grey
<span class="filters__item-count">
(2)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-red" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-red" data-value="Red">
<label class="filters__item-label" for="fc-red">
<span class="filters__item-alternate-fill" style="background: #c81616;"></span>
Red
<span class="filters__item-count">
(1)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-silver" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-silver" data-value="Silver">
<label class="filters__item-label" for="fc-silver">
<span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #ffffff 0%, #c1bdbd 50%, #d5d5d5 100%);"></span>
Silver
<span class="filters__item-count">
(4)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-white" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-white" data-value="White">
<label class="filters__item-label" for="fc-white">
<span class="filters__item-alternate-fill" style="background: #fff;border: 1px solid #e2e2e2;"></span>
White
<span class="filters__item-count">
(2)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-tortoise" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-tortoise" data-value="Tortoise">
<label class="filters__item-label" for="fc-tortoise">
<span class="filters__item-alternate-fill" style="background: #303032;"></span>
Tortoise
<span class="filters__item-count">
(2)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="fc-twotone" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="frame-color" data-id="fc-twotone" data-value="Two-Tone">
<label class="filters__item-label" for="fc-twotone">
<span class="filters__item-alternate-fill" style="background: linear-gradient(to bottom, #525252 50%, #cccccc 51%);"></span>
Two-Tone
<span class="filters__item-count">
(2)
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Lens
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--lens-color">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Lens Color</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="lc-bluehawaii" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-bluehawaii" data-value="Blue Hawaii">
<label class="filters__item-label" for="lc-bluehawaii">
<span class="filters__item-alternate-fill" style="background: #297fbc;"></span>
Blue Hawaii
<span class="filters__item-count">
(1)
</span>
</label>
<div class="tooltip">Our blue mirror coating provides a stylish new look that offers the same amazing color enhancement and clarity as all other Maui Jim lenses.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="lc-neutralgrey" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-neutralgrey" data-value="Neutral Grey">
<label class="filters__item-label" for="lc-neutralgrey">
<span class="filters__item-alternate-fill" style="background: #535B54;"></span>
Neutral Grey
<span class="filters__item-count">
(3)
</span>
</label>
<div class="tooltip">Perfect for especially bright, direct sunlight. Offers rich color and contrast along with the highest available light production, unlike ordinary grey lenses that flatten light evenly across the spectrum.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="lc-hclbronze" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-hclbronze" data-value="HCL® Bronze">
<label class="filters__item-label" for="lc-hclbronze">
<span class="filters__item-alternate-fill" style="background: #987858;"></span>
HCL® Bronze
<span class="filters__item-count">
(13)
</span>
</label>
<div class="tooltip">For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="lc-mauiht" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-mauiht" data-value="Maui HT™">
<label class="filters__item-label" for="lc-mauiht">
<span class="filters__item-alternate-fill" style="background: #798b57;"></span>
Maui HT™
<span class="filters__item-count">
(3)
</span>
</label>
<div class="tooltip">High Transmission lenses work hard when distance counts. With the highest usable light transmission, HT technology balances contrast and depth of field for crisper details during varying conditions.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--alternate">
<input type="checkbox" id="lc-mauirose" class="checkbox checkbox--alternate filters__item-input js-filters-item-input" name="lens-color" data-id="lc-mauirose" data-value="Maui Rose®">
<label class="filters__item-label" for="lc-mauirose">
<span class="filters__item-alternate-fill" style="background: #9c5950;"></span>
Maui Rose®
<span class="filters__item-count">
(4)
</span>
</label>
<div class="tooltip">For everyday variable conditions, from full sun to overcast. The highest contrast available - excellent for fast moving sports. Provides a subtle rose tint.</div>
</li>
</ul>
</div>
</div>
<div class="filters__subcategory filters__subcategory--lens-size">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Lens Size</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ls-small" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-size" data-id="ls-small" data-value="Small">
<label class="filters__item-label" for="ls-small">
Small
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ls-medium" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-size" data-id="ls-medium" data-value="Medium">
<label class="filters__item-label" for="ls-medium">
Medium
<span class="filters__item-count">
(5)
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Material
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--frame-material">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Frame Material</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fm-acetate" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-acetate" data-value="Acetate">
<label class="filters__item-label" for="fm-acetate">
Acetate
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fm-metals" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-metals" data-value="Metals">
<label class="filters__item-label" for="fm-metals">
Metals
<span class="filters__item-count">
(5)
</span>
</label>
<div class="tooltip">Extremely strong, corrosion-resistant alloy for long-lasting comfort.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fm-plastics" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="fm-plastics" data-value="Plastics">
<label class="filters__item-label" for="fm-plastics">
Plastics
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="lc-titaniums" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="frame-material" data-id="lc-titaniums" data-value="Titaniums">
<label class="filters__item-label" for="lc-titaniums">
Titaniums
<span class="filters__item-count">
(2)
</span>
</label>
<div class="tooltip">Pure titanium frames are lightweight, durable and comfortable.</div>
</li>
</ul>
</div>
</div>
<div class="filters__subcategory filters__subcategory--lens-material">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Lens Material</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="lm-mauievolution" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-mauievolution" data-value="Maui Evolution®">
<label class="filters__item-label" for="lm-mauievolution">
Maui Evolution®
<span class="filters__item-count">
(1)
</span>
</label>
<div class="tooltip">When you need an everyday lens for your active life.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="lm-mauipure" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-mauipure" data-value="MauiPure®">
<label class="filters__item-label" for="lm-mauipure">
MauiPure®
<span class="filters__item-count">
(2)
</span>
</label>
<div class="tooltip">The lightest weight choice for long days in the sun.</div>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="lm-superthinglass" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="lens-material" data-id="lm-superthinglass" data-value="SuperThin Glass">
<label class="filters__item-label" for="lm-superthinglass">
SuperThin Glass
<span class="filters__item-count">
(6)
</span>
</label>
<div class="tooltip">When clarity is the priority, go with the best optics available.</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Fit
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--fit">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Fit</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fi-small" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-small" data-value="Small">
<label class="filters__item-label" for="fi-small">
Small
<span class="filters__item-count">
(3)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fi-medium" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-medium" data-value="Medium">
<label class="filters__item-label" for="fi-medium">
Medium
<span class="filters__item-count">
(5)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="fi-large" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="fit" data-id="fi-large" data-value="Large">
<label class="filters__item-label" for="fi-large">
Large
<span class="filters__item-count">
(1)
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Gender
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--gender">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Gender</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ge-men" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-men" data-value="Men">
<label class="filters__item-label" for="ge-men">
Men
<span class="filters__item-count">
(6)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ge-women" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="gender" data-id="ge-women" data-value="Women">
<label class="filters__item-label" for="ge-women">
Women
<span class="filters__item-count">
(9)
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="filters__category js-filters-category">
<button class="filters__category-button js-filters-category-button">
Lifestyle
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
<div class="filters__subcategory filters__subcategory--activity">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">Activity</h5>
<ul class="filters__items">
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-golf" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-golf" data-value="Golf">
<label class="filters__item-label" for="ac-golf">
Golf
<span class="filters__item-count">
(11)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-fish" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-fish" data-value="Fish">
<label class="filters__item-label" for="ac-fish">
Fish
<span class="filters__item-count">
(23)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-surf" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-surf" data-value="Surf">
<label class="filters__item-label" for="ac-surf">
Surf
<span class="filters__item-count">
(5)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-run" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-run" data-value="Run">
<label class="filters__item-label" for="ac-run">
Run
<span class="filters__item-count">
(8)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-drive" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-drive" data-value="Drive">
<label class="filters__item-label" for="ac-drive">
Drive
<span class="filters__item-count">
(13)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-hike" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-hike" data-value="Hike">
<label class="filters__item-label" for="ac-hike">
Hike
<span class="filters__item-count">
(21)
</span>
</label>
</li>
<li class="filters__item filters__item--checkbox filters__item--default">
<input type="checkbox" id="ac-tennis" class="checkbox checkbox--default filters__item-input js-filters-item-input" name="activity" data-id="ac-tennis" data-value="Tennis">
<label class="filters__item-label" for="ac-tennis">
Tennis
<span class="filters__item-count">
(34)
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="filters__submit-wrapper">
<button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
</div>
<div class="filters__reset-wrapper">
<button class="filters__reset js-filters-reset-button">Reset Filters</button>
</div>
<ul class="filters__angles">
<li class="filters__angle filters__angle--front">
<button class="filters__angle-button js-filters-angle-button js-filters-angle-button--active" data-id="front">
<img class="filters__angle-image" src="/assets/images/filter-front.png" alt="Front">
<span class="filters__angle-label">Front</span>
</button>
</li>
<li class="filters__angle filters__angle--angle">
<button class="filters__angle-button js-filters-angle-button" data-id="angle">
<img class="filters__angle-image" src="/assets/images/filter-angle.png" alt="Angle">
<span class="filters__angle-label">Angle</span>
</button>
</li>
<li class="filters__angle filters__angle--side">
<button class="filters__angle-button js-filters-angle-button" data-id="side">
<img class="filters__angle-image" src="/assets/images/filter-side.png" alt="Side">
<span class="filters__angle-label">Side</span>
</button>
</li>
</ul>
</div>
<div class="filters js-filters u-page-width-max-gutters">
<div class="filter-controls">
{{#unless excludeResultCount}}
<span class="filter-controls__result-summary">
<span class="filter__controls-result-count">14</span> Results
</span>
{{/unless}}
{{#if categories}}
<button class="filter-controls__button filter-controls__button--open js-filters-open-button">
<span class="filter-controls__icon filter-controls__icon--open">
{{render '@icons--filters'}}
</span>
<span class="filter-controls__label">Filter</span>
</button>
{{/if}}
{{#if prescription}}
<div class="filter-controls__prescription filter-controls__prescription--medium">
<input type="checkbox" id="filters-prescription" class="js-filters-prescription-control checkbox checkbox--default">
<label for="filters-prescription">{{prescription}}</label>
</div>
{{/if}}
{{#if sortOptions}}
<div class="filter-controls__sort-wrapper select-tooltip js-select-tooltip">
<button class="filter-controls__button filter-controls__button--sort js-select-tooltip-trigger">
<span class="filter-controls__label">Sort by</span>
<span class="filter-controls__icon">
{{render '@icons--sort'}}
</span>
</button>
<select class="js-select-tooltip-select">
{{#each sortOptions}}
<option value="{{id}}"{{#if default}} selected="selected"{{/if}}>{{label}}</option>
{{/each}}
</select>
<ul class="filter-controls__sort-tooltip tooltip js-select-tooltip-list">
{{#each sortOptions}}
<li class="js-select-tooltip-option{{#if default}} js-select-tooltip-option--active{{/if}}" data-value="{{id}}">{{label}}</li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
{{#if categories}}
<div class="filters__categories-wrapper js-filters-categories-wrapper">
<button class="filters__close-button js-filters-close-button">
{{render '@icons--arrow-left'}}
Close filters
</button>
<div class="js-selected-filter-close-icon">{{render '@icons--close-large'}}</div>
<ul class="filters__selected js-filters-selected"></ul>
{{#if prescription}}
<div class="filter-controls__prescription filter-controls__prescription--small">
<input type="checkbox" id="filters-prescription-small" class="js-filters-prescription-control checkbox checkbox--default">
<label for="filters-prescription-small">{{prescription}}</label>
</div>
{{/if}}
<ul class="filters__categories js-filters-categories">
{{#each categories}}
<li class="filters__category js-filters-category"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
<button class="filters__category-button js-filters-category-button">
{{label}}
{{#if subcategories}}
{{render '@icons--arrow-down'}}
{{render '@icons--close-large'}}
{{/if}}
</button>
{{#if subcategories}}
<div class="filters__subcategory-wrapper js-filters-subcategory-wrapper">
{{#each subcategories}}
<div class="filters__subcategory filters__subcategory--{{modifier}}">
<div class="filters__subcategory-inner">
<h5 class="filters__subcategory-label">{{label}}</h5>
<ul class="filters__items">
{{#each items}}
<li class="filters__item filters__item--{{input}} filters__item--{{variant}}">
<input type="{{input}}" id="{{id}}" class="{{input}} {{input}}--{{variant}} filters__item-input js-filters-item-input" name="{{../modifier}}" data-id="{{id}}" data-value="{{label}}"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
<label class="filters__item-label" for="{{id}}">
{{#if image}}
<img class="filters__item-image-default" src="{{image}}">
{{/if}}
{{#if imageSelected}}
<img class="filters__item-image-active" src="{{imageSelected}}">
{{/if}}
{{#if background}}
<span class="filters__item-alternate-fill" style="background: {{background}};{{#if border}}border: {{border}}{{/if}}"></span>
{{/if}}
{{label}}
{{#if count}}
<span class="filters__item-count">
({{count}})
</span>
{{/if}}
{{#if icon}}
{{render (dynamicVariant 'icons' icon)}}
{{/if}}
</label>
{{#if tooltip}}
{{> @tooltip value=tooltip }}
{{/if}}
</li>
{{/each}}
</ul>
</div>
</div>
{{/each}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
</div>
<div class="filters__submit-wrapper">
<button class="filters__submit button button--primary js-filters-submit-button">See Results (14)</button>
</div>
<div class="filters__reset-wrapper">
<button class="filters__reset js-filters-reset-button">Reset Filters</button>
</div>
{{/if}}
{{#if anglesLabel}}
<h3 class="filters__angles-label">{{anglesLabel}}</h3>
{{/if}}
{{#if angles}}
<ul class="filters__angles">
{{#each angles}}
<li class="filters__angle filters__angle--{{id}}">
<button class="filters__angle-button js-filters-angle-button{{#if enabledByDefault}} js-filters-angle-button--active{{/if}}" data-id="{{id}}">
<img class="filters__angle-image" src="/assets/images/filter-{{id}}.png" alt="{{label}}">
<span class="filters__angle-label">{{label}}</span>
</button>
</li>
{{/each}}
</ul>
{{/if}}
</div>
{
"pageCss": [
"products"
],
"categories": [
{
"label": "Frame",
"subcategories": [
{
"label": "Frame Style",
"modifier": "frame-style",
"items": [
{
"id": "fs-aviators",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_aviators_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_aviators_active.svg",
"label": "Aviators",
"count": "13"
},
{
"id": "fs-rectangular",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_rectangular_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_rectangular_active.svg",
"label": "Rectangular",
"count": "19"
},
{
"id": "fs-cateye",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_cat_eye_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_cat_eye_active.svg",
"label": "Cat Eye",
"count": "8"
},
{
"id": "fs-rimless",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_rimless_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_rimless_active.svg",
"label": "Rimless",
"count": "34"
},
{
"id": "fs-classic",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_classic_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_classic_active.svg",
"label": "Classic",
"count": "14"
},
{
"id": "fs-shield",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_shield_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_shield_active.svg",
"label": "Shield",
"count": "4"
},
{
"id": "fs-fashion",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_fashion_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_fashion_active.svg",
"label": "Fashion",
"count": "15"
},
{
"id": "fs-wrap",
"input": "checkbox",
"variant": "image",
"image": "/assets/images/frame-styles/sunglasses_wrap_default.svg",
"imageSelected": "/assets/images/frame-styles/sunglasses_wrap_active.svg",
"label": "Wrap",
"count": "19"
}
]
},
{
"label": "Frame Color",
"modifier": "frame-color",
"items": [
{
"id": "fc-black",
"input": "checkbox",
"variant": "alternate",
"background": "#303032",
"label": "Black",
"count": "2"
},
{
"id": "fc-brown",
"input": "checkbox",
"variant": "alternate",
"background": "#543a10",
"label": "Brown",
"count": "3"
},
{
"id": "fc-green",
"input": "checkbox",
"variant": "alternate",
"background": "#66da4a",
"label": "Green",
"count": "1"
},
{
"id": "fc-purple",
"input": "checkbox",
"variant": "alternate",
"background": "#8c46d2",
"label": "Purple",
"count": "2"
},
{
"id": "fc-blue",
"input": "checkbox",
"variant": "alternate",
"background": "#5353df",
"label": "Blue",
"count": "4"
},
{
"id": "fc-gold",
"input": "checkbox",
"variant": "alternate",
"background": "linear-gradient(to bottom, #f2e575 0%, #a59937 50%, #f2e575 100%)",
"label": "Gold",
"count": "3"
},
{
"id": "fc-grey",
"input": "checkbox",
"variant": "alternate",
"background": "#ccc",
"label": "Grey",
"count": "2"
},
{
"id": "fc-red",
"input": "checkbox",
"variant": "alternate",
"background": "#c81616",
"label": "Red",
"count": "1"
},
{
"id": "fc-silver",
"input": "checkbox",
"variant": "alternate",
"background": "linear-gradient(to bottom, #ffffff 0%, #c1bdbd 50%, #d5d5d5 100%)",
"label": "Silver",
"count": "4"
},
{
"id": "fc-white",
"input": "checkbox",
"variant": "alternate",
"background": "#fff",
"border": "1px solid #e2e2e2;",
"label": "White",
"count": "2"
},
{
"id": "fc-tortoise",
"input": "checkbox",
"variant": "alternate",
"background": "#303032",
"label": "Tortoise",
"count": "2"
},
{
"id": "fc-twotone",
"input": "checkbox",
"variant": "alternate",
"background": "linear-gradient(to bottom, #525252 50%, #cccccc 51%)",
"label": "Two-Tone",
"count": "2"
}
]
}
]
},
{
"label": "Lens",
"subcategories": [
{
"label": "Lens Color",
"modifier": "lens-color",
"items": [
{
"id": "lc-bluehawaii",
"input": "checkbox",
"variant": "alternate",
"background": "#297fbc",
"label": "Blue Hawaii",
"count": "1",
"tooltip": "Our blue mirror coating provides a stylish new look that offers the same amazing color enhancement and clarity as all other Maui Jim lenses."
},
{
"id": "lc-neutralgrey",
"input": "checkbox",
"variant": "alternate",
"background": "#535B54",
"label": "Neutral Grey",
"count": "3",
"tooltip": "Perfect for especially bright, direct sunlight. Offers rich color and contrast along with the highest available light production, unlike ordinary grey lenses that flatten light evenly across the spectrum."
},
{
"id": "lc-hclbronze",
"input": "checkbox",
"variant": "alternate",
"background": "#987858",
"label": "HCL® Bronze",
"count": "13",
"tooltip": "For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint."
},
{
"id": "lc-mauiht",
"input": "checkbox",
"variant": "alternate",
"background": "#798b57",
"label": "Maui HT™",
"count": "3",
"tooltip": "High Transmission lenses work hard when distance counts. With the highest usable light transmission, HT technology balances contrast and depth of field for crisper details during varying conditions."
},
{
"id": "lc-mauirose",
"input": "checkbox",
"variant": "alternate",
"background": "#9c5950",
"label": "Maui Rose®",
"count": "4",
"tooltip": "For everyday variable conditions, from full sun to overcast. The highest contrast available - excellent for fast moving sports. Provides a subtle rose tint."
}
]
},
{
"label": "Lens Size",
"modifier": "lens-size",
"items": [
{
"id": "ls-small",
"input": "checkbox",
"variant": "default",
"label": "Small",
"count": "3"
},
{
"id": "ls-medium",
"input": "checkbox",
"variant": "default",
"label": "Medium",
"count": "5"
}
]
}
]
},
{
"label": "Material",
"subcategories": [
{
"label": "Frame Material",
"modifier": "frame-material",
"items": [
{
"id": "fm-acetate",
"input": "checkbox",
"variant": "default",
"label": "Acetate",
"count": "3"
},
{
"id": "fm-metals",
"input": "checkbox",
"variant": "default",
"label": "Metals",
"count": "5",
"tooltip": "Extremely strong, corrosion-resistant alloy for long-lasting comfort."
},
{
"id": "fm-plastics",
"input": "checkbox",
"variant": "default",
"label": "Plastics",
"count": "3"
},
{
"id": "lc-titaniums",
"input": "checkbox",
"variant": "default",
"label": "Titaniums",
"count": "2",
"tooltip": "Pure titanium frames are lightweight, durable and comfortable."
}
]
},
{
"label": "Lens Material",
"modifier": "lens-material",
"items": [
{
"id": "lm-mauievolution",
"input": "checkbox",
"variant": "default",
"label": "Maui Evolution®",
"count": "1",
"tooltip": "When you need an everyday lens for your active life."
},
{
"id": "lm-mauipure",
"input": "checkbox",
"variant": "default",
"label": "MauiPure®",
"count": "2",
"tooltip": "The lightest weight choice for long days in the sun."
},
{
"id": "lm-superthinglass",
"input": "checkbox",
"variant": "default",
"label": "SuperThin Glass",
"count": "6",
"tooltip": "When clarity is the priority, go with the best optics available."
}
]
}
]
},
{
"label": "Fit",
"subcategories": [
{
"label": "Fit",
"modifier": "fit",
"items": [
{
"id": "fi-small",
"input": "checkbox",
"variant": "default",
"label": "Small",
"count": "3"
},
{
"id": "fi-medium",
"input": "checkbox",
"variant": "default",
"label": "Medium",
"count": "5"
},
{
"id": "fi-large",
"input": "checkbox",
"variant": "default",
"label": "Large",
"count": "1"
}
]
}
]
},
{
"label": "Gender",
"subcategories": [
{
"label": "Gender",
"modifier": "gender",
"items": [
{
"id": "ge-men",
"input": "checkbox",
"variant": "default",
"label": "Men",
"count": "6"
},
{
"id": "ge-women",
"input": "checkbox",
"variant": "default",
"label": "Women",
"count": "9"
}
]
}
]
},
{
"label": "Lifestyle",
"subcategories": [
{
"label": "Activity",
"modifier": "activity",
"items": [
{
"id": "ac-golf",
"input": "checkbox",
"variant": "default",
"label": "Golf",
"count": "11"
},
{
"id": "ac-fish",
"input": "checkbox",
"variant": "default",
"label": "Fish",
"count": "23"
},
{
"id": "ac-surf",
"input": "checkbox",
"variant": "default",
"label": "Surf",
"count": "5"
},
{
"id": "ac-run",
"input": "checkbox",
"variant": "default",
"label": "Run",
"count": "8"
},
{
"id": "ac-drive",
"input": "checkbox",
"variant": "default",
"label": "Drive",
"count": "13"
},
{
"id": "ac-hike",
"input": "checkbox",
"variant": "default",
"label": "Hike",
"count": "21"
},
{
"id": "ac-tennis",
"input": "checkbox",
"variant": "default",
"label": "Tennis",
"count": "34"
}
]
}
]
}
],
"prescription": "Available for prescription",
"sortOptions": [
{
"id": "new-arrivals",
"label": "New Arrivals",
"default": true
},
{
"id": "price-asc",
"label": "Price (low to high)"
},
{
"id": "price-dsc",
"label": "Price (high to low)"
},
{
"id": "name-asc",
"label": "Name (A-Z)"
},
{
"id": "name-dsc",
"label": "Name (Z-A)"
}
],
"angles": [
{
"id": "front",
"label": "Front",
"enabledByDefault": true
},
{
"id": "angle",
"label": "Angle",
"enabledByDefault": null
},
{
"id": "side",
"label": "Side",
"enabledByDefault": null
}
]
}
(function (window) {
'use strict';
const categoriesOpenClass = 'js-filters-categories-open';
const categoryOpenClass = 'js-filters-category-open';
const preventTransitionsClass = 'js-filters-prevent-transitions';
const activeFiltersClass = 'js-filters-active';
const activeAngleClass = 'js-filters-angle-button--active';
let filters = null;
let originalFilters = null;
let selectedFilters = null;
function openFiltersCategories(e) {
document.body.classList.add(categoriesOpenClass);
}
function closeFiltersCategories(e) {
const categories = filters.querySelectorAll('.js-filters-category');
for (let i = 0; i < categories.length; i++) {
categories[i].classList.remove(categoryOpenClass);
}
document.body.classList.remove(categoriesOpenClass);
}
function resetFilters(e) {
while (selectedFilters.firstChild) {
selectedFilters.firstChild.click();
}
filters.classList.remove(activeFiltersClass);
}
function toggleCategoryVisibility(e) {
const categoryWrapper = e.target.closest('.js-filters-category');
if (!categoryWrapper.classList.contains(categoryOpenClass)) {
openCategory(categoryWrapper);
}
else {
closeCategory(categoryWrapper);
}
}
function openCategory(categoryWrapperToOpen) {
const categoryWrappers = filters.querySelectorAll('.js-filters-category');
for (let i = 0; i < categoryWrappers.length; i++) {
const categoryWrapper = categoryWrappers[i];
if (categoryWrapper != categoryWrapperToOpen) {
closeCategory(categoryWrapper, true);
}
}
categoryWrapperToOpen.classList.add(categoryOpenClass);
// Wait for the open transition to finish before adding a class that
// prevents transitions when switching between categories.
if (!document.body.classList.contains(preventTransitionsClass)) {
categoryWrapperToOpen.addEventListener('transitionend', handleCategoryOpenTransitionend);
}
}
function closeCategory(categoryWrapperToClose, openingAnotherCategory) {
openingAnotherCategory = openingAnotherCategory || false;
categoryWrapperToClose.classList.remove(categoryOpenClass);
if (!openingAnotherCategory) {
document.body.classList.remove(preventTransitionsClass);
}
}
function handleCategoryOpenTransitionend(e) {
// All child events bubble up, so ensure this is the one we want to act on.
if (e.target.classList.contains('js-filters-subcategory-wrapper') && e.propertyName == 'opacity') {
document.body.classList.add(preventTransitionsClass);
e.target.closest('.js-filters-category').removeEventListener(e.type, handleCategoryOpenTransitionend);
}
}
function toggleFilter(e) {
if (e.target.checked) {
addFilter(e.target);
}
else {
removeFilter(e.target);
}
}
// Construct the element listed among the selected filters.
function addFilter(input) {
const filterId = input.getAttribute('data-id');
const filterValue = input.getAttribute('data-value');
const filterToggle = input.getAttribute('data-toggle');
const selectedFilter = document.createElement('li');
const selectedFilterIcon = document.querySelector('.js-selected-filter-close-icon').firstChild.cloneNode(true);
const selectedFilterContent = document.createTextNode(filterValue);
selectedFilter.appendChild(selectedFilterIcon);
selectedFilter.appendChild(selectedFilterContent);
selectedFilter.classList.add('js-filters-selected-filter');
selectedFilter.setAttribute('data-id', filterId);
selectedFilter.addEventListener('click', removeSelectedFilter);
// See toggleVisibility().
if (filterToggle) {
selectedFilter.setAttribute('data-toggle', filterToggle);
selectedFilter.setAttribute('data-toggled', true);
selectedFilter.addEventListener('click', toggleVisibility);
}
selectedFilters.appendChild(selectedFilter);
// Toggles visibility of the reset button.
filters.classList.add(activeFiltersClass);
}
function removeSelectedFilter(e) {
removeFilter(e.target);
}
// Remove the element listed among the selected filters, uncheck the original.
function removeFilter(input) {
const filterId = input.getAttribute('data-id');
const originalFilter = originalFilters.querySelector('[data-id="' + filterId + '"]');
const selectedFilter = selectedFilters.querySelector('[data-id="' + filterId + '"]');
if (originalFilter.checked) {
originalFilter.checked = false;
}
if (selectedFilter) {
selectedFilter.remove();
}
// Toggles visibility of the reset button.
if (!selectedFilters.firstChild) {
filters.classList.remove(activeFiltersClass);
}
}
// When a back/forward button is used, checkbox states are preserved but
// previous JS execution is not. So if a filter had been selected on a page
// navigated to via back/forward, it will appear selected in the dropdown but
// not elsewhere. The checkboxes need to be reset in that situation.
function resetFilterIfUnselected(input) {
if (input.checked) {
// This code is also called when Ajax replaces the filter markup as
// filters are changed, so we must check if the filter should actually be
// selected (if it has a corresponding item in the selected list) or not.
const selectedFilter = filters.querySelector(`.js-filters-selected-filter[data-id="${input.getAttribute('data-id')}"]`);
if (!selectedFilter) {
input.checked = false;
}
}
}
function switchAngle(e) {
const angleButton = e.target;
if (!angleButton.classList.contains(activeAngleClass)) {
const angleButtons = filters.querySelectorAll('.js-filters-angle-button');
for (let i = 0; i < angleButtons.length; i++) {
angleButtons[i].classList.remove(activeAngleClass);
}
angleButton.classList.add(activeAngleClass);
switchCardImageAngles(angleButton.getAttribute('data-id'));
}
}
function switchCardImageAngles(newAngleId) {
const cardImages = document.querySelectorAll('.js-card-image');
for (let i = 0; i < cardImages.length; i++) {
const cardImage = cardImages[i];
const currentVariantId = cardImage.getAttribute('data-variant');
const newImageAttribute = 'data-' + currentVariantId + '-' + newAngleId;
cardImage.setAttribute('src', cardImage.getAttribute(newImageAttribute));
cardImage.setAttribute('data-angle', newAngleId);
}
}
// Keeps multiple Prescription controls (needed for different placement at
// different screen sizes) in sync as either are toggled.
function togglePrescription(e) {
const prescriptionControls = filters.querySelectorAll('.js-filters-prescription-control');
for (let i = 0; i < prescriptionControls.length; i++) {
prescriptionControls[i].checked = e.target.checked;
}
}
// Handles visibility toggles within the filter interface in situations where
// the library controls it (secondary landing pages, for example, not PLPs).
// The code is relatively complex to support all necessary use cases.
// For this to work, the following attributes must be applied:
// - data-toggle="category" should be set on the clickable toggle, where
// `category` is the group of items this toggle.
// - data-toggle-exclusive="true" should be set when enabling a toggle should
// disable all previously enabled toggles.
// - data-toggled="true" is set within this code on toggle elements and should
// not be set server side unless a toggle is enabled on page load.
// - data-toggle-item="category multiple" should be set on the items whose
// visibility are affected by the toggles, where `category` should match the
// data-toggle value that controls it. Can have multiple values, separated
// by a space.
function toggleVisibility(e) {
const toggle = e.target.closest('[data-toggle]');
const category = toggle.getAttribute('data-toggle');
const allToggles = document.querySelectorAll('[data-toggle]');
const allItems = document.querySelectorAll(`[data-toggle-item]`);
let currentlyOn = [];
// Determine what was toggled on before the toggle in question was clicked.
for (let i = 0; i < allToggles.length; i++) {
if (allToggles[i].getAttribute('data-toggled')) {
const currentCategory = allToggles[i].getAttribute('data-toggle');
currentlyOn.push(currentCategory);
}
}
// Update that information with information about the toggle in question.
if (!toggle.getAttribute('data-toggled')) {
// Items with this attribute disable all previously enabled toggles.
if (toggle.getAttribute('data-toggle-exclusive')) {
currentlyOn = [];
}
currentlyOn.push(category);
}
else {
// Remove the previously-selected toggle from the list.
currentlyOn = currentlyOn.filter(e => e !== category);
}
// Update the toggles with the new information.
for (let i = 0; i < allToggles.length; i++) {
const currentCategory = allToggles[i].getAttribute('data-toggle');
if (currentlyOn.indexOf(currentCategory) !== -1) {
allToggles[i].setAttribute('data-toggled', true);
allToggles[i].checked = true;
}
else {
allToggles[i].removeAttribute('data-toggled');
allToggles[i].checked = false;
}
}
// Update the items with the new information.
for (let i = 0; i < allItems.length; i++) {
const currentCategories = allItems[i].getAttribute('data-toggle-item').split(' ');
let isOn = false;
// Supports multiple values separated by a space.
for (let j = 0; j < currentCategories.length; j++) {
if (currentlyOn.indexOf(currentCategories[j]) !== -1) {
isOn = true;
}
}
if (isOn || !currentlyOn.length) {
allItems[i].classList.remove('js-hidden');
}
else {
allItems[i].classList.add('js-hidden');
}
}
}
function init() {
filters = document.querySelector('.js-filters');
originalFilters = document.querySelector('.js-filters-categories');
selectedFilters = document.querySelector('.js-filters-selected');
if (filters && !filters.classList.contains('js-component-init')) {
const openFiltersButton = filters.querySelector('.js-filters-open-button');
const closeFiltersButton = filters.querySelector('.js-filters-close-button');
const submitFiltersButton = filters.querySelector('.js-filters-submit-button');
const resetFiltersButton = filters.querySelector('.js-filters-reset-button');
const categoryButtons = filters.querySelectorAll('.js-filters-category-button');
const itemInputs = filters.querySelectorAll('.js-filters-item-input');
const angleButtons = filters.querySelectorAll('.js-filters-angle-button');
const prescriptionControls = filters.querySelectorAll('.js-filters-prescription-control');
const visibilityToggles = filters.querySelectorAll('[data-toggle]');
if (openFiltersButton && closeFiltersButton) {
openFiltersButton.addEventListener('click', openFiltersCategories);
closeFiltersButton.addEventListener('click', closeFiltersCategories);
}
if (submitFiltersButton && resetFiltersButton) {
submitFiltersButton.addEventListener('click', closeFiltersCategories);
resetFiltersButton.addEventListener('click', resetFilters);
}
for (let i = 0; i < categoryButtons.length; i++) {
categoryButtons[i].addEventListener('click', toggleCategoryVisibility);
}
for (let i = 0; i < itemInputs.length; i++) {
itemInputs[i].addEventListener('change', toggleFilter);
resetFilterIfUnselected(itemInputs[i]);
}
for (let i = 0; i < angleButtons.length; i++) {
angleButtons[i].addEventListener('click', switchAngle);
}
for (let i = 0; i < prescriptionControls.length; i++) {
prescriptionControls[i].addEventListener('click', togglePrescription);
}
for (let i = 0; i < visibilityToggles.length; i++) {
visibilityToggles[i].addEventListener('click', toggleVisibility);
}
filters.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);
.filters {
position: relative;
@include breakpoint($breakpoint-md) {
margin: 0 $gutter-width-half;
}
}
.filter-controls {
height: 50px;
margin-top: 10px;
padding: 13px 10px;
background-color: $color-lighter;
text-align: center;
box-sizing: border-box;
@include breakpoint($breakpoint-md) {
margin-top: 0;
padding: 15px 0;
background-color: transparent;
}
}
.filter-controls__result-summary {
@include text-ui($color-dark);
position: absolute;
right: 0;
left: 0;
line-height: 2.8rem;
pointer-events: none;
@include breakpoint($breakpoint-md) {
line-height: 2.0rem;
}
}
.filter-controls__button {
@include reset-button;
@include text-label($color-darkest);
}
.filter-controls__button--open {
float: left;
@include breakpoint($breakpoint-md) {
display: none;
}
}
.filter-controls__icon {
display: inline-block;
vertical-align: middle;
fill: $color-medium-dark;
.filter-controls__button--open & { margin-right: 5px; }
.filter-controls__button--sort & { margin-left: 5px; }
}
.filter-controls__label {
display: inline-block;
vertical-align: middle;
.filter-controls__button[data-selected='true'] & {
font-weight: $font-weight-bold;
}
}
// Overrides select-tooltip defaults.
.filter-controls__sort-wrapper {
position: relative;
top: 3px;
width: 120px;
height: 100%;
float: right;
.filter-controls__button {
position: absolute;
top: 0;
right: 0;
}
.filter-controls__sort-tooltip {
top: calc(100% + 15px);
right: 0;
text-align: left;
&:before {
right: 50px;
left: auto;
}
}
@include breakpoint($breakpoint-md) {
top: 0;
&:hover .icon,
&.js-select-tooltip--open .icon {
fill: $color-primary;
}
&.js-select-tooltip--open .filter-controls__button {
color: $color-primary;
}
}
}
.filter-controls__prescription--small {
margin-bottom: 30px;
.checkbox {
background-color: transparent;
}
@include breakpoint($breakpoint-md) {
display: none;
}
}
.filter-controls__prescription--medium {
display: none;
float: left;
@include breakpoint($breakpoint-md) {
display: block;
}
}
.filter-controls__toggle-shape {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
margin-right: 5px;
border: 1px solid $color-medium-dark;
vertical-align: middle;
box-sizing: border-box;
.filter-controls__button[data-selected='true'] &:after {
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
background-color: $color-primary;
content: '';
}
}
.filters__categories-wrapper {
position: relative;
@include breakpoint($breakpoint-sm-only) {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 70px;
left: 0;
padding: 20px;
background-color: $color-lighter;
overflow: scroll;
z-index: 50;
box-sizing: border-box;
.js-filters-categories-open & {
display: block;
}
}
@include breakpoint($breakpoint-md) {
display: flex;
flex-direction: column;
margin: 0 (-1 * $gutter-width-half);
}
@include breakpoint($breakpoint-xl) {
margin: 0;
}
}
.filters__close-button {
@include reset-button;
@include text-ui($color-dark);
position: relative;
left: -20px;
margin-bottom: 30px;
padding: 8px 10px;
border-radius: 0 10px 10px 0;
background-color: $color-white;
text-transform: uppercase;
cursor: pointer;
.icon {
margin: 0 5px;
}
@include breakpoint($breakpoint-md) {
display: none;
}
}
// Used when generating selected filter elements.
.js-selected-filter-close-icon {
display: none;
}
.filters__selected {
margin: 10px 0 0;
padding: 10px 0 0;
list-style-type: none;
&:empty {
display: none;
}
&:not(:empty) {
border-top: 1px solid $color-light;
}
.icon {
pointer-events: none;
}
@include breakpoint($breakpoint-sm-only) {
.icon {
width: 9px;
height: 9px;
margin-right: 5px;
fill: $color-error;
}
}
@include breakpoint($breakpoint-md) {
@include span(10);
order: 1;
margin: 0;
&:not(:empty) {
border-top: 0;
}
.icon {
position: relative;
top: 1px;
width: 12px;
height: 12px;
margin-right: 10px;
}
.js-filters-selected-filter:hover .icon {
fill: $color-error;
}
}
@include breakpoint($breakpoint-xl) {
@include span(8);
@include push(2);
text-align: center;
}
}
.js-filters-selected-filter {
@include text-label;
display: inline-block;
margin-bottom: 15px;
cursor: pointer;
@include breakpoint($breakpoint-sm-only) {
margin-right: 5px;
padding: 7px 15px 5px;
border-radius: 30px;
background-color: $color-white;
}
@include breakpoint($breakpoint-md) {
margin-right: 20px;
}
}
.filters__categories {
@include reset-list;
@include breakpoint($breakpoint-sm-only) {
border-top: 1px solid $color-light;
}
@include breakpoint($breakpoint-md) {
position: relative;
background-color: $filters-background-color-md;
font-size: 0;
text-align: center;
}
}
.filters__category {
@include breakpoint($breakpoint-md) {
display: inline-block;
&.js-filters-category-open {
background-color: $color-white;
}
}
}
.filters__category-button {
@include reset-button;
display: block;
position: relative;
width: 100%;
padding: 15px 0 10px;
border-bottom: 1px solid $color-light;
color: $color-darkest;
font-size: 1.9rem;
text-align: left;
box-sizing: border-box;
.icon {
position: absolute;
right: 0;
pointer-events: none;
}
.icon--arrow-down {
top: 25px;
.js-filters-category-open & {
display: none;
}
}
.icon--close-large {
display: none;
top: 20px;
width: 12px;
height: 12px;
.js-filters-category-open & {
display: block;
}
}
@include breakpoint($breakpoint-md) {
@include text-ui($color-dark);
padding: 2px 15px 0;
border-bottom: 0;
line-height: 48px;
text-transform: uppercase;
.filters__category:not([data-toggle]) & {
padding-right: 30px;
}
.icon {
right: 10px;
}
.icon--arrow-down {
top: 23px;
}
.icon--close-large {
top: 19px;
}
}
@include breakpoint($breakpoint-xl) {
.filters__category:not([data-toggle]) & {
padding-right: 50px;
.icon {
right: 20px;
}
}
}
}
.filters__subcategory-wrapper {
display: none;
margin: 0 -20px;
padding: 2px 20px 10px;
background-color: $color-white;
.js-filters-category-open & {
display: block;
}
@include breakpoint($breakpoint-md) {
display: block;
position: absolute;
right: 20px;
left: 20px;
padding: 0 0 10px;
transition: visibility .2s ease 0s, opacity .2s ease 0s;
border-bottom: 1px solid $color-light;
text-align: left;
box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .1);
// Fade in/out on open/close.
opacity: 0;
visibility: hidden;
z-index: 5;
.js-filters-category-open & {
opacity: 1;
visibility: visible;
}
.js-filters-prevent-transitions & {
transition: none 0s ease 0s;
}
}
}
.filters__subcategory {
@include breakpoint($breakpoint-xl) {
margin: 0 (-1 * $gutter-width-half);
}
}
.filters__subcategory-inner {
@include breakpoint($breakpoint-xl) {
@include span(8);
@include push(2);
padding: 0;
}
}
.filters__subcategory-label {
margin: 20px 0 15px;
text-transform: uppercase;
@include breakpoint($breakpoint-md) {
@include span(12);
margin-top: 30px;
font-size: 1.9rem;
font-weight: $font-weight-normal;
letter-spacing: 3px;
text-transform: none;
}
}
.filters__items {
@include reset-list;
@include clearfix;
margin-top: 10px;
}
.filters__item {
position: relative;
margin-bottom: 15px;
.tooltip {
display: none;
}
@include breakpoint($breakpoint-sm-only) {
width: 50%;
float: left;
.filters__subcategory--frame-style &,
.filters__subcategory--lens-color &,
.filters__subcategory--lens-material &,
.filters__subcategory--conditions & {
width: 100%;
float: none;
}
}
@include breakpoint($breakpoint-md) {
@include span(3);
float: left;
.filters__subcategory--frame-style &,
.filters__subcategory--lens-size &,
.filters__subcategory--conditions & {
@include span(4);
}
.filters__subcategory--lens-color & {
@include span($filters-lens-color-col-span-md);
}
&.filters__item--alternate {
position: relative;
left: -5px;
}
&:hover .tooltip {
display: block;
position: absolute;
top: 40px;
}
}
@include breakpoint($page-width-max) {
.filters__subcategory--frame-style & {
@include span(3);
}
.filters__subcategory--frame-color & {
@include span($filters-frame-color-col-span-max);
}
.filters__subcategory--lens-color & {
@include span($filters-lens-color-col-span-max);
}
.filters__subcategory--lens-size & {
@include span(3);
}
}
}
.filters__item-label {
@include text-label($color-darkest);
width: 100%;
margin-bottom: 3px;
vertical-align: middle;
.filters__subcategory--lens-color & {
&:before,
&:after,
.filters__item-alternate-fill {
border-radius: 50%;
}
}
.icon {
top: -2px !important;
padding-left: 6px !important;
}
}
.filters__item-input:checked + .filters__item-label {
color: $color-darkest;
font-weight: $font-weight-bold;
}
.filters__item-input.checkbox--image + .filters__item-label:after {
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
border: 2px solid $color-medium-light;
content: '';
pointer-events: none;
.filters__subcategory--frame-style & {
transform: none;
}
}
.filters__item-input.checkbox--image:checked + .filters__item-label:after {
border: 2px solid $color-primary;
}
.filters__item-input.checkbox--image:checked + .filters__item-label {
.filters__item-image-default {
display: none;
}
.filters__item-image-active {
display: inline-block;
width: 79px;
height: 30px;
margin-right: 5px;
vertical-align: middle;
}
}
// This element must be used for dynamic background colors since inline styles
// can't affect pseudo elements.
.filters__item-alternate-fill {
position: absolute;
top: 50%;
left: 5px;
width: 20px;
height: 20px;
transform: translateY(-50%);
box-sizing: border-box;
.filters__item--radio & {
border-radius: 50%;
}
}
.filters__item-image-default {
display: inline-block;
width: 79px;
height: 30px;
margin-right: 5px;
vertical-align: middle;
}
.filters__item-image-active {
display: none;
}
.filters__item--image {
min-height: 35px;
}
.filters__submit-wrapper {
display: none;
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 70px;
padding: 10px;
background-color: $color-lighter;
z-index: 50;
box-sizing: border-box;
.js-filters-categories-open & {
display: block;
}
@include breakpoint($breakpoint-md) {
display: none !important;
}
}
.filters__submit {
width: 100%;
cursor: pointer;
}
.filters__reset-wrapper {
display: none;
position: absolute;
top: 100px;
right: 10px;
padding-top: 15px;
z-index: 2;
.l-secondary-filters & {
top: 50px;
}
@include breakpoint($breakpoint-md) {
.js-filters-active & {
display: block;
}
}
}
.filters__reset {
@include reset-button;
@include text-ui($color-error);
}
.filters__angles-label {
margin: 25px 0 0;
color: $color-dark;
font-size: 1.4rem;
font-weight: $font-weight-bold;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
@include breakpoint($breakpoint-md) {
margin-bottom: -10px;
}
}
.filters__angles {
@include reset-list;
margin-top: 10px;
text-align: center;
@include breakpoint($breakpoint-md) {
margin-top: 23px;
}
}
.filters__angle {
display: inline-block;
margin: 0 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
@include breakpoint($breakpoint-md) {
margin: 0 20px;
}
}
.filters__angle-button {
@include reset-button;
}
.filters__angle-image {
transition: opacity $transition-standard;
opacity: .5;
pointer-events: none;
.filters__angle-button:hover &,
.js-filters-angle-button--active & {
opacity: 1;
}
@include breakpoint($breakpoint-sm-only) {
width: 50px;
}
}
.filters__angle-label {
transition: opacity $transition-standard;
color: $color-darkest;
font-size: 1.4rem;
letter-spacing: 1px;
line-height: 2.0rem;
opacity: 0;
pointer-events: none;
.filters__angle-button:hover &,
.js-filters-angle-button--active & {
opacity: 1;
}
}
There are no notes for this item.