<div class="shopping-cart js-shopping-cart">
    <h1 class="shopping-cart__title">Your Cart</h1>
    <table class="shopping-cart__items">
        <thead class="shopping-cart__items-header">
            <tr class="shopping-cart__items-header-row">
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--image">Image</td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--items">Product Information</td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--qty">Quantity</td>
                <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--total">Total</td>
            </tr>
        </thead>
        <tbody class="shopping-cart__items-body">
            <tr class="shopping-cart__item ">
                <td class="shopping-cart__item-image-col">
                    <a href="#202-02"><img class="shopping-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225" alt="Gloss Black"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">PEAHI</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Gloss Black</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> Neutral Grey</span>
                    <span class="shopping-cart__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="shopping-cart__item-info"><strong>Gradient:</strong> Single Gradient</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> 202-02</span>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <label for="" class="label">
    
    <select id="" name="shopping-cart-qty" class="select js-select">
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
      <option value="4" >4</option>
      <option value="5" >5</option>
    </select>
    </label>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <div class="shopping-cart__item-vip-info">
                        <span class="shopping-cart__item-vip-card-value"> </span>
                        <span class="shopping-cart__item-vip-original-price"></span>
                    </div>
                    <span class="shopping-cart__item-price">$149.00</span>
                    <span class="shopping-cart__item-tax">Inkl. MWST</span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item ">
                <td class="shopping-cart__item-image-col">
                    <a href="#HTS267-15C"><img class="shopping-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225" alt="Olive Stripe"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">WATERWAYS</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Olive Stripe</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> Maui HT™</span>
                    <span class="shopping-cart__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="shopping-cart__item-info"><strong>Gradient:</strong> Single Gradient</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> HTS267-15C</span>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <label for="" class="label">
    
    <select id="" name="shopping-cart-qty" class="select js-select">
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
      <option value="4" >4</option>
      <option value="5" >5</option>
    </select>
    </label>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <div class="shopping-cart__item-vip-info">
                        <span class="shopping-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="shopping-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="shopping-cart__item-price">$219.00</span>
                    <span class="shopping-cart__item-tax">Inkl. MWST</span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item ">
                <td class="shopping-cart__item-image-col">
                    <a href="#H257-16C"><img class="shopping-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225" alt="Tortoise with Antique Gold"></a>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">KAWIKA</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                    <span class="shopping-cart__item-info"><strong>Lens Material:</strong> MauiPure</span>
                    <span class="shopping-cart__item-info"><strong>Gradient:</strong> Single Gradient</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> H257-16C</span>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <label for="" class="label">
    
    <select id="" name="shopping-cart-qty" class="select js-select">
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
      <option value="4" >4</option>
      <option value="5" >5</option>
    </select>
    </label>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <div class="shopping-cart__item-vip-info">
                        <span class="shopping-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="shopping-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="shopping-cart__item-price">$299.00</span>
                    <span class="shopping-cart__item-tax"></span>
                    <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
                </td>
            </tr>
            <tr class="shopping-cart__item shopping-cart__item--extra shopping-cart__item--gift-bag js-shopping-cart-item-gift-bag">
                <td colspan="2">
                    <div class="shopping-cart__item-toggle">
                        <div class="form-item form-item--checkbox">
                            <input type="checkbox" id="shopping-cart-gift-bag" name="gift-bag" class="checkbox checkbox--default">
                            <label for="shopping-cart-gift-bag">
                Add Gift Bag
                <svg class="icon icon--gift-bag">
  <use xlink:href="/assets/icons/icons.svg#gift-bag"></use>
