<form class="shopping-cart js-shopping-cart">
    <h1 class="shopping-cart__title">Your Cart</h1>
    <div class="shopping-cart__empty">
        <img class="shopping-cart__empty-brand-logo" src="/assets/images/mauijim-brand-mark-grey-small.png">
        <span class="shopping-cart__empty-label">Your Shopping Cart is Empty</span>
        <a class="shopping-cart__empty-button button button--primary">Shop Now</a>
    </div>
</form>
<form class="shopping-cart js-shopping-cart">
  <h1 class="shopping-cart__title">{{title}}</h1>
  {{#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"></td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--items">Items</td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--qty">Qty</td>
        <td class="shopping-cart__items-header-cell shopping-cart__items-header-cell--price">Total Price</td>
      </tr>
    </thead>
    <tbody class="shopping-cart__items-body">
      {{#each products}}
      <tr class="shopping-cart__item">
        <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>
        </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>
          <button class="shopping-cart__item-wishlist button button--plain-text">Move to Wishlist</button>
        </td>
        <td class="shopping-cart__item-qty-col">
          <div class="shopping-cart__item-qty">
            {{render '@select-normal' ../quantity}}
          </div>
        </td>
        <td class="shopping-cart__item-price-col">
          {{#if vip}}
          <div class="shopping-cart__item-vip-info">
            <span class="shopping-cart__item-vip-card-value">VIP Card {{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 tax}}
          <span class="shopping-cart__item-tax">{{tax}}</span>
          {{/if}}
          <button class="shopping-cart__item-remove button button--plain-text">Remove</button>
        </td>
      </tr>
      {{/each}}
      <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>
    </tbody>
  </table>
  <table class="shopping-cart__items-footer">
    <tfoot>
      <tr>
        <td class="shopping-cart__items-footer-cell" colspan="2">
          <div class="gift-card-apply-form js-gift-card-apply-form">
            <span class="gift-card-apply-form__title">{{giftCard.title}}</span>
            <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>
          </div>
          {{#if giftCard.applied}}
          <div class="shopping-cart__applied-gift">
            <span class="shopping-cart__applied-gift-label">{{giftCard.applied.label}}</span>
            {{#each giftCard.applied.items}}
            <div class="shopping-cart__applied-gift-item">
              <span class="shopping-cart__applied-gift-info">
                <span class="shopping-cart__applied-gift-info-label">{{label}}: </span>
                <span class="shopping-cart__applied-gift-info-value">{{value}}</span>
              {{render '@buttons--plain-text' remove}}
            </div>
            {{/each}}
          </div>
          {{/if}}
        </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}}{{#if value}}:{{/if}}</span>
              {{#if value}}
              <span class="shopping-cart__totals-value{{#if modifier}} shopping-cart__totals-value--{{modifier}}{{/if}}">{{value}}</span>
              {{/if}}
            </li>
            {{/each}}
            {{#if total}}
            <li class="shopping-cart__totals-item shopping-cart__totals-item--total">
              <span class="shopping-cart__totals-label">{{total.label}}:</span>
              <span class="shopping-cart__totals-value">{{total.value}}</span>
            </li>
            {{/if}}
          </ul>
          <button class="button button--primary shopping-cart__checkout">{{checkout}}</button>
        </td>
      </tr>
    </tfoot>
  </table>
  {{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}}
</form>
{
  "pageCss": [
    "checkout"
  ],
  "showAllInfo": true,
  "title": "Your Cart",
  "products": null,
  "quantity": {
    "id": "shopping-cart-qty",
    "name": "shopping-cart-qty",
    "label": null,
    "required": null,
    "options": {
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5"
    }
  },
  "giftBag": {
    "quantity": {
      "id": "shopping-cart-gift-bag",
      "name": "shopping-cart-gift-bag",
      "label": null,
      "required": null,
      "options": {
        "1": "1",
        "2": "2",
        "3": "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
    },
    "pin": {
      "type": "text",
      "id": "gift-card-apply-gift-card-pin",
      "name": "gift-card-pin",
      "label": "Pin",
      "required": null
    },
    "submit": {
      "modifier": "outlined",
      "buttonValue": "Apply"
    },
    "applied": {
      "label": "Applied Gift Card or VIP Card",
      "items": [
        {
          "label": "VIP Card",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        },
        {
          "label": "Gift Card",
          "value": "12345678901234567890",
          "remove": {
            "modifier": "plain-text",
            "buttonValue": "Remove"
          }
        }
      ]
    }
  },
  "totals": [
    {
      "label": "Order Subtotal (4)",
      "value": "$1096.00"
    },
    {
      "label": "Gift Bag (1)",
      "value": "$3.99"
    },
    {
      "label": "Gift Card",
      "value": "- $300.00"
    },
    {
      "label": "Estimated Tax*",
      "value": "-"
    },
    {
      "label": "Shipping*",
      "value": "-"
    },
    {
      "label": "* Calculated at Checkout",
      "modifier": "tbd"
    }
  ],
  "total": {
    "label": "Total",
    "value": "$799.99"
  },
  "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 toggleItem(item) {
        item.classList.toggle('js-shopping-cart-disable');
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-shopping-cart-item-gift-bag');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            const toggle = instances[i].querySelector('.checkbox');
            if (toggle) {
              toggle.addEventListener('click', handleToggle);
            }
            toggleItem(instances[i]);
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/shopping-cart/shopping-cart.js
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.js
  • Size: 939 Bytes
  • 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;
      }
    }
    
    .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;
      }
    }
    
    .shopping-cart__items-header-cell--qty {
      @include breakpoint($breakpoint-xl) {
        padding-left: 25px;
      }
    }
    
    .shopping-cart__items-header-cell--price {
      padding-right: 20px;
      text-align: right;
    }
    
    .shopping-cart__items-body {
      @include breakpoint($breakpoint-sm-only) {
        td {
          display: block;
        }
      }
    }
    
    .shopping-cart__item {
      border-bottom: 1px solid $shopping-cart-item-border-bottom;
    
      @include breakpoint($breakpoint-sm-only) {
        @include clearfix;
        display: block;
        position: relative;
        padding-bottom: 50px;
      }
    
      @include breakpoint($breakpoint-md) {
        &:last-child {
          border-bottom: 0;
        }
      }
    }
    
    .shopping-cart__item--extra {
      @include breakpoint($breakpoint-sm-only) {
        margin-bottom: 20px;
        padding-bottom: 15px;
      }
    }
    
    .shopping-cart__item-image-col {
      & > a:focus {
        outline: none;
      }
    
      @include breakpoint($breakpoint-md) {
        width: 20%;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 25%;
      }
    }
    
    .shopping-cart__item-image {
      max-width: 225px;
      margin: 10px auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 150px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 225px;
      }
    }
    
    .shopping-cart__item-info-col,
    .shopping-cart__item-price-col {
      @include breakpoint($breakpoint-md) {
        position: relative;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-right: 20px;
      }
    }
    
    .shopping-cart__item-info-col {
      margin-bottom: 15px;
    
      @include breakpoint($breakpoint-md) {
        padding: $shopping-cart-item-info-col-padding;
      }
    }
    
    .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)};
      }
    }
    
    .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;
      }
    }
    
    .shopping-cart__item-qty {
      .form-item--select {
        margin: 0;
      }
    
      .select-wrapper {
        width: 80px;
        height: 50px;
      }
    
      .select {
        padding-left: 20px;
        color: $color-darkest;
    
        option {
          padding-left: 20px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .form-item--select {
          margin: 15px 0;
        }
      }
    }
    
    .shopping-cart__item-price-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;
    }
    
    .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__items-footer {
      width: 100%;
      background-color: $color-lighter;
      border-collapse: collapse;
    }
    
    .shopping-cart__items-footer-cell {
      vertical-align: top;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
      }
    }
    
    .gift-card-apply-form {
      padding: 10px;
    }
    
    .gift-card-apply-form__title {
      display: block;
      margin: 10px 0;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 2rem;
    }
    
    .gift-card-apply-form__item {
      label {
        font-size: 1.4rem;
        font-weight: $font-weight-normal;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-right: $gutter-width;
        float: left;
      }
    }
    
    .gift-card-apply-form__item--number {
      @include breakpoint($breakpoint-md) {
        width: 220px;
      }
    
      @include breakpoint($page-width-max) {
        width: 240px;
      }
    }
    
    .gift-card-apply-form__item--pin {
      @include breakpoint($breakpoint-md) {
        width: 80px;
        margin-right: 0;
      }
    
      @include breakpoint($page-width-max) {
        width: 100px;
        margin-right: 20px;
      }
    }
    
    .gift-card-apply-form__submit .button {
      display: block;
      margin: 10px auto 0;
      background-color: $color-lighter;
    
      @include breakpoint($breakpoint-md) {
        margin: 10px 0 0;
        clear: both;
      }
    }
    
    .shopping-cart__applied-gift {
      margin: 20px 0;
      padding: 10px;
      clear: both;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-xl) {
        margin: 0;
        padding-top: 10px;
      }
    }
    
    .shopping-cart__applied-gift-label {
      display: block;
      margin-bottom: 10px;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
    }
    
    .shopping-cart__applied-gift-item {
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    
    .shopping-cart__applied-gift-info {
      .button {
        width: auto;
        min-width: 0;
        padding: 0;
        color: $color-error;
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .button {
          float: right;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .button {
          margin-left: 15px;
        }
      }
    }
    
    .shopping-cart__applied-gift-info-label {
      display: block;
      margin-bottom: 5px;
    }
    
    .shopping-cart__totals {
      @include reset-list;
      margin: 20px $gutter-width-half;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        min-width: 270px;
        max-width: 330px;
        margin-left: auto;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 20px;
      }
    }
    
    .shopping-cart__totals-item {
      clear: both;
    }
    
    .shopping-cart__totals-item--total {
      margin-top: 15px;
      font-weight: $font-weight-bold;
    }
    
    .shopping-cart__totals-value {
      float: right;
    }
    
    .shopping-cart__totals-label--tbd {
      display: inline-block;
      margin-top: 8px;
      color: $color-medium-dark;
    }
    
    .shopping-cart__totals-value--tbd {
      @include breakpoint($breakpoint-md) {
        color: $color-medium-dark;
      }
    }
    
    .shopping-cart__checkout {
      display: block;
      width: 100px;
      min-width: 120px;
      margin: 0 10px 10px auto;
    
      @include breakpoint($breakpoint-md) {
        width: 150px;
        margin-bottom: 30px;
      }
    }
    
    .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 {
      .js-shopping-cart-disable & {
        opacity: .5;
        pointer-events: none;
      }
    }
    
  • URL: /components/raw/shopping-cart/shopping-cart.scss
  • Filesystem Path: src/components/02-components/shopping-cart/shopping-cart.scss
  • Size: 8.8 KB

There are no notes for this item.