<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">
              -
          </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">Check invoice for final pricing.</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>
<table class="shopping-cart__items-footer">
  <tr>
    <td class="shopping-cart__items-footer-cell" colspan="2">
      {{#if purchaseOrderNumber}}
      <div class="purchase-order-number-form">
        {{#if purchaseOrderNumber.input}}
        <div class="purchase-order-number-form__item">
          {{render '@input' purchaseOrderNumber.input}}
        </div>
        {{/if}}
        {{#if purchaseOrderNumber.number}}
        <strong>Purchase Order Number</strong>
        <br>
        <div class="purchase-order-number-form__item">
          {{purchaseOrderNumber.number}}
        </div>
        <br>
        {{/if}}
        <span class="purchase-order-number-form__detail">{{purchaseOrderNumber.detail}}</span>
      </div>
      {{/if}}
      {{#if thanks}}
      <ul class="shopping-cart__thanks">
        {{#each thanks}}
        <li class="shopping-cart__thanks-item">
          <span class="shopping-cart__thanks-label{{#if modifier}} shopping-cart__thanks-label--{{modifier}}{{/if}}">{{label}}{{#if value}}:{{/if}}</span>
          {{#if value}}
          <span class="shopping-cart__thanks-value{{#if modifier}} shopping-cart__thanks-value--{{modifier}}{{/if}}">{{value}}</span>
          {{/if}}
        </li>
        {{/each}}
      </ul>
      {{/if}}
      {{#ifor totals total confirmation buttons}}
      <ul class="shopping-cart__totals">
        {{#if 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}}">
            {{#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}}
        {{/if}}
        {{#if total}}
        <li class="shopping-cart__totals-item shopping-cart__totals-item--total">
          <span class="shopping-cart__totals-label">{{total.label}}{{#if total.value}}:{{/if}}</span>
          {{#if total.value}}
            <span class="shopping-cart__totals-value">{{total.value}}</span>
          {{/if}}
        </li>
        {{/if}}
        {{#if confirmation}}
        <li class="shopping-cart__totals-confirmation"> {{render '@checkbox' confirmation}} </li>
        {{/if}}
        {{#if buttons}}
         <li class="shopping-cart__buttons">
           {{#each buttons}}
           <button class="button button--{{modifier}} {{#if single}}button--{{single}} {{/if}}{{#if noprint}}button--{{noprint}} {{/if}}shopping-cart__checkout-button">{{text}}</button>
           {{/each}}
         </li>
       {{/if}}
      </ul>
      {{/ifor}}
      {{#if checkout}}
      <div class="shopping-cart__totals-item__checkout">
        <button class="button button--primary shopping-cart__checkout">{{checkout}}</button>
        {{#if giftCard.applied}}
        <div class="shopping-cart__applied-gift">
          {{#each giftCard.applied.items}}
          <div class="shopping-cart__applied-gift-item">
            <form 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}}
            </form>
          </div>
          {{/each}}
        </div>
        {{/if}}
      </div>
      {{/if}}
    </td>
  </tr>
</table>
{
  "pageCss": [
    "checkout"
  ],
  "showAllInfo": true,
  "title": "Your Cart",
  "showGroupingTitle": null,
  "showVip": true,
  "showTaxInfo": true,
  "showRemoveBtn": true,
  "giftCard": null,
  "totals": [
    {
      "label": "Subtotal (4)",
      "value": "-"
    },
    {
      "label": "Delivery",
      "value": "$72.00"
    }
  ],
  "total": {
    "label": "Check invoice for final pricing.",
    "value": null
  },
  "checkout": null,
  "empty": {
    "brandLogo": "/assets/images/mauijim-brand-mark-grey-small.png",
    "label": "Your Shopping Cart is Empty",
    "buttonValue": "Shop Now"
  },
  "purchaseOrderNumber": {
    "title": "Have a Gift Card, VIP or Choice Card?",
    "input": {
      "type": "text",
      "id": "purchase-order-number",
      "name": "purchase-order-number",
      "label": "Purchase Order Number",
      "required": null
    },
    "detail": "Applicable sales taxes will be added at the time the order is invoiced."
  },
  "buttons": [
    {
      "text": "Checkout",
      "modifier": "primary"
    },
    {
      "text": "Continue Shopping",
      "modifier": "outlined"
    },
    {
      "text": "Empty Cart",
      "modifier": "plain-text"
    }
  ]
}
  • Content:
    .shopping-cart__items-footer {
      width: 100%;
      background-color: $color-lighter;
      border-collapse: collapse;
    
      @if $brand == 'b2b' {
        margin-bottom: 10rem;
      }
    }
    
    .shopping-cart__items-footer-cell {
      display: flex;
      vertical-align: top;
    
      @include breakpoint($breakpoint-sm-only) {
        display: block;
      }
    
      @if $brand == 'b2b' {
        .purchase-order-number-form {
          padding: 1rem;
    
          strong {
            display: block;
    
            @include breakpoint($breakpoint-md) {
              padding-top: 4rem;
            }
          }
    
          label {
            display: block;
            margin-bottom: 2rem;
            font-size: 1.4rem;
            font-weight: $font-weight-bold;
    
            @include breakpoint($breakpoint-md) {
              padding-top: 4rem;
            }
          }
    
          .purchase-order-number-form__detail {
            font-size: 1.4rem;
          }
    
          .form-item--purchase-order-number-error {
    
            .input {
              border: 2px solid $color-error;
            }
          }
    
          .input-error {
            font-weight: $font-weight-normal;
          }
    
          @include breakpoint($breakpoint-md) {
            width: 32.5rem;
            margin-top: 1rem;
            padding-left: 3.8rem;
          }
        }
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__item-rx-list {
        @include reset-list;
    
        & + .shopping-cart__item-info {
          margin-top: 1.6rem;
        }
      }
    
      .shopping-cart__item-rx {
        &[aria-hidden='true'] {
          height: 0;
          transition: .5s ease-in-out;
          overflow: hidden;
        }
    
        &[aria-hidden='false'] {
          transition: .5s ease-in-out;
          overflow: hidden;
        }
      }
    }
    
    .gift-card-apply-form {
      &[aria-hidden='true'] {
        height: 0;
        transition: .5s ease-in-out;
        overflow: hidden;
      }
    
      &[aria-hidden='false'] {
        height: 150px;
        transition: .5s ease-in-out;
        overflow: hidden;
    
        @include breakpoint($breakpoint-sm-only) {
          height: 300px;
        }
      }
    }
    
    .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 {
      // Hiding the overflow forces the parent dimensions to include the children’s
      // margins. We need this in order to correctly calculate content height.
      overflow: hidden;
    
      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;
      }
    
      @include breakpoint($page-width-max) {
        width: 100px;
        margin-right: 20px;
      }
    }
    
    .gift-card-apply-form__submit {
      margin: 30px 0;
    
      .button {
        display: block;
        margin: 10px auto 0;
        background-color: $color-lighter;
    
        @include breakpoint($breakpoint-md) {
          width: 100px;
          margin: 10px 0 0;
          float: left;
        }
      }
    }
    
    .shopping-cart__applied-gift {
      margin: 20px 0;
      padding: 30px 10px 0;
      clear: both;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-xl) {
        margin: 0;
      }
    }
    
    .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) {
        display: flex;
        justify-content: center;
    
        .button {
          margin-left: 15px;
        }
      }
    }
    
    .shopping-cart__applied-gift-info-label {
      display: block;
      margin-right: 5px;
      font-weight: $font-weight-bold;
    }
    
    .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) {
        flex-grow: 2;
        padding-right: 20px;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 20px;
      }
    
      @if $brand == 'b2b' {
        margin-bottom: 6rem;
    
        @include breakpoint($breakpoint-md) {
          max-width: 35rem;
          margin-left: auto;
        }
      }
    }
    
    .shopping-cart__totals-item__checkout {
      margin: 20px 10px 0;
    
      @include breakpoint($breakpoint-md) {
        flex-grow: 1;
        margin: 20px 10px 0 20px;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 2rem 1rem 0;
      }
    }
    
    .shopping-cart__totals-item {
      clear: both;
    
      @if $brand == 'b2b' {
        &:last-of-type {
          margin-top: 1.2rem;
        }
      }
    }
    
    .shopping-cart__totals-item--total {
      margin-top: 15px;
      color: $color-medium;
      font-size: 3rem;
    
      @if $brand == 'b2b' {
        color: $color-darkest;
        font-size: 1.8rem;
        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;
      }
    }
    
    @if $brand == 'b2b' {
      .shopping-cart__totals-label--subtotal,
      .shopping-cart__totals-value--subtotal {
        font-size: 1.8rem;
        font-weight: $font-weight-bold;
      }
    
      .form-item--purchase-order-number {
        font-weight: $font-weight-bold;
      }
    
      .shopping-cart__totals-confirmation {
        padding-top: 2rem;
        font-weight: $font-weight-bold;
    
        .checkbox--default~label {
          font-size: 1.3rem;
        }
      }
    
      .shopping-cart__totals-label--subtotal,
      .shopping-cart__totals-value--subtotal {
        font-size: 1.8rem;
        font-weight: $font-weight-bold;
      }
    
      .shopping-cart__checkout-button {
        display: block;
        width: 26.5rem;
        min-width: 120px;
        margin: 0 auto 1.4rem;
    
    
        @include breakpoint($breakpoint-md) {
          min-width: 36rem;
          max-width: none;
        }
    
        @include breakpoint($breakpoint-lg) {
          min-width: 35rem;
        }
    
        @media print {
          &.button--noprint {
            display: none;
          }
        }
    
        &.button--plain-text {
          color: $color-darkest;
          text-decoration: underline;
        }
      }
    
      .shopping-cart__buttons {
        @include reset-list;
        margin: 20px $gutter-width-half;
        margin-bottom: 6rem;
    
    
        @include breakpoint($breakpoint-md) {
          min-width: 270px;
          max-width: 36rem;
          margin-left: auto;
        }
    
        @include breakpoint($breakpoint-xl) {
          margin-right: 20px;
        }
    
        .button--single {
          margin-top: 2rem;
    
          @include breakpoint($breakpoint-md) {
            margin-top: 3rem;
          }
        }
      }
    
      .shopping-cart__thanks {
        list-style: none;
    
        .shopping-cart__thanks-label {
          font-size: 1.4rem;
          line-height: 1.8;
        }
    
        .shopping-cart__thanks-label--title {
          display: block;
          margin-bottom: 1.6rem;
          color: $color-primary;
          font-size: 1.8rem;
          font-weight: $font-weight-bold;
        }
    
        .shopping-cart__thanks-label--reference-number,
        .shopping-cart__thanks-value--reference-number {
          color: $color-dark;
          font-size: 1.8rem;
          font-weight: $font-weight-bold;
        }
      }
    }
    
    .shopping-cart__checkout {
      display: block;
      width: 100%;
      margin: auto;
      font-size: 20px;
    
      @include breakpoint($breakpoint-md) {
        min-width: 37.5rem;
      }
    
      @include breakpoint($breakpoint-lg) {
        min-width: 43rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        min-width: 39rem;
      }
    }
    
  • URL: /components/raw/shopping-cart-forms/shopping-cart-forms.scss
  • Filesystem Path: src/components/01-elements/form-items/shopping-cart-forms/shopping-cart-forms.scss
  • Size: 7.6 KB

There are no notes for this item.