<form class="order-history">
    <h1 class="order-history__title">Your Orders</h1>
    <div class="order-history__actions--empty">
        <div class="order-history__empty-brand-wrapper">
            <img class="order-history__empty-brand" alt="Maui Jim logo" src="/assets/images/mauijim-brand-mark-grey.png" sizes="(min-width: 1025px) 166px, 83px" srcset="/assets/images/mauijim-brand-mark-grey-small.png 83w, /assets/images/mauijim-brand-mark-grey.png 166w">
        </div>
        <div class="order-history__empty-message">Your Order History is empty</div>
        <button class="order-history__start-shopping button button--primary">Start Shopping</button>
    </div>
</form>
<form class="order-history">
  <h1 class="order-history__title">{{title}}</h1>
  {{#if orders}}
  <table class="order-history__table">
    <thead class="order-history__table-header">
      <tr class="order-history__table-header-row">
        <td class="order-history__table-header-cell">Order Date</td>
        <td class="order-history__table-header-cell">Order Status</td>
        <td class="order-history__table-header-cell">Order Number</td>
        <td class="order-history__table-header-cell">Sold To</td>
        <td class="order-history__table-header-cell order-history__table-header-cell--blank"></td>
      </tr>
    </thead>
    <tbody class="order-history__orders">
      {{#each orders}}
      <tr class="order-history__order">
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Date: </span>
          <span class="order-history__order-info-value">{{order.date}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Status: </span>
          <span class="order-history__order-info-value">{{status}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Order Number: </span>
          <span class="order-history__order-info-value">{{order.number}}</span>
        </td>
        <td class="order-history__order-info">
          <span class="order-history__order-info-label">Sold To: </span>
          <span class="order-history__order-info-value">{{soldTo}}</span>
        </td>
        <td class="order-history__order-info order-history__order-info--call-to-action">
          <form>
            {{render '@buttons--primary' button}}
          </form>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
  {{else}}
  <div class="order-history__actions--empty">
    <div class="order-history__empty-brand-wrapper">
      <img class="order-history__empty-brand" alt="{{brandImage.alt}}" src="{{brandImage.large.src}}" sizes="(min-width: {{brandImage.breakpoint}}px) {{brandImage.large.width}}px, {{brandImage.small.width}}px" srcset="{{brandImage.small.src}} {{brandImage.small.width}}w, {{brandImage.large.src}} {{brandImage.large.width}}w">
    </div>
    <div class="order-history__empty-message">{{message}}</div>
    <button class="order-history__start-shopping button button--primary">Start Shopping</button>
  </div>
  {{/if}}
</form>
{
  "pageCss": [
    "account"
  ],
  "title": "Your Orders",
  "orders": null,
  "brandImage": {
    "breakpoint": "1025",
    "alt": "Maui Jim logo",
    "small": {
      "src": "/assets/images/mauijim-brand-mark-grey-small.png",
      "width": "83"
    },
    "large": {
      "src": "/assets/images/mauijim-brand-mark-grey.png",
      "width": "166"
    }
  },
  "message": "Your Order History is empty"
}
  • Content:
    .order-history__title {
      margin: 5px 0;
      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-md) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .order-history__table {
      position: relative;
      width: 100%;
      border-collapse: collapse;
    
      @include breakpoint($breakpoint-md) {
        letter-spacing: normal;
      }
    }
    
    .order-history__table-header {
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .order-history__table-header-cell {
      padding: 15px 0 15px 10px;
      box-sizing: border-box;
    }
    
    .order-history__table-header-cell--blank {
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        display: none;
      }
    }
    
    .order-history__order {
      border-bottom: 1px solid $color-light;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
        padding: 15px 10px;
      }
    
      @include breakpoint($breakpoint-md) {
        position: relative;
      }
    }
    
    .order-history__order-info {
      padding: 0;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
      }
    
      @include breakpoint($breakpoint-md) {
        padding: 15px 0 60px 10px;
        color: $color-dark;
      }
    
      @include breakpoint($breakpoint-xl) {
        padding: 20px 0 20px 10px;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .order-history__order-info--call-to-action {
      @include breakpoint($breakpoint-md ($breakpoint-xl - 1)) {
        display: block;
        position: absolute;
        right: 0;
        padding-top: 40px;
      }
    }
    
    .order-history__order-info-label {
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .order-history__order-call-to-action {
      width: 100%;
      margin-top: 8px;
      padding: 0 20px;
      line-height: 3.0rem;
    
      @include breakpoint($breakpoint-md) {
        width: auto;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
        float: right;
      }
    }
    
    .order-history__actions--empty {
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin: 0;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-left: 20%;
      }
    }
    
    .order-history__empty-brand-wrapper {
      height: 130px;
    
      @include breakpoint($breakpoint-md) {
        height: 110px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 215px;
      }
    }
    
    .order-history__empty-brand {
      max-width: 123px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 166px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: none;
      }
    }
    
    .order-history__empty-message {
      margin: 35px 0;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
  • URL: /components/raw/order-history/order-history.scss
  • Filesystem Path: src/components/02-components/orders/order-history/order-history.scss
  • Size: 3.1 KB

There are no notes for this item.