</svg>

              </label>
                        </div>
                    </div>
                </td>
                <td class="shopping-cart__item-qty-col">
                    <div class="shopping-cart__item-qty">
                        <div class="form-item form-item--select">
                            <div class="select-wrapper">
                                <label for="shopping-cart-gift-bag" class="label">
    
    <select id="shopping-cart-gift-bag" name="shopping-cart-gift-bag" class="select js-select">
      <option value="1" >1</option>
      <option value="2" >2</option>
      <option value="3" >3</option>
    </select>
    </label>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$3.99</span>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="shopping-cart__items-subtotal">
        <tfoot>
            <tr>
                <td class="shopping-cart__items-footer-cell" colspan="2">
                </td>
                <td class="shopping-cart__items-footer-cell" colspan="2">
                    <ul class="shopping-cart__totals">
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">
                Order Subtotal (4)
              </span>
                            <span class="shopping-cart__totals-value">
                  $1096.00
              </span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">
                Estimated Tax*
              </span>
                            <span class="shopping-cart__totals-value">
                  TBD
              </span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label">
                Shipping*
              </span>
                            <span class="shopping-cart__totals-value">
                  TBD
              </span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label shopping-cart__totals-label--tbd">
                * Calculated at Checkout
              </span>
                        </li>
                    </ul>
                </td>
            </tr>
        </tfoot>
    </table>
    <button class="gift-card-form-toggle js-shopping-cart-item-gift-card" type="button" aria-expanded="false">Have a Gift Card or VIP Card?</button>
    <form class="gift-card-apply-form js-gift-card-apply-form" aria-hidden="true">
        <div class="gift-card-apply-form__item gift-card-apply-form__item--number">
            <div class="form-item form-item--text form-item--gift-card-apply-gift-card-number form-item--error">
                <label for="gift-card-apply-gift-card-number" class="label label--text">
  Card Number
  <input type="text"  name="gift-card-number" class="input input--text" >
  </label>
                <span class="input-error">VIP or Gift Card number is required</span>
            </div>

        </div>
        <div class="gift-card-apply-form__item gift-card-apply-form__item--pin">
            <div class="form-item form-item--text form-item--gift-card-apply-gift-card-pin form-item--error">
                <label for="gift-card-apply-gift-card-pin" class="label label--text">
  Pin
  <input type="text"  name="gift-card-pin" class="input input--text" >
  </label>
                <span class="input-error">Pin is required</span>
            </div>

        </div>
        <div class="gift-card-apply-form__submit">
            <button class="button button--outlined">Apply</button>

        </div>
    </form>
    <table class="shopping-cart__items-footer">
        <tr>
            <td class="shopping-cart__items-footer-cell" colspan="2">
                <ul class="shopping-cart__totals">
                    <li class="shopping-cart__totals-item">
                        <span class="shopping-cart__totals-label">Order Subtotal (4):</span>
                        <span class="shopping-cart__totals-value">
              $1096.00
          </span>
                    </li>
                    <li class="shopping-cart__totals-item">
                        <span class="shopping-cart__totals-label">Estimated Tax*:</span>
                        <span class="shopping-cart__totals-value">
              TBD
          </span>
                    </li>
                    <li class="shopping-cart__totals-item">
                        <span class="shopping-cart__totals-label">Shipping*:</span>
                        <span class="shopping-cart__totals-value">
              TBD
          </span>
                    </li>
                    <li class="shopping-cart__totals-item">
                        <span class="shopping-cart__totals-label shopping-cart__totals-label--tbd">* Calculated at Checkout</span>
                    </li>
                    <li class="shopping-cart__totals-item shopping-cart__totals-item--total">
                        <span class="shopping-cart__totals-label">Total:</span>
                        <span class="shopping-cart__totals-value">$799.99</span>
                    </li>
                </ul>
                <div class="shopping-cart__totals-item__checkout">
                    <button class="button button--primary shopping-cart__checkout">Checkout</button>
                    <div class="shopping-cart__applied-gift">
                        <div class="shopping-cart__applied-gift-item">
                            <form class="shopping-cart__applied-gift-info">
                                <span class="shopping-cart__applied-gift-info-label">VIP Card Applied: </span>
                                <span class="shopping-cart__applied-gift-info-value">12345678901234567890</span>
                                <button class="button button--plain-text">Remove</button>

                            </form>
                        </div>
                        <div class="shopping-cart__applied-gift-item">
                            <form class="shopping-cart__applied-gift-info">
                                <span class="shopping-cart__applied-gift-info-label">Gift Card Applied: </span>
                                <span class="shopping-cart__applied-gift-info-value">12345678901234567890</span>
                                <button class="button button--plain-text">Remove</button>

                            </form>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

