<div class="header-cart header-cart--b2b--empty-cart header-cart--tax ">
    <div class="header-cart__empty">
        <div class="header-cart__empty-inner">
            <img class="header-cart__empty-brand-logo" src="/assets/images/mauijim-brand-mark-grey-small.png">
            <span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
            <a class="header-cart__empty-button button button--primary" href="#">Shop Now</a>
        </div>
    </div>
</div>
<div class="header-cart header-cart--{{_self.name}}{{#if cart.footer.subtotal.tax}} header-cart--tax{{/if}}{{#if cart.footer.express}} header-cart--express{{/if}} {{#if b2b}}b2b{{/if}}">
  {{#if cart.products}}
  <div class="header-cart__products">
    {{#each cart.products}}
    {{#if product}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info">Frame Color: {{variants.0.name}}</li>
        <li class="header-cart__item-info">Lens Color: {{variants.0.lens}}</li>
        <li class="header-cart__item-info">Lens Material: {{variants.0.lensMaterial}}</li>
        <li class="header-cart__item-info">Gradient: Single Gradient</li>
        {{#if vip}}
        <li class="header-cart__item-vip-info header-cart__item-vip-info--card-value">VIP Card: {{vip.cardValue}}</li>
        <li class="header-cart__item-vip-info header-cart__item-vip-info--original-price"><span class="u-visually-hidden">Original Price:</span> {{vip.originalPrice}}</li>
        {{/if}}
        <li class="header-cart__item-info header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if b2b}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <span class="header-cart__item-info header-cart__item-info--sku">SKU: {{variants.0.id}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if orderReference}}
    <div class="header-cart__item" aria-label="{{name}}">
      <a href="{{variants.0.url}}"><img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view"></a>
      <span class="header-cart__item-info header-cart__item-info--name">{{name}}</span>
      <span class="header-cart__item-info header-cart__item-info--sku">SKU: {{variants.0.id}}</span>
      <ul class="header-cart__item-list" aria-label="Product Details">
        <li class="header-cart__item-info"><span class="header-cart__item-info--label">ORDER
           REFERENCE OR PATIENT NAME:</span> {{ref}}</li>
        <li class="header-cart__item-info--qty">Qty: 1</li>
        <li class="header-cart__item-info--price">Price: {{variants.0.price}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if repair}}
    <div class="header-cart__item header-cart__item--repair" aria-label="Repair">
      <img class="header-cart__item-image" src="{{productImage variants.0.images.front 330}}" alt="{{variants.0.name}} front view">
      {{#each repairs}}
      <ul class="header-cart__item-list" aria-label="Repair Details">
        <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: {{{repairType}}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: {{repairPrice}}</li>
      {{/each}}
        <li class="header-cart__item-info header-cart__item-info--repair-name">Name: {{name}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-variant">SKU: {{variants.0.id}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-lens">Lens Type: {{lensType}}</li>
      </ul>
      <button class="header-cart__item-remove button button--plain-text">Remove</button>
    </div>
    {{/if}}
    {{#if surcharge}}
    <div class="header-cart__item header-cart__item--surcharge" aria-label="Surcharge">
      {{#if icon}}{{render (dynamicComponent icon)}}{{/if}}
      <ul class="header-cart__item-list" aria-label="Surcharge Details">
        <li class="header-cart__item-info header-cart__item-info--repair-type">Repair Type: {{repairType}}</li>
        <li class="header-cart__item-info header-cart__item-info--repair-price">Repair Price: {{repairPrice}}</li>
      </ul>
    </div>
    {{/if}}
    {{/each}}
  </div>
  <div class="header-cart__footer">
    {{#if cart.footer.subtotal}}
    <div class="header-cart__subtotal">
      <span class="header-cart__subtotal-label">{{cart.footer.subtotal.label}}:</span>
      <span class="header-cart__subtotal-value">{{cart.footer.subtotal.value}}</span>
      {{#if cart.footer.subtotal.tax}}
      <span class="header-cart__subtotal-tax">{{cart.footer.subtotal.tax}}</span>
      {{/if}}
    </div>
    {{/if}}
    {{#if cart.footer.actions}}
    <div class="header-cart__actions">
      {{#each cart.footer.actions}}
      <a class="header-cart__action button button--{{modifier}}" href="{{this.path}}">{{value}}</a>
      {{/each}}
    </div>
    {{/if}}
    {{#if cart.footer.express}}
    <div class="header-cart__express">
      <div class="header-cart__express-label-header">
        <span class="header-cart__express-label">{{cart.footer.express.heading}}</span>
      </div>
      <iframe class="header-cart__express-iframe" src="{{path '/assets/static/html/paypal.html'}}" frameborder="0"></iframe>
    </div>
    {{/if}}
  </div>
  {{else}}
  <div class="header-cart__empty">
    <div class="header-cart__empty-inner">
      <img class="header-cart__empty-brand-logo" src="{{cart.empty.brandLogo}}">
      <span class="header-cart__empty-label">{{cart.empty.label}}</span>
      <a class="header-cart__empty-button button button--primary" href="#">{{cart.empty.buttonValue}}</a>
    </div>
  </div>
  {{/if}}
</div>
{
  "cart": {
    "header": {
      "title": "Your Cart"
    },
    "products": null,
    "footer": {
      "subtotal": {
        "label": "Subtotal (4 items)",
        "value": "$1,096.00",
        "tax": "Inkl. MWST"
      },
      "actions": [
        {
          "modifier": "primary",
          "value": "View your cart",
          "path": "#"
        }
      ],
      "express": null
    },
    "empty": {
      "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
      "label": "Your Shopping Cart is Empty",
      "buttonValue": "Shop Now"
    }
  }
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .header-cart {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    
      // Forces scrollbar visibility.
      // http://simurai.com/blog/2011/07/26/webkit-scrollbar
      @include breakpoint($breakpoint-md) {
        ::-webkit-scrollbar {
          width: 7px;
          -webkit-appearance: none;
        }
    
        ::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background-color: rgba(0, 0, 0, .5);
          box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        }
      }
    }
    
    .header-flyout--cart {
      @include breakpoint($breakpoint-md) {
        overflow-y: hidden;
      }
    }
    
    .header-cart__count {
      padding-top: 1rem;
      float: right;
      color: $color-darkest;
      font-size: 1.2rem;
    
      &:before {
        width: 1rem;
        height: 1rem;
        margin-right: 1rem;
        float: left;
        border-radius: .75rem;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .header-cart__title {
      @include font-bold;
      color: $color-dark;
      font-size: 2.4rem;
      line-height: 3.5rem;
    
      & > .icon {
        position: relative;
        top: -2px;
        height: 9px;
        padding-left: 5px;
      }
    }
    
    .header-cart__item-count {
      position: relative;
      float: right;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 4.0rem;
    
      &:not(.header-cart__item-count--empty):before {
        display: block;
        position: absolute;
        top: calc(50% - 6px);
        left: -20px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $color-primary;
        content: '';
      }
    }
    
    .header-cart__products {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 141px;
      left: 10px;
      padding-right: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
    
      .header-cart--express & {
        bottom: 276px;
      }
    
      .header-cart--tax & {
        bottom: 161px;
      }
    
      .header-cart--express.header-cart--tax & {
        bottom: 296px;
      }
    }
    
    .header-cart__item {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      @if $brand == 'b2b' {
        padding-top: 2rem;
      }
    
      &:last-child {
        border-bottom: 0;
      }
    }
    
    .header-cart__item-image {
      max-height: 117px;
      margin: 0 auto;
    
      @if $brand == 'b2b' {
        max-height: 3.5rem;
        float: left;
      }
    }
    
    .header-cart__item-list {
      padding-left: 0;
      list-style-type: none;
    }
    
    .header-cart__item-info {
      display: block;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    }
    
    .header-cart__item-info--name {
      @include font-bold;
    
      //@if $b2b {
      .b2b & {
        font-size: 1.6rem;
      }
    }
    
    .header-cart__item-info--label {
      @include font-bold;
    }
    
    .header-cart__item-vip-info {
      display: block;
      font-size: 1.1rem;
      line-height: 1.4rem;
      text-align: right;
    
      &--card-value {
        margin-top: -20px;
        white-space: nowrap;
      }
    
      &--original-price {
        text-decoration: line-through;
      }
    }
    
    .header-cart__item-info--qty,
    .header-cart__item-info--price {
      margin-top: 10px;
    
      @if $brand == 'b2b' {
        color: $color-darkest;
      }
    }
    
    .header-cart__item-info--qty {
      float: left;
    }
    
    .header-cart__item-info--price {
      float: right;
    }
    
    .header-cart__item-remove {
      padding: 0;
      float: right;
      clear: both;
      color: $color-error;
      line-height: 4.0rem;
    
      &:hover {
        color: $color-error;
      }
    }
    
    .header-cart__footer {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $color-lighter;
      box-sizing: border-box;
    }
    
    .header-cart__subtotal {
      height: 50px;
      margin: 0 $gutter-width-half;
      border-bottom: 1px solid $color-light;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 5.0rem;
    
      .header-cart--tax & {
        height: 70px;
      }
    }
    
    .header-cart__express {
      .header-cart__express-label-header {
        color: $color-darkest;
        font-size: 1.4rem;
        line-height: 5.0rem;
        text-align: center;
        text-transform: uppercase;
        overflow: hidden;
    
        &:before,
        &:after {
          display: inline-block;
          position: relative;
          width: 50%;
          height: 1px;
          background-color: $color-light;
          content: '';
          vertical-align: middle;
        }
    
        &:before {
          right: .5em;
          margin-left: -50%;
        }
    
        &:after {
          left: .5em;
          margin-right: -50%;
        }
      }
    
      .header-cart__express-iframe {
        width: 100%;
        height: 80px;
      }
    }
    
    .header-cart__subtotal-value {
      @include font-bold;
      float: right;
    }
    
    .header-cart__subtotal-tax {
      margin-top: -15px;
      float: right;
      clear: both;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    }
    
    .header-cart__actions {
      @include clearfix;
    }
    
    .header-cart__action {
      display: block;
      width: calc(100% - 60px);
      margin: 20px 30px;
      padding: 0;
      float: left;
      box-sizing: border-box;
    }
    
    .header-cart__payment-methods {
      @include reset-list;
      display: flex;
      position: relative;
      justify-content: space-between;
      height: 30px;
      margin: 0 $gutter-width-half;
      padding: 10px 0;
      border-top: 1px solid $color-light;
      box-sizing: border-box;
    
      .payment-method {
        height: 30px;
      }
    }
    
    .header-cart__empty {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }
    
    .header-cart__empty-inner {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
    }
    
    .header-cart__empty-brand-logo {
      margin: 0 auto;
    }
    
    .header-cart__empty-label {
      display: block;
      margin: 20px 0;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 1.9rem;
    }
    
    .header-cart__empty-button {
      padding: 0 20px;
    }
    
    .header-cart__item-info--repair-name {
      @include font-bold;
    }
    
    .header-cart__item-info--repair-type {
      @include font-bold;
    }
    
    .header-cart__item-repair {
      @include clearfix;
      margin-bottom: 10px;
    }
    
    .header-cart__item--repair {
      @include clearfix;
      padding-bottom: 5px;
      border-bottom: 1px solid $color-light;
    
      .header-cart__item-info--repair-type {
        display: inline;
      }
    }
    
    .header-cart__item--surcharge {
      padding-top: 30px;
      padding-bottom: 15px;
    
      & > span {
        display: block;
      }
    
      .icon {
        display: block;
        margin: 0 auto;
      }
    
      .header-cart__item-info--repair-type {
        margin: 30px 0 0;
      }
    
      .header-cart__item-info--repair-price {
        position: static;
        width: 100%;
        float: none;
        clear: both;
        text-align: left;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/mini-cart/mini-cart.scss
  • Filesystem Path: src/components/02-components/mini-cart/mini-cart.scss
  • Size: 6.3 KB

There are no notes for this item.