<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">Sample Grouping (4)</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--price">Price</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>
                    <div class="shopping-cart__item-control-row">
                        <button class="shopping-cart__item-control shopping-cart__item-control--edit">
              <span class="u-visually-hidden">Edit</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--delete">
              <span class="u-visually-hidden">Delete</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--view">
              <span class="u-visually-hidden">View</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--print">
              <span class="u-visually-hidden">Print</span>
            </button>
                    </div>
                </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>SKU:</strong> 202-02</span>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$149.00</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">
                                <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>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <span class="shopping-cart__item-price">$149.00</span>
                </td>
            </tr>
            <tr class="shopping-cart__item shopping-cart__item--with-shipping">
                <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>
                    <div class="shopping-cart__item-control-row">
                        <button class="shopping-cart__item-control shopping-cart__item-control--edit">
              <span class="u-visually-hidden">Edit</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--delete">
              <span class="u-visually-hidden">Delete</span>
            </button>
                    </div>
                </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>SKU:</strong> HTS267-15C</span>
                    <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> Lorem Ipsum</li>
                            <li class="shopping-cart__item-info"><strong>PRESCRIPTION TYPE:</strong> Progressive</li>
                            <li class="shopping-cart__item-info"><strong>Corridor:</strong> Long</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">
                            <li class="shopping-cart__item-info"><strong>Sphere:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Cylinder:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Axis:</strong> 1</li>
                            <li class="shopping-cart__item-info"><strong>Pd:</strong> 36.0</li>
                            <li class="shopping-cart__item-info"><strong>Oc:</strong> 25.0</li>
                            <li class="shopping-cart__item-info"><strong>Total:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Prism Vertical:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Vertical Direction:</strong> DOWN</li>
                            <li class="shopping-cart__item-info"><strong>Prism Horizontal:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Horizontal Direction:</strong> IN</li>
                            <li class="shopping-cart__item-info"><strong>Prism Result:</strong> 2.0</li>
                        </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">
                            <li class="shopping-cart__item-info"><strong>Sphere:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Cylinder:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Axis:</strong> 1</li>
                            <li class="shopping-cart__item-info"><strong>Pd:</strong> 36.0</li>
                            <li class="shopping-cart__item-info"><strong>Oc:</strong> 25.0</li>
                            <li class="shopping-cart__item-info"><strong>Total:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Prism Vertical:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Vertical Direction:</strong> DOWN</li>
                            <li class="shopping-cart__item-info"><strong>Prism Horizontal:</strong> 1.0</li>
                            <li class="shopping-cart__item-info"><strong>Horizontal Direction:</strong> IN</li>
                            <li class="shopping-cart__item-info"><strong>Prism Result:</strong> 2.0</li>
                        </ul>
                    </div>
                    <button class="button button--plain-text rx-toggle js-shopping-cart-rx-toggle" type="button" aria-expanded="false">Show prescription details</button>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$219.00</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">
                                <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>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <span class="shopping-cart__item-price">$219.00</span>
                </td>
            </tr>
            <tr class="shopping-cart__item shipping-row">
                <td class="shipping-row__info-col">
                    <div class="shipping-dropdown">
                        <div class="form-item form-item--select form-item--required">
                            <label for="shopping-cart-ship-to" class="label label--required">Ship to</label>
                            <div class="select-wrapper">
                                <select id="shopping-cart-ship-to" name="shopping-cart-ship-to" class="select js-select">
        <option value="option1" >500 N Kingsbury St Chicago, IL 60654, USA</option>
        <option value="option2" >600 S 55th St New York, NY 10280, USA</option>
      </select>
                            </div>
                        </div>
                    </div>

                </td>
                <td class="shipping-row__info-col js-shipping-method-cell">
                    <div class="shipping-dropdown">
                        <div class="form-item form-item--select form-item--required">
                            <label for="shopping-cart-ship-option" class="label label--required">Shipping Method</label>
                            <div class="select-wrapper">
                                <select id="shopping-cart-ship-option" name="shopping-cart-ship-option" class="select js-select js-shipping-method-dropdown">
        <option value="" >Select</option>
        <option value="next-day" >Next Day — ETA: March 8th</option>
        <option value="two-day" >2-Day — ETA: March 9th</option>
        <option value="standard" >Standard — ETA: March 17th</option>
      </select>
                            </div>
                        </div>
                    </div>

                    <button class="button button--plain-text shipping-price-toggle js-shipping-price-toggle" aria-hidden="true">
                  Show Shipping Prices
                </button>
                </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>
            <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>
                    <div class="shopping-cart__item-control-row">
                        <button class="shopping-cart__item-control shopping-cart__item-control--edit">
              <span class="u-visually-hidden">Edit</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--delete">
              <span class="u-visually-hidden">Delete</span>
            </button>
                    </div>
                    <div class="alert-block">
                        <strong class="alert-block__badge alert-block__badge--error">Back-ordered</strong>
                    </div>

                </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>SKU:</strong> H257-16C</span>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$299.00</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">
                                <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>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <span class="shopping-cart__item-price">$299.00</span>
                </td>
            </tr>
            <tr class="shopping-cart__item ">
                <td class="shopping-cart__item-image-col">
                    <a href="#H178-10"><img class="shopping-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225" alt="Tortoise"></a>
                    <div class="shopping-cart__item-control-row">
                        <button class="shopping-cart__item-control shopping-cart__item-control--edit">
              <span class="u-visually-hidden">Edit</span>
            </button>
                        <button class="shopping-cart__item-control shopping-cart__item-control--delete">
              <span class="u-visually-hidden">Delete</span>
            </button>
                    </div>
                </td>
                <td class="shopping-cart__item-info-col">
                    <span class="shopping-cart__item-name">VOYAGER</span>
                    <span class="shopping-cart__item-info"><strong>Frame:</strong> Tortoise</span>
                    <span class="shopping-cart__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                    <span class="shopping-cart__item-info"><strong>SKU:</strong> H178-10</span>
                    <div class="alert-block">
                        <strong class="alert-block__badge alert-block__badge--success">promo</strong> This product qualifies for 50% off promotion! Discounted pricing will be reflected on your invoice.
                    </div>
                </td>
                <td class="shopping-cart__item-price-col">
                    <span class="shopping-cart__item-price">$219.00</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">
                                <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>
                            </div>
                        </div>

                    </div>
                </td>
                <td class="shopping-cart__item-total-col">
                    <span class="shopping-cart__item-price">$219.00</span>
                </td>
            </tr>
            <tr class="shopping-cart__item shopping-cart__item-shipping-row">
                <td class="shipping-row__info-col">
                    <div class="shipping-dropdown">
                        <div class="form-item form-item--select form-item--required">
                            <label for="shopping-cart-ship-to" class="label label--required">Ship ‘Maui Jim’ to</label>
                            <div class="select-wrapper">
                                <select id="shopping-cart-ship-to" name="shopping-cart-ship-to" class="select js-select">
        <option value="option1" >500 N Kingsbury St Chicago, IL 60654, USA</option>
        <option value="option2" >600 S 55th St New York, NY 10280, USA</option>
      </select>
                            </div>
                        </div>
                    </div>

                    <div class="shipping-dropdown">
                        <strong>Ship ‘Zeal’ to</strong>
                        <br>
                        <span>true</span>
                    </div>

                    <div class="shipping-dropdown">
                        <div class="form-item form-item--select form-item--required">
                            <label for="shopping-cart-ship-to" class="label label--required">Ship ‘Ophthalmic Demo’ to</label>
                            <div class="select-wrapper">
                                <select id="shopping-cart-ship-to" name="shopping-cart-ship-to" class="select js-select">
        <option value="option1" >500 N Kingsbury St Chicago, IL 60654, USA</option>
        <option value="option2" >600 S 55th St New York, NY 10280, USA</option>
      </select>
                            </div>
                        </div>
                    </div>

                </td>
                <td class="shipping-row__info-col js-shipping-method-cell">
                    <div class="shipping-dropdown">
                        <div class="form-item form-item--select form-item--required">
                            <label for="shopping-cart-ship-option" class="label label--required">Shipping Method</label>
                            <div class="select-wrapper">
                                <select id="shopping-cart-ship-option" name="shopping-cart-ship-option" class="select js-select js-shipping-method-dropdown">
        <option value="" >Select</option>
        <option value="next-day" >Next Day — ETA: March 8th</option>
        <option value="two-day" >2-Day — ETA: March 9th</option>
        <option value="standard" >Standard — ETA: March 17th</option>
      </select>
                            </div>
                        </div>
                    </div>

                    <button class="button button--plain-text shipping-price-toggle js-shipping-price-toggle" aria-hidden="true">
                  Show Shipping Prices
                </button>
                </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>
        </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 shopping-cart__totals-label--shipping">
                Shipping
              </span>
                            <span class="shopping-cart__totals-value shopping-cart__totals-value--shipping">
                  <span class="js-shipping-price-placeholder">-</span>
                            <span class="js-shipping-price-value" aria-hidden="true">$32.00</span>
                            </span>
                        </li>
                        <li class="shopping-cart__totals-item">
                            <span class="shopping-cart__totals-label shopping-cart__totals-label--subtotal">
                Sample Grouping Subtotal
              </span>
                            <span class="shopping-cart__totals-value shopping-cart__totals-value--subtotal">
                  $1096.00
              </span>
                        </li>
                    </ul>
                </td>
            </tr>
        </tfoot>
    </table>
    <table class="shopping-cart__items-footer">
        <tr>
            <td class="shopping-cart__items-footer-cell" colspan="2">
                <div class="purchase-order-number-form">
                    <div class="purchase-order-number-form__item">
                        <div class="form-item form-item--text form-item--purchase-order-number">
                            <label for="purchase-order-number" class="label label--text">Purchase Order Number</label>
                            <input type="text" id="purchase-order-number" name="purchase-order-number" class="input input--text">
                        </div>

                    </div>
                    <span class="purchase-order-number-form__detail">Applicable sales taxes will be added at the time the order is invoiced.</span>
                </div>
                <ul class="shopping-cart__totals">
                    <li class="shopping-cart__totals-item">
                        <span class="shopping-cart__totals-label">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">Delivery:</span>
                        <span class="shopping-cart__totals-value">
              $72.00
          </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">$1986.50</span>
                    </li>
                    <li class="shopping-cart__buttons">
                        <button class="button button--primary shopping-cart__checkout-button">Checkout</button>
                        <button class="button button--outlined shopping-cart__checkout-button">Continue Shopping</button>
                        <button class="button button--plain-text shopping-cart__checkout-button">Empty Cart</button>
                    </li>
                </ul>
            </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">
        <td class="shopping-cart__items-header-cell">{{# if groupingTitle}}{{groupingTitle}}{{/if}}</td>
        <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": null,
  "title": "Your Cart",
  "showGroupingTitle": true,
  "showVip": null,
  "showTaxInfo": null,
  "showRemoveBtn": null,
  "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": 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-10",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M",
          "status": "New",
          "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": 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-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": null,
          "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": "New",
          "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,
      "showViewBtn": true,
      "showPrintBtn": true
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "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": null,
          "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": 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": "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": 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": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": null,
      "prescription": null,
      "individualShipping": {
        "addresses": [
          {
            "component": "shipping-dropdown--address",
            "componentContext": {
              "label": "Ship to"
            }
          }
        ],
        "methods": [
          {
            "component": "shipping-dropdown--method",
            "componentContext": {}
          }
        ],
        "price": "$16.00"
      },
      "rxData": {
        "orderRef": "Lorem Ipsum",
        "rxType": "Progressive",
        "corridor": "Long",
        "right": {
          "sphere": "1.0",
          "cylinder": "1.0",
          "axis": "1",
          "pd": "36.0",
          "oc": "25.0",
          "total": "1.0",
          "prismVertical": "1.0",
          "verticalDirection": "DOWN",
          "prismHorizontal": "1.0",
          "horizontalDirection": "IN",
          "prismResult": "2.0"
        },
        "left": {
          "sphere": "1.0",
          "cylinder": "1.0",
          "axis": "1",
          "pd": "36.0",
          "oc": "25.0",
          "total": "1.0",
          "prismVertical": "1.0",
          "verticalDirection": "DOWN",
          "prismHorizontal": "1.0",
          "horizontalDirection": "IN",
          "prismResult": "2.0"
        }
      }
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-full",
        "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": null,
          "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,
      "backordered": true
    },
    {
      "name": "VOYAGER",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "H178-10",
          "name": "Tortoise",
          "color": "#303032",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "MauiJim.com",
          "purchaseLocation": "W0101010101010",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_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": "#H178-10",
          "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": "H178-10",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "178-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$219.00",
          "salePrice": null,
          "url": "#178-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": "178-02",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": true,
      "prescription": null,
      "promo": "This product qualifies for 50% off promotion! Discounted pricing will be reflected on your invoice."
    }
  ],
  "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": null,
  "giftCard": null,
  "totals": [
    {
      "modifier": "shipping",
      "label": "Shipping",
      "value": "$32.00"
    },
    {
      "modifier": "subtotal",
      "label": "Sample Grouping Subtotal",
      "value": "$1096.00"
    }
  ],
  "total": {
    "label": "Total",
    "value": "$799.99"
  },
  "shoppingCartForms": "shopping-cart-forms--purchase-order-number",
  "checkout": "Checkout",
  "empty": {
    "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
    "label": "Your Shopping Cart is Empty",
    "buttonValue": "Shop Now"
  },
  "groupingTitle": "Sample Grouping (4)",
  "showPriceCol": true,
  "showEditBtn": true,
  "showDelBtn": true,
  "shipping": {
    "addresses": [
      {
        "component": "shipping-dropdown--address",
        "componentContext": {
          "label": "Ship ‘Maui Jim’ to"
        }
      },
      {
        "component": "shipping-dropdown--address",
        "componentContext": {
          "preSelected": true,
          "label": "Ship ‘Zeal’ to"
        }
      },
      {
        "component": "shipping-dropdown--address",
        "componentContext": {
          "label": "Ship ‘Ophthalmic Demo’ to"
        }
      }
    ],
    "methods": [
      {
        "component": "shipping-dropdown--method",
        "componentContext": {}
      }
    ],
    "price": "$16.00"
  },
  "showShippingSelected": null,
  "showGroupingSubtotal": true,
  "promo": true
}
  • 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 {
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid $color-light;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      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 {
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      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--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 {
      margin-bottom: 4rem;
      padding: 0;
      border-width: 0;
      border-style: none;
      border-color: transparent;
      background-color: transparent;
      color: $color-primary;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      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-name {
      display: block;
      color: $color-dark;
      font-size: #{map-get($shopping-cart-item-name-font-size, sm)};
      font-weight: $font-weight-bold;
      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;
    
      @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;
        height: 5rem;
    
        @if $brand == 'b2b' {
          float: right;
        }
      }
    
      .select {
        padding-left: 20px;
        color: $color-darkest;
    
        option {
          padding-left: 20px;
        }
      }
    
      @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 {
      margin-top: -28px;
      margin-bottom: -2px;
      color: $color-dark;
      font-size: 1.4rem;
      font-weight: $font-weight-medium;
      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 {
        font-weight: $font-weight-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: 11.8 KB

There are no notes for this item.