</div>
<div class="shopping-cart js-shopping-cart">
  {{#if title}}
    {{#if secondaryHeader}}
    <h2 class="shopping-cart__title shopping-cart__title--secondary">{{title}}</h2>
    {{else}}
    <h1 class="shopping-cart__title">{{title}}</h1>
    {{/if}}
  {{/if}}
  {{#if products}}
  <table class="shopping-cart__items">
    <thead class="shopping-cart__items-header">
      <tr class="shopping-cart__items-header-row">
        {{#if groupingTitle}}
        <td class="shopping-cart__items-header-cell">{{groupingTitle}}</td>
        {{else}}
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--image">Image</td>
        {{/if}}
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--items">Product Information</td>
        {{# if showPriceCol}}
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--price">Price</td>
        {{/if}}
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--qty">Quantity</td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--total">Total</td>
      </tr>
    </thead>
    <tbody class="shopping-cart__items-body">
      {{#each products}}
      <tr class="shopping-cart__item {{#if individualShipping}}shopping-cart__item--with-shipping{{/if}}">
        <td class="shopping-cart__item-image-col">
          <a href="{{variants.0.url}}"><img class="shopping-cart__item-image" src="{{productImage variants.0.images.front 225}}" alt="{{variants.0.name}}"></a>
          {{#ifor ../showEditBtn ../showDelBtn showViewBtn showPrintBtn}}
          <div class="shopping-cart__item-control-row">
            {{#if ../showEditBtn}}
            <button class="shopping-cart__item-control shopping-cart__item-control--edit">
              <span class="u-visually-hidden">Edit</span>
            </button>
            {{/if}}
            {{#if ../showDelBtn}}
            <button class="shopping-cart__item-control shopping-cart__item-control--delete">
              <span class="u-visually-hidden">Delete</span>
            </button>
            {{/if}}
            {{#if showViewBtn}}
            <button class="shopping-cart__item-control shopping-cart__item-control--view">
              <span class="u-visually-hidden">View</span>
            </button>
            {{/if}}
            {{#if showPrintBtn}}
            <button class="shopping-cart__item-control shopping-cart__item-control--print">
              <span class="u-visually-hidden">Print</span>
            </button>
            {{/if}}
          </div>
          {{/ifor}}
          {{#if backordered}}
          {{render '@alert-block--error-badge'}}
          {{/if}}
        </td>
        <td class="shopping-cart__item-info-col">
          <span class="shopping-cart__item-name">{{name}}</span>
          <span class="shopping-cart__item-info"><strong>Frame:</strong> {{variants.0.name}}</span>
          <span class="shopping-cart__item-info"><strong>Lens:</strong> {{variants.0.lens}}</span>
          {{#if ../showAllInfo}}
          <span class="shopping-cart__item-info"><strong>Lens Material:</strong> {{variants.0.lensMaterial}}</span>
          <span class="shopping-cart__item-info"><strong>Gradient:</strong> Single Gradient</span>
          {{/if}}
          <span class="shopping-cart__item-info"><strong>SKU:</strong> {{variants.0.id}}</span>
          {{#with rxData}}
          <br>
          <div aria-hidden="true" class="shopping-cart__item-rx js-shopping-cart-rx">
            <ul class="shopping-cart__item-rx-list js-shopping-cart-rx-list" aria-label="General Prescription Information">
              <li class="shopping-cart__item-info"><strong>ORDER REFERENCE OR PATIENT NAME:</strong> {{orderRef}}</li>
              <li class="shopping-cart__item-info"><strong>PRESCRIPTION TYPE:</strong> {{rxType}}</li>
              <li class="shopping-cart__item-info"><strong>Corridor:</strong> {{corridor}}</li>
            </ul>
            <span class="shopping-cart__item-info">Right Eye:</span>
            <ul class="shopping-cart__item-rx-list js-shopping-cart-rx-list" aria-label="Right Eye Prescription">
            {{#each right}}
              <li class="shopping-cart__item-info"><strong>{{camelCaseToTitle @key}}:</strong> {{this}}</li>
            {{/each}}
            </ul>
            <span class="shopping-cart__item-info">Left Eye:</span>
            <ul class="shopping-cart__item-rx-list js-shopping-cart-rx-list" aria-label="Left Eye Prescription">
            {{#each left}}
              <li class="shopping-cart__item-info"><strong>{{camelCaseToTitle @key}}:</strong> {{this}}</li>
            {{/each}}
            </ul>
          </div>
          <button class="button button--plain-text rx-toggle js-shopping-cart-rx-toggle" type="button" aria-expanded="false">Show prescription details</button>
          {{/with}}
          {{#if promo}}
          {{> @alert-block modifier="success" badge="promo" text="This product qualifies for 50% off promotion! Discounted pricing will be reflected on your invoice." }}
          {{/if}}
        </td>
        {{#if ../showPriceCol}}
        <td class="shopping-cart__item-price-col">
          {{#if ../noPricing}}
            <button class="shopping-cart__no-pricing-button js-tooltip-open-link">
              {{render '@icons--invoice'}}
            </button>
            <div class="tooltip">Check invoice for final pricing.</div>
          {{else}}
            <span class="shopping-cart__item-price">{{variants.0.price}}</span>
          {{/if}}
        </td>
        {{/if}}
        <td class="shopping-cart__item-qty-col">
          {{#if ../quantity}}
          <div class="shopping-cart__item-qty">
            {{render '@select-normal' ../quantity}}
          </div>
          {{else}}
          <div class="shopping-cart__item-qty--preselected">
            <span>1</span>
          </div>
          {{/if}}
        </td>
        <td class="shopping-cart__item-total-col">
          {{#if ../noPricing}}
            -
          {{else}}
            {{#if ../showVip}}
            <div class="shopping-cart__item-vip-info">
              <span class="shopping-cart__item-vip-card-value">{{#if vip}}VIP Card{{/if}} {{vip.cardValue}}</span>
              <span class="shopping-cart__item-vip-original-price">{{vip.originalPrice}}</span>
            </div>
            {{/if}}
            <span class="shopping-cart__item-price">{{variants.0.price}}</span>
            {{#if ../showTaxInfo}}
            <span class="shopping-cart__item-tax">{{tax}}</span>
            {{/if}}
            {{#if ../showRemoveBtn}}
            <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
            {{/if}}
          {{/if}}
        </td>
      </tr>
      {{#with individualShipping}}
        <tr class="shopping-cart__item shipping-row">
          <td class="shipping-row__info-col">
            {{#each addresses}}
              {{render (dynamicComponent component) componentContext merge=true}}
            {{/each}}
          </td>
          <td class="shipping-row__info-col js-shipping-method-cell">
            {{#each methods}}
              {{render (dynamicComponent component) componentContext merge=true}}
              {{#unless componentContext.preSelected}}
                <button class="button button--plain-text shipping-price-toggle js-shipping-price-toggle" aria-hidden="true">
                  Show Shipping Prices
                </button>
              {{/unless}}
            {{/each}}
          </td>
          <td class="shipping-row__info-col shipping-row__item-shipping-price js-shipping-price-cell">
            <span class="js-shipping-price-placeholder">-</span>
            <span class="js-shipping-price-value" aria-hidden="true">$16.00</span>
          </td>
          <td colspan="2"></td>
        </tr>
      {{/with}}
      {{/each}}
      {{#if giftBag}}
      <tr class="shopping-cart__item shopping-cart__item--extra shopping-cart__item--gift-bag js-shopping-cart-item-gift-bag">
        <td colspan="2">
          <div class="shopping-cart__item-toggle">
            {{> @checkbox modifier="default" id="shopping-cart-gift-bag" name="gift-bag" label="Add Gift Bag" labelIcon="gift-bag"}}
          </div>
        </td>
        <td class="shopping-cart__item-qty-col">
          <div class="shopping-cart__item-qty">
            {{render '@select-normal' giftBag.quantity}}
          </div>
        </td>
        <td class="shopping-cart__item-price-col">
          <span class="shopping-cart__item-price">{{giftBag.price}}</span>
        </td>
      </tr>
      {{/if}}
      {{#with shipping}}
        <tr class="shopping-cart__item shopping-cart__item-shipping-row">
          <td class="shipping-row__info-col">
            {{#each addresses}}
              {{render (dynamicComponent component) componentContext merge=true}}
            {{/each}}
          </td>
          <td class="shipping-row__info-col js-shipping-method-cell">
            {{#each methods}}
              {{render (dynamicComponent component) componentContext merge=true}}
              {{#unless componentContext.preSelected}}
                <button class="button button--plain-text shipping-price-toggle js-shipping-price-toggle" aria-hidden="true">
                  Show Shipping Prices
                </button>
              {{/unless}}
            {{/each}}
          </td>
          <td class="shipping-row__info-col shipping-row__item-shipping-price js-shipping-price-cell">
            {{#unless methods.[0].componentContext.preSelected}}
              <span class="js-shipping-price-placeholder">-</span>
              <span class="js-shipping-price-value" aria-hidden="true">$16.00</span>
            {{else}}
              $16.00
            {{/unless}}
          </td>
          <td colspan="2"></td>
        </tr>
      {{/with}}
    </tbody>
  </table>
  {{#if totals}}
  <table class="shopping-cart__items-subtotal">
    <tfoot>
      <tr>
        <td class="shopping-cart__items-footer-cell" colspan="2">
        </td>
        <td class="shopping-cart__items-footer-cell" colspan="2">
          <ul class="shopping-cart__totals">
            {{#each totals}}
            <li class="shopping-cart__totals-item">
              <span class="shopping-cart__totals-label{{#if modifier}} shopping-cart__totals-label--{{modifier}}{{/if}}">
                {{label}}
              </span>
              {{#if value}}
              <span class="shopping-cart__totals-value{{#if modifier}} shopping-cart__totals-value--{{modifier}}{{/if}}">
                {{#if (equals modifier 'shipping')}}
                  <span class="js-shipping-price-placeholder">-</span>
                  <span class="js-shipping-price-value" aria-hidden="true">{{value}}</span>
                {{else}}
                  {{value}}
                {{/if}}
              </span>
              {{/if}}
            </li>
            {{/each}}
          </ul>
        </td>
      </tr>
    </tfoot>
  </table>
  {{/if}}
  {{#if giftCard}}
  <button class="gift-card-form-toggle js-shopping-cart-item-gift-card" type="button" aria-expanded="false">Have a Gift Card or VIP Card?</button>
  <form class="gift-card-apply-form js-gift-card-apply-form" aria-hidden="true">
    <div class="gift-card-apply-form__item gift-card-apply-form__item--number">
      {{render '@input' giftCard.number}}
    </div>
    <div class="gift-card-apply-form__item gift-card-apply-form__item--pin">
      {{render '@input' giftCard.pin}}
    </div>
    <div class="gift-card-apply-form__submit">
      {{render '@buttons' giftCard.submit}}
    </div>
  </form>
  {{/if}}
  {{#if shoppingCartForms}}
  {{render (dynamicComponent shoppingCartForms)}}
  {{/if}}
  {{else}}
  <div class="shopping-cart__empty">
    <img class="shopping-cart__empty-brand-logo" src="{{empty.brandLogo}}">
    <span class="shopping-cart__empty-label">{{empty.label}}</span>
    <a class="shopping-cart__empty-button button button--primary">{{empty.buttonValue}}</a>
  </div>
  {{/if}}
</div>
{
  "pageCss": [
    "checkout"
  ],
  "showAllInfo": true,
  "title": "Your Cart",
  "showGroupingTitle": null,
  "showVip": true,
  "showTaxInfo": true,
  "showRemoveBtn": true,
  "products": [
    {
      "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-full",
        "star-full",
        "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,
          "prescription": "true",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "202-02",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "B202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$189.00",
          "salePrice": "$219.00",
          "url": "#B202-2M",
          "status": null,
          "prescription": "true",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-10",
          "name": "Dark Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-10",
          "status": "New",
          "prescription": "true",
          "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,
          "prescription": "true",
          "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",
          "prescription": "true",
          "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,
          "prescription": "false",
          "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": "New",
          "prescription": "true",
          "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",
          "prescription": "true",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71-2",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71-2",
          "status": null,
          "prescription": "true",
          "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": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": true,
      "prescription": true
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-half",
        "star-empty",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "HTS267-15C",
          "name": "Olive Stripe",
          "color": "#808000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Retail Location",
          "purchaseLocation": "Sunglass Hut",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#HTS267-15C",
          "status": "New",
          "prescription": "true",
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HTS267-15C",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS267-10M",
          "name": "Matte Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_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": "#HS267-10M",
          "status": "New",
          "prescription": "true",
          "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": "HS267-10M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS267-02MR",
          "name": "Matte Black Rubber",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$239.00",
          "salePrice": null,
          "url": "#GS267-02MR",
          "status": "New",
          "prescription": "true",
          "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": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": null,
      "prescription": null
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": null,
      "variants": [
        {
          "id": "H257-16C",
          "name": "Tortoise with Antique Gold",
          "color": "#e0d468",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "MauiJim.com",
          "purchaseLocation": "W0101010101010",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#H257-16C",
          "status": "New",
          "prescription": "true",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "H257-16C",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "B257-05CR",
          "name": "Crystal",
          "color": "#fff; border: 1px solid #dedede",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B257-05CR",
          "status": null,
          "prescription": "true",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "B257-05CR",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "257-17C",
          "name": "Black Gloss with Antique Pewter",
          "color": "#808080",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#257-17C",
          "status": null,
          "prescription": "true",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "257-17C",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": true,
      "prescription": null
    }
  ],
  "quantity": {
    "name": "shopping-cart-qty",
    "label": null,
    "required": null,
    "options": [
      {
        "label": "1",
        "value": "1"
      },
      {
        "label": "2",
        "value": "2"
      },
      {
        "label": "3",
        "value": "3"
      },
      {
        "label": "4",
        "value": "4"
      },
      {
        "label": "5",
        "value": "5"
      }
    ]
  },
  "giftBag": {
    "quantity": {
      "id": "shopping-cart-gift-bag",
      "name": "shopping-cart-gift-bag",
      "label": null,
      "required": null,
      "options": [
        {
          "label": "1",
          "value": "1"
        },
        {
          "label": "2",
          "value": "2"
        },
        {
          "label": "3",
          "value": "3"
        }
      ]
    },
    "price": "$3.99"
  },
  "giftCard": {
    "title": "Have a Gift Card, VIP or Choice Card?",
    "number": {
      "type": "text",
      "id": "gift-card-apply-gift-card-number",
      "name": "gift-card-number",
      "label": "Card Number",
      "required": null,
      "error": "VIP or Gift Card number is required"
    },
    "pin": {
      "type": "text",
      "id": "gift-card-apply-gift-card-pin",
      "name": "gift-card-pin",
      "label": "Pin",
      "required": null,
      "error": "Pin is required"
    },
    "submit": {
      "modifier": "outlined",
      "buttonValue": "Apply"
    },
    "applied": {
      "label": "Applied Gift Card or VIP Card",
      "items": [
        {
          "label": "VIP Card Applied",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        },
        {
          "label": "Gift Card Applied",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        }
      ]
    }
  },
  "totals": [
    {
      "label": "Order Subtotal (4)",
      "value": "$1096.00"
    },
    {
      "label": "Estimated Tax*",
      "value": "TBD"
    },
    {
      "label": "Shipping*",
      "value": "TBD"
    },
    {
      "label": "* Calculated at Checkout",
      "modifier": "tbd"
    }
  ],
  "total": {
    "label": "Total",
    "value": "$799.99"
  },
  "shoppingCartForms": "shopping-cart-forms",
  "checkout": "Checkout",
  "empty": {
    "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
    "label": "Your Shopping Cart is Empty",
    "buttonValue": "Shop Now"
  }
}
  • Content:
    (function (window) {
      'use strict';
    
      function handleToggle(e) {
        const item = e.target.closest('.js-shopping-cart-item-gift-bag');
        toggleItem(item);
      }
    
      function handleGiftCardToggle(e) {
        const toggle = e.target;
        const container = toggle.parentNode.querySelector('.js-gift-card-apply-form');
    
        if (toggle.getAttribute('aria-expanded') === 'false') {
          toggle.setAttribute('aria-expanded', true);
          container.setAttribute('aria-hidden', false);
    
          if ((window.innerWidth || screen.width) < 681) {
            const contentHeight = calculateElementContentHeight(container);
            container.style.height = contentHeight + 'px';
          }
        } else {
          toggle.setAttribute('aria-expanded', false);
          container.setAttribute('aria-hidden', true);
          container.style.height = '';
        }
      }
    
      function calculateHeight(container) {
        const contentHeight = Array.prototype.reduce.call(container.children, function (height, child) {
          const style = getComputedStyle(child);
          const total = height + child.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom);
          return total;
        }, 0);
        return contentHeight;
      }
    
      function handleRxToggle(e) {
        const toggle = e.target;
        const container = toggle.parentNode.querySelector('.js-shopping-cart-rx');
        if (toggle.getAttribute('aria-expanded') === 'false') {
          const contentHeight = calculateHeight(container);
          toggle.innerHTML = window.cart_i18n.hide_prescription_button_text;
          toggle.setAttribute('aria-expanded', true);
          container.setAttribute('aria-hidden', false);
          container.style.height = contentHeight + 'px';
        } else {
          toggle.innerHTML = window.cart_i18n.show_prescription_button_text;
          toggle.setAttribute('aria-expanded', false);
          container.setAttribute('aria-hidden', true);
          container.style.height = '';
        }
      }
    
      function toggleItem(item) {
        item.classList.toggle('js-shopping-cart-disable');
      }
    
      // To-do: consolidate this with the height calculation in
      // handleGiftCardToggle().
      function recalculateHeight() {
        const container = document.querySelector('.js-gift-card-apply-form');
        // If gift card form isn’t even on the page, exit.
        if (!container) return;
    
        if (container.getAttribute('aria-hidden') === 'false') {
          if ((window.innerWidth || screen.width) < 681) {
            const contentHeight = calculateElementContentHeight(container);
            container.style.height = contentHeight + 'px';
          }
        }
      }
    
      function handleShippingMethodChange(select) {
        const methodCell = findParent(select, 'js-shipping-method-cell');
        const toggle = methodCell.querySelector('.js-shipping-price-toggle');
    
        if (select.value) {
          toggle.setAttribute('aria-hidden', false);
        } else {
          toggle.setAttribute('aria-hidden', true);
        }
      }
    
      function handleShippingPriceToggle(event) {
        const toggles = document.querySelectorAll('.js-shipping-price-toggle');
        const placeholders = document.querySelectorAll('.js-shipping-price-placeholder');
        const values = document.querySelectorAll('.js-shipping-price-value');
    
        // Flip reveal data attribute.
        document.body.dataset.shippingPricesRevealed = document.body.dataset.shippingPricesRevealed !== "true";
        const reveal = document.body.dataset.shippingPricesRevealed === "true";
    
        Array.prototype.forEach.call(toggles, function (toggle) {
          // Update toggle text according to reveal status.
          toggle.innerText = reveal ? window.cart_i18n.hide_shipping_price_button_text : window.cart_i18n.show_shipping_price_button_text;
        });
        Array.prototype.forEach.call(placeholders, function (placeholder) {
          // Hide placeholder if `reveal` is true, otherwise, show it.
          placeholder.setAttribute('aria-hidden', reveal);
        });
        Array.prototype.forEach.call(values, function (value) {
          // Show value if `reveal` is true, otherwise, hide it.
          value.setAttribute('aria-hidden', !reveal);
        });
      }
    
      function init() {
        // Define cart_i18n object if it doesn’t already exist.
        window.cart_i18n = window.cart_i18n || {};
        if (!window.cart_i18n.hasOwnProperty('show_shipping_price_button_text') || window.cart_i18n.show_shipping_price_button_text === '') {
          window.cart_i18n.show_shipping_price_button_text = 'Show shipping price';
        }
        if (!window.cart_i18n.hasOwnProperty('hide_shipping_price_button_text') || window.cart_i18n.hide_shipping_price_button_text === '') {
          window.cart_i18n.hide_shipping_price_button_text = 'Hide shipping price';
        }
        if (!window.cart_i18n.hasOwnProperty('show_prescription_button_text') || window.cart_i18n.show_prescription_button_text === '') {
          window.cart_i18n.show_prescription_button_text = 'Show prescription details';
        }
        if (!window.cart_i18n.hasOwnProperty('hide_prescription_button_text') || window.cart_i18n.hide_prescription_button_text === '') {
          window.cart_i18n.hide_prescription_button_text = 'Hide prescription details';
        }
    
        // Instantiate gift bags.
        const giftBags = document.querySelectorAll('.js-shopping-cart-item-gift-bag');
        for (let i = 0; i < giftBags.length; i++) {
          if (!giftBags[i].classList.contains('js-component-init')) {
            const toggle = giftBags[i].querySelector('.checkbox');
            if (toggle) {
              toggle.addEventListener('click', handleToggle);
            }
            toggleItem(giftBags[i]);
            giftBags[i].classList.add('js-component-init');
          }
        }
    
        // Instantiate gift cards.
        const giftCards = document.querySelectorAll('.js-shopping-cart-item-gift-card');
        for (let i = 0; i < giftCards.length; i++) {
          if (!giftCards[i].classList.contains('js-component-init')) {
            giftCards[i].addEventListener('click', handleGiftCardToggle);
            giftCards[i].classList.add('js-component-init');
          }
        }
    
        // Instantiate rx toggles.
        const rxToggles = document.querySelectorAll('.js-shopping-cart-rx-toggle');
        for (let i = 0; i < rxToggles.length; i++) {
          if (!rxToggles[i].classList.contains('js-component-init')) {
            rxToggles[i].addEventListener('click', handleRxToggle);
            rxToggles[i].classList.add('js-component-init');
          }
        }
    
        // Instantiate shipping price toggles.
        const shippingPriceToggles = document.querySelectorAll('.js-shipping-price-toggle');
        for (let i = 0; i < shippingPriceToggles.length; i++) {
          if (!shippingPriceToggles[i].classList.contains('js-component-init')) {
            shippingPriceToggles[i].addEventListener('click', function (event) {
              if (event.target.classList.contains('js-shipping-price-toggle')) {
                handleShippingPriceToggle(event);
              }
            });
            shippingPriceToggles[i].classList.add('js-component-init');
          }
        }
    
        // Recalculate gift card form height in case it’s open on load.
        recalculateHeight();
    
        // Trigger a shipping-method-change event from shipping-dropdown component.
        componentEvents.emitEvent('shipping-method-update');
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
        componentEvents.on('shipping-method-changed', handleShippingMethodChange);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/shopping-cart/shopping-cart.js
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.js
  • Size: 7.4 KB
  • Content:
    .shopping-cart__title {
      @include font-bold;
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      letter-spacing: $base-letter-spacing;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-xl) {
        padding-bottom: 5px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    
      @if $brand == 'b2b' {
        margin: 6rem 0 0;
        border-bottom: 0;
        font-size: 2.6rem;
      }
    }
    
    .shopping-cart__items {
      width: 100%;
      border-collapse: collapse;
    }
    
    .shopping-cart__items-header {
      @include font-bold;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      tr {
        height: 50px;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    
      @if $brand == 'b2b' {
        background-color: $color-white;
        color: $color-dark;
        font-size: 1.8rem;
    
        @include breakpoint($breakpoint-sm-only) {
          display: block;
    
          .shopping-cart__items-header-cell:not(:first-child) {
            display: none;
          }
        }
    
        @include breakpoint($breakpoint-md-only) {
          font-size: 1.4rem;
        }
      }
    }
    
    .shopping-cart__items-header-cell--price {
      @if $brand == 'b2b' {
        @include breakpoint($breakpoint-lg) {
          text-align: right;
        }
      }
    }
    
    .shopping-cart__items-header-cell--image {
      color: transparent;
    }
    
    .shopping-cart__items-header-cell--qty {
      @include breakpoint($breakpoint-xl) {
        padding-left: 25px;
      }
    
      @if $brand == 'b2b' {
        text-align: right;
      }
    }
    
    .shopping-cart__items-header-cell--total {
      padding-right: 20px;
      text-align: right;
    }
    
    .shopping-cart__items-body {
      @include breakpoint($breakpoint-sm-only) {
        td {
          display: block;
        }
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__items-subtotal {
        width: 100%;
        border-top: 1px solid $shopping-cart-item-border-bottom;
        background-color: $color-white;
        border-collapse: collapse;
      }
    }
    
    .shopping-cart__item {
      border-top: 1px solid $shopping-cart-item-border-bottom;
    
      &.shipping-row {
        border-top: 0;
      }
    
      &:last-child {
        border-bottom: 0;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        @include clearfix;
        display: block;
        position: relative;
        padding-bottom: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        &:last-child {
          border-bottom: 0;
        }
      }
    
      @if $brand == 'b2b' {
        vertical-align: top;
    
        &--with-shipping {
          .shopping-cart__item-info-col {
            @include breakpoint($breakpoint-md) {
              padding-bottom: 0;
            }
          }
        }
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__item-shipping-row {
        border-bottom: 1px solid $shopping-cart-item-border-bottom;
        vertical-align: top;
    
        @include breakpoint($breakpoint-sm-only) {
          padding-bottom: 0;
        }
      }
    }
    
    .shopping-cart__item--extra {
      @include breakpoint($breakpoint-sm-only) {
        margin-bottom: 20px;
        padding-bottom: 15px;
      }
    }
    
    .gift-card-form-toggle {
      @include font-bold;
      margin-bottom: 4rem;
      padding: 0;
      border-width: 0;
      border-style: none;
      border-color: transparent;
      background-color: transparent;
      color: $color-primary;
      font-size: 1.4rem;
      letter-spacing: $base-letter-spacing;
      text-decoration: underline;
      cursor: pointer;
    
      &:hover,
      &:focus {
        color: $color-primary-hover;
      }
    }
    
    .shopping-cart__item-image-col {
      @include breakpoint($breakpoint-md) {
        width: 20%;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 25%;
      }
    
      @if $brand == 'b2b' {
        .alert-block {
          margin: 2.5rem 0;
          text-align: center;
    
          strong {
            float: none;
          }
        }
      }
    }
    
    .shopping-cart__item-image {
      max-width: 225px;
      margin: 10px auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 150px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 225px;
      }
    
      @if $brand == 'b2b' {
        width: 30rem;
        max-width: none;
    
        @include breakpoint($breakpoint-xl) {
          max-width: none;
        }
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__item-control-row {
        margin: 0 auto;
        text-align: center;
    
        @include breakpoint($breakpoint-md-lg) {
          max-width: 10rem;
        }
      }
    
      .shopping-cart__item-control {
        width: 4rem;
        height: 4rem;
        padding: 0;
        border: 0;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    
        &--delete {
          background-image: url('../images/b2b/#{$delete-icon-filename}');
          background-size: auto 2rem;
        }
    
        &--edit {
          background-image: url('../images/b2b/#{$edit-icon-filename}');
          background-size: auto 2.2rem;
        }
    
        &--print {
          background-image: url('../images/b2b/#{$print-icon-filename}');
          background-size: auto 2.7rem;
        }
    
        &--view {
          background-image: url('../images/b2b/#{$view-icon-filename}');
          background-size: auto 2.5rem;
        }
      }
    }
    
    .shopping-cart__item-info-col,
    .shopping-cart__item-price-col,
    .shopping-cart__item-total-col  {
      @include breakpoint($breakpoint-md) {
        position: relative;
    
        @if $brand == 'b2b' {
          padding-top: 2.5rem;
          padding-right: 1rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-right: if($brand == 'b2b', 0, 2rem);
      }
    }
    
    .shopping-cart__item-info-col {
      margin-bottom: 15px;
    
      @include breakpoint($breakpoint-md) {
        padding: $shopping-cart-item-info-col-padding;
      }
    
      @if $brand == 'b2b' {
        @include breakpoint($breakpoint-md) {
          width: 40%;
          padding-top: 2.5rem;
        }
    
        .alert-block {
          margin-top: 2.2rem;
    
          @include breakpoint($breakpoint-md) {
            max-width: 40rem;
          }
        }
      }
    }
    
    .shopping-cart__item-total-col {
      position: relative;
    }
    
    @if $brand == 'b2b' {
      .rx-toggle,
      .shipping-price-toggle {
        padding-left: 0;
        color: $color-darkest;
        text-decoration: underline;
      }
    
      .shipping-price-toggle {
        position: relative;
        top: -3.5rem;
    
        &[aria-hidden='true'] {
          display: none;
        }
      }
    
      .js-shipping-price-placeholder,
      .js-shipping-price-value {
        &[aria-hidden='true'] {
          display: none;
        }
      }
    
      .shopping-cart__item-rx-list {
        @include reset-list;
    
        & + .shopping-cart__item-info {
          margin-top: 1.6rem;
        }
      }
    
      .shopping-cart__item-rx {
        &[aria-hidden='true'] {
          height: 0;
          transition: .5s ease-in-out;
          overflow: hidden;
        }
    
        &[aria-hidden='false'] {
          transition: .5s ease-in-out;
          overflow: hidden;
        }
    
        & > .shopping-cart__item-info {
          text-transform: uppercase;
        }
      }
    }
    
    .shopping-cart__item-name {
      @include font-bold;
      display: block;
      color: $color-dark;
      font-size: #{map-get($shopping-cart-item-name-font-size, sm)};
      letter-spacing: $shopping-cart-item-name-letter-spacing;
      line-height: #{map-get($shopping-cart-item-name-line-height, sm)};
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-sm-only) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
        font-size: #{map-get($shopping-cart-item-name-font-size, xl)};
        line-height: #{map-get($shopping-cart-item-name-line-height, xl)};
      }
    
      @if $brand == 'b2b' {
        color: $color-black;
        font-size: 2rem;
      }
    }
    
    .shopping-cart__item-info {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @if $brand != 'b2b' {
        @include breakpoint($breakpoint-xl) {
          max-width: 290px;
        }
      }
    }
    
    .shopping-cart__item-wishlist,
    .shopping-cart__item-remove {
      position: absolute;
      bottom: $shopping-cart-item-button-bottom;
      width: auto;
      min-width: 0;
      padding: 0;
    }
    
    .shopping-cart__item-wishlist {
      left: 0;
      color: $color-darkest;
    }
    
    .shopping-cart__item-remove {
      right: 0;
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    
      @include breakpoint($breakpoint-xl) {
        right: 20px;
      }
    }
    
    .shopping-cart__item-qty-col {
      @include breakpoint($breakpoint-sm-only) {
        float: left;
      }
    
      @if $brand == 'b2b' {
        @include breakpoint($breakpoint-md) {
          padding-top: 2.8rem;
        }
      }
    }
    
    .shopping-cart__item-qty {
      .form-item--select {
        margin: 0;
      }
    
      .select-wrapper {
        max-width: 8rem;
    
        @if $brand == 'b2b' {
          float: right;
    
          &::after {
            right: 1rem;
          }
        }
      }
    
      .select {
        padding-left: 2rem;
        color: $color-darkest;
    
        option {
          padding-left: 2rem;
        }
    
        @if $brand == 'b2b' {
          padding: 1rem 2rem 1rem 1rem;
          text-align-last: center;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .form-item--select {
          margin: if($brand == 'b2b', 0, 1.5rem 0);
        }
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__item-qty--preselected {
        @include breakpoint($breakpoint-sm-only) {
          padding-top: .5rem;
          color: $color-darkest;
          font-size: 2.7rem;
    
          span {
            &::before {
              content: 'Qty: ';
            }
          }
        }
    
        @include breakpoint($breakpoint-md) {
          padding-top: 1.2rem;
          text-align: center;
        }
    
        @include breakpoint($breakpoint-xl) {
          padding-right: 4rem;
          text-align: right;
        }
      }
    }
    
    .shopping-cart__item-price-col,
    .shopping-cart__item-total-col {
      text-align: right;
    
      @include breakpoint($breakpoint-sm-only) {
        float: right;
      }
    }
    
    .shopping-cart__item-price {
      color: $shopping-cart-item-price-color;
      font-size: 2.7rem;
      line-height: 5.0rem;
    
      @if $brand == 'b2b' {
        color: $color-darkest;
    
        @include breakpoint($breakpoint-md) {
          font-size: 1.4rem;
        }
    
        @include breakpoint($breakpoint-xl) {
          font-size: 1.8rem;
        }
      }
    }
    
    @if $brand == 'b2b' {
      // We need to add the element type to override the blanket rule we add to td
      // elements within .shopping-cart__items-body.
      td.shopping-cart__item-price-col {
        @include breakpoint($breakpoint-sm-only) {
          display: none;
        }
      }
    }
    
    .shopping-cart__item-tax {
      display: block;
      margin-top: -14px;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .shopping-cart__item-vip-info {
      @include font-medium;
      margin-top: -28px;
      margin-bottom: -2px;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.5rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: -23px;
        margin-bottom: -7px;
        font-size: 1.2rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        right: 20px;
        margin-top: -28px;
        margin-bottom: -2px;
      }
    }
    
    .shopping-cart__item-vip-card-value {
      display: block;
      white-space: nowrap;
    }
    
    .shopping-cart__item-vip-original-price {
      display: block;
      text-decoration: line-through;
    }
    
    .shopping-cart__item-toggle {
      margin: 15px 0;
    
      label {
        @include font-bold;
      }
    }
    
    .shopping-cart__item--gift-bag {
      .shopping-cart__item-toggle label .icon {
        top: -4px;
        right: -30px;
        padding-left: 0;
      }
    }
    
    .shopping-cart__empty {
      padding-bottom: 10px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        padding-bottom: 50px;
      }
    }
    
    .shopping-cart__empty-brand-logo {
      margin: 30px auto;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 70px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 50px;
      }
    }
    
    .shopping-cart__empty-label {
      display: block;
      margin: 20px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 1.9rem;
    }
    
    .shopping-cart__empty-button {
      padding: 0 20px;
    }
    
    .shopping-cart__item-qty-col,
    .shopping-cart__item-price-col,
    .shopping-cart__item-total-col  {
      .js-shopping-cart-disable & {
        opacity: .5;
        pointer-events: none;
      }
    }
    
    .shipping-row__item-shipping-price {
      position: absolute;
      top: 9.8rem;
      right: 2rem;
      text-align: right;
      vertical-align: middle;
    
      @include breakpoint($breakpoint-md) {
        position: relative;
        top: inherit;
        right: inherit;
        padding-top: 9rem;
        font-size: 1.4rem;
        vertical-align: top;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.8rem;
      }
    }
    
    .shopping-cart__no-pricing-button {
      @include reset-button;
      margin-top: 1rem;
    
      & + .tooltip {
        display: none;
        position: absolute;
        top: 4.6rem;
        right: 0;
        width: 19rem;
    
        @include breakpoint($breakpoint-md) {
          top: 7.2rem;
          right: 1rem;
        }
    
        @include breakpoint($breakpoint-xl) {
          right: 0;
        }
    
        &:before {
          right: .5rem;
          left: auto;
        }
    
        &.js-tooltip--open {
          display: block;
        }
      }
    }
    
  • URL: /components/raw/shopping-cart/shopping-cart.scss
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.scss
  • Size: 12.4 KB

There are no notes for this item.