<div class="register-product">
    <h1 class="register-product__title">Your Registered Products</h1>
    <div class="register-product__actions--empty">
        <div class="register-product__empty-brand-wrapper">
            <img class="register-product__empty-brand" alt="Zeal logo" src="/assets/images/zeal-brand-mark-grey.png" sizes="(min-width: 1025px) 166px, 123px" srcset="/assets/images/zeal-brand-mark-grey-small.png 123w, /assets/images/zeal-brand-mark-grey.png 166w">
        </div>
        <div class="register-product__empty-message">You haven&#x27;t registered any products</div>
        <button class="register-product__start-shopping button button--primary">Start Shopping</button>
    </div>
</div>
<div class="register-product">
  <h1 class="register-product__title">{{title}}</h1>
  {{#if products}}
  <div class="register-product__categories">
    <span class="register-product__date-column">Order date</span>
    <span class="register-product__style-column">Style</span>
    <span class="register-product__location-column">Location of Purchase</span>
    <span class="register-product__details-column">Details</span>
  </div>
  <div class="register-product__items">
    {{#each products}}
    <div class="register-product__item">
      <a class="register-product__item-link" href="#">
        <div class="register-product__order-date">{{variants.0.orderMonth}}/{{variants.0.orderYear}}</div>
        <div class="register-product__style-wrap">
          <div class="register-product__item-image-wrapper">
            <img class="register-product__item-image" src="{{productImage variants.0.images.front 225}}">
          </div>
          <div class="register-product__categories-row">
            <span class="register-product__date-column">Order date</span>
            <span class="register-product__style-column">Style</span>
          </div>
          <div class="register-product__item-styles">
            <div class="register-product__order-date-wrapper">{{variants.0.orderMonth}}/{{variants.0.orderYear}}</div>
            <div class="register-product__item-style-wrapper">
              <span class="register-product__item-style-name">{{name}}</span>
              <!-- TO-DO: if prescription or mymaui -->
              <div class="register-product__style-item-wrapper">
                {{#if mymaui}}
                <span class="register-product__item-section">MYMAUI</span>
                {{/if}}
                {{#if prescription}}
                <span class="register-product__item-section">PRESCRIPTION</span>
                {{/if}}
                <span class="register-product__item-sku">{{variants.0.id}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="register-product__categories-row">
          <span class="register-product__location-column">Location of Purchase</span>
          <span class="register-product__details-column">Details</span>
        </div>
        <div class="register-product__item-location-wrap">
          <div class="register-product__item-style-wrapper">
            <span class="register-product__item-location">{{variants.0.locationCategory}}</span>
          </div>
        </div>
        <div class="register-product__item-details-wrap">
          <div class="register-product__item-style-wrapper">
            <span class="register-product__item-detail">{{variants.0.purchaseLocation}}</span>
          </div>
        </div>

      </a>
    </div>
    {{/each}}
  </div>
  <div class="register-product__actions">
    <button class="register-product__show-all button button--primary">Start a Repair</button>
    <button class="register-product__show-all button button--primary">Start a Return</button>
  </div>
  {{else}}
  <div class="register-product__actions--empty">
    <div class="register-product__empty-brand-wrapper">
      <img class="register-product__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="register-product__empty-message">{{message}}</div>
    <button class="register-product__start-shopping button button--primary">Start Shopping</button>
  </div>
  {{/if}}
</div>
{
  "pageCss": [
    "account"
  ],
  "title": "Your Registered Products",
  "rating": true,
  "products": null,
  "controls": [
    {
      "wrapper": "add-to-cart",
      "modifier": "primary",
      "buttonValue": "Add to Cart"
    },
    {
      "wrapper": "remove",
      "modifier": "plain-text",
      "buttonValue": "Remove"
    }
  ],
  "brandImage": {
    "breakpoint": "1025",
    "alt": "Zeal logo",
    "small": {
      "src": "/assets/images/zeal-brand-mark-grey-small.png",
      "width": "123"
    },
    "large": {
      "src": "/assets/images/zeal-brand-mark-grey.png",
      "width": "166"
    }
  },
  "message": "You haven't registered any products"
}
  • Content:
    .register-product__title {
      margin-top: 5px;
      padding-bottom: 5px;
      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) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .register-product__categories {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        padding: 10px 0 10px 10px;
        background-color: $color-lighter;
      }
    }
    
    .register-product__categories-row {
      display: flex;
      flex: 1 100%;
      margin-top: 10px;
      padding: 10px;
      background-color: $color-lighter;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .register-product__date-column {
      flex: 1;
      color: $color-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
        line-height: 2.8rem;
      }
    }
    
    .register-product__style-column {
      flex: 1;
      color: $color-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-md) {
        flex: 3;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
        line-height: 2.8rem;
      }
    }
    
    .register-product__location-column {
      flex: 1;
      color: $color-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 5px;
        font-size: 1.4rem;
      }
    }
    
    .register-product__details-column {
      flex: 1;
      color: $color-dark;
      font-size: 1.2rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-shadow: none;
      text-transform: none;
    
      @include breakpoint($breakpoint-md) {
        padding-left: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
        line-height: 2.8rem;
      }
    }
    
    .register-product__item {
      position: relative;
      padding: 40px 0 0;
      border-bottom: 1px solid $color-light;
    
      @include breakpoint($breakpoint-md) {
        padding: 10px 0 15px;
      }
    
      @include breakpoint($breakpoint-xl) {
        display: flex;
        position: relative;
        justify-content: flex-start;
        padding: 0;
      }
    }
    
    .register-product__item-link {
      display: flex;
      width: 100%;
      padding-bottom: 15px;
      text-decoration: none;
    
      @include breakpoint($breakpoint-sm-only) {
        flex-flow: row wrap;
      }
    
      @include breakpoint($breakpoint-md) {
        align-items: center;
        justify-content: center;
        padding-bottom: 0;
      }
    }
    
    .register-product__item-summary {
      margin-bottom: 20px;
    
      @include breakpoint($breakpoint-xl) {
        margin: 5px 0 15px;
      }
    
      & > .rating {
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
    
        @include breakpoint($breakpoint-md) {
          top: 5px;
          left: 115px;
          text-align: left;
    
          .rating__star {
            margin: 0 3px;
    
            &:first-child {
              margin-left: 0;
            }
          }
    
          .rating__star .icon {
            width: 8px;
            height: 8px;
          }
        }
    
        @include breakpoint($breakpoint-xl) {
          top: 8px;
          left: 225px;
    
          .rating__star .icon {
            width: 15px;
            height: 15px;
          }
        }
      }
    }
    
    .register-product__order-date {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
        flex: 1;
        padding-left: 10px;
        color: $color-darkest;
        font-size: 1.2rem;
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
      }
    }
    
    .register-product__order-date-wrapper {
      flex: 1;
      color: $color-darkest;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .register-product__style-wrap {
      flex: 1 100%;
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex: 3;
        padding-right: 10px;
      }
    
      @include breakpoint($breakpoint-lg) {
        padding-right: 0;
      }
    }
    
    .register-product__item-image-wrapper {
      @include breakpoint($breakpoint-md) {
        width: 115px;
        min-height: 40px;
        padding-top: 8px;
        float: left;
        text-align: center;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 225px;
        min-height: 100px;
        margin: 12px 0;
        padding-top: 20px;
      }
    }
    
    .register-product__item-image {
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-height: 40px;
        margin-left: -20px;
        overflow: hidden;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-height: 80px;
      }
    }
    
    .register-product__item-name {
      margin-bottom: 10px;
      color: $color-darkest;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        width: calc(100% - 115px);
        margin-top: 15px;
        margin-left: 115px;
      }
    }
    
    .register-product__item-info {
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
    
      &:not(:last-child)::after {
        width: 1px;
        margin: 0 1em;
        border-right: 1px solid $color-darkest;
        content: '';
      }
    }
    
    .register-product__item-styles {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 10px 10px 0;
    
      @include breakpoint($breakpoint-md) {
        margin-left: -20px;
        padding: 0;
      }
    }
    
    .register-product__item-location-wrap {
      flex: 1;
      padding-left: 10px;
    
      @include breakpoint($breakpoint-md) {
        padding-left: 0;
      }
    }
    
    .register-product__item-details-wrap {
      flex: 1;
      padding-right: 10px;
    
      @include breakpoint($breakpoint-md) {
        padding-right: 0;
        padding-left: 10px;
      }
    }
    
    .register-product__item-style-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
    
      span:nth-child(2) {
        &:before {
          margin: 0;
          content: '-';
        }
      }
    
      @include breakpoint($breakpoint-md) {
        float: left;
      }
    
      @include breakpoint($breakpoint-lg) {
        span:nth-child(2) {
          &:before {
            margin: 0 5px;
            content: '-';
          }
        }
      }
    
      .register-product__style-item-wrapper {
        display: flex;
        flex-wrap: wrap;
      }
    }
    
    .register-product__item-style-name {
      height: 30px;
      margin-bottom: 8px;
      float: left;
      color: $color-darkest;
      font-size: 2rem;
      letter-spacing: 0;
      line-height: 30px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 0;
        float: left;
        text-align: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 50px;
        font-size: 2.7rem;
        line-height: 50px;
      }
    }
    
    .register-product__item-section {
      color: $color-darkest;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: -2px;
        float: left;
        clear: both;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: -12px;
        font-size: 1.4rem;
      }
    }
    
    .register-product__item-sku {
      color: $color-darkest;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: -2px;
        float: left;
        clear: both;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: -12px;
        font-size: 1.4rem;
      }
    }
    
    .register-product__item-location,
    .register-product__item-detail  {
      margin-top: 10px;
      float: right;
      color: $color-darkest;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 0;
        float: left;
        clear: both;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.4rem;
      }
    }
    
    .register-product__item-actions {
      @include breakpoint($breakpoint-md) {
        float: left;
      }
    }
    
    .register-product__item-price-wrapper {
      @include breakpoint($breakpoint-md) {
        float: left;
      }
    }
    
    .register-product__item-price {
      height: 30px;
      margin-bottom: 8px;
      float: left;
      color: $color-medium-dark;
      font-size: 2.7rem;
      letter-spacing: 0;
      line-height: 30px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 0;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 50px;
        line-height: 50px;
      }
    }
    
    .register-product__item-tax {
      margin-top: 10px;
      float: right;
      color: $color-medium-dark;
      font-size: 1.2rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: -2px;
        clear: both;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: -12px;
        font-size: 1.4rem;
      }
    }
    
    
    .register-product__item-add-to-cart,
    .register-product__item-find-an-optician,
    .register-product__item-remove {
      margin-bottom: 5px;
    
      .button {
        display: block;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .button {
          width: 100%;
          padding: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        margin: 0;
    
        .button {
          height: 30px;
          line-height: 30px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .button {
          height: 50px;
          line-height: 50px;
        }
      }
    }
    
    .register-product__item-add-to-cart,
    .register-product__item-find-an-optician {
      @include breakpoint($breakpoint-md) {
        min-width: 150px;
        float: right;
    
        .button {
          width: 100%;
        }
      }
    }
    
    .register-product__item-remove {
      .button {
        color: $color-error;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .button {
          height: 40px;
          line-height: 4.0rem;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .button {
          padding: 0 20px;
        }
      }
    }
    
    .register-product__actions {
      padding: 20px 0 0;
      text-align: left;
    }
    
    .register-product__show-all {
      margin-bottom: 10px;
    }
    
    .register-product__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%;
      }
    }
    
    .register-product__empty-brand-wrapper {
      height: 130px;
    
      @include breakpoint($breakpoint-md) {
        height: 110px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 215px;
      }
    }
    
    .register-product__empty-brand {
      max-width: 123px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 166px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: none;
      }
    }
    
    .register-product__empty-message {
      margin: 35px 0;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
  • URL: /components/raw/register-product/register-product.scss
  • Filesystem Path: src/components/02-components/register-product/register-product.scss
  • Size: 10.4 KB

There are no notes for this item.