<form class="order-details">
    <h1 class="order-details__title">Order Details</h1>
    <div class="order">
        <div class="order__order-summary">
            <span class="order__order-date"><strong>Date:</strong> 1/10/2017</span>
            <span class="order__order-number"><strong>Order N.:</strong> W1509569021134</span>
            <span class="order__order-shipping">
        <strong>Shipping:</strong>
        <a href="" class="order__track-delivery">Track your Delivery <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
      </span>
        </div>
        <div class="order__item">
            <a href="#" class="order__item-link">
                <div class="order__item-image-wrapper">
                    <img class="order__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                </div>
                <div class="order__item-summary">
                    <div class="order__item-name">PEAHI</div>
                    <span class="order__item-info"><strong>Frame:</strong> Gloss Black</span>
                    <span class="order__item-info"><strong>Lens:</strong> Neutral Grey</span>
                    <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="order__item-info"><strong>SKU:</strong> 202-02</span>
                </div>
            </a>
            <div class="order__item-line-item">
                <span class="order__item-qty"><strong>Qty:</strong> 2</span>
                <span class="order__item-price">
          <strong>Total:</strong> $298.00
          <span class="order__item-tax">
            Inkl. MWST
          </span>
                </span>
            </div>
        </div>
        <div class="order__item">
            <a href="#" class="order__item-link">
                <div class="order__item-image-wrapper">
                    <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
                </div>
                <div class="order__item-summary">
                    <div class="order__item-name">WATERWAYS</div>
                    <span class="order__item-info"><strong>Frame:</strong> Olive Stripe</span>
                    <span class="order__item-info"><strong>Lens:</strong> Maui HT™</span>
                    <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="order__item-info"><strong>SKU:</strong> HTS267-15C</span>
                </div>
            </a>
            <div class="order__item-line-item">
                <span class="order__item-qty"><strong>Qty:</strong> 3</span>
                <span class="order__item-price">
          <strong>Total:</strong> $657.00
          <span class="order__item-tax">
            Inkl. MWST
          </span>
                </span>
            </div>
        </div>
        <div class="order__item">
            <a href="#" class="order__item-link">
                <div class="order__item-image-wrapper">
                    <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                </div>
                <div class="order__item-summary">
                    <div class="order__item-name">KAWIKA</div>
                    <span class="order__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                    <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                    <span class="order__item-info"><strong>Lens Material:</strong> MauiPure</span>
                    <span class="order__item-info"><strong>SKU:</strong> H257-16C</span>
                </div>
            </a>
            <div class="order__item-line-item">
                <span class="order__item-qty"><strong>Qty:</strong> 1</span>
                <span class="order__item-price">
          <strong>Total:</strong> $299.00
        </span>
            </div>
        </div>
        <div class="order__item">
            <a href="#" class="order__item-link">
                <div class="order__item-image-wrapper">
                    <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225">
                </div>
                <div class="order__item-summary">
                    <div class="order__item-name">VOYAGER</div>
                    <span class="order__item-info"><strong>Frame:</strong> Tortoise</span>
                    <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                    <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="order__item-info"><strong>SKU:</strong> H178-10</span>
                </div>
            </a>
            <div class="order__item-line-item">
                <span class="order__item-qty"><strong>Qty:</strong> 1</span>
                <span class="order__item-price">
          <strong>Total:</strong> $219.00
        </span>
            </div>
        </div>
        <div class="order__item">
            <a href="#" class="order__item-link">
                <div class="order__item-image-wrapper">
                    <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;225">
                </div>
                <div class="order__item-summary">
                    <div class="order__item-name">LEIA</div>
                    <span class="order__item-info"><strong>Frame:</strong> Brown Feathered</span>
                    <span class="order__item-info"><strong>Lens:</strong> Maui Rose®</span>
                    <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    <span class="order__item-info"><strong>SKU:</strong> RS708-26D</span>
                </div>
            </a>
            <div class="order__item-line-item">
                <span class="order__item-qty"><strong>Qty:</strong> 2</span>
                <span class="order__item-price">
          <strong>Total:</strong> $598.00
        </span>
            </div>
        </div>
    </div>
    <div class="order-details__full-info">
        <div class="order-details__billing-info">
            <div class="order-details__label">Billing Information</div>
            <p class="order-details__card">
                American Express<br> John Doe<br> ****-****-**12-3456
                <br> 10/2018
                <br>
            </p>
            <p class="order-details__address">
                John Doe<br> One Aloha Lane<br> Peoria, IL 61615<br> United States<br>
            </p>
        </div>
        <div class="order-details__shipping-info">
            <div class="order-details__label">Shipping Address</div>
            <p class="order-details__address">
                John Doe<br> One Aloha Lane<br> Peoria, IL 61615<br> United States<br>
            </p>
        </div>
        <div class="order-details__amount-info">
            <div class="order-details__label">Amount</div>
            <p class="order-details__amount">
                <strong>Subtotal (3):</strong> $1096.00<br>
                <strong>Gift Bag (1):</strong> $3.99<br>
                <strong>Delivery:</strong> $0.00<br>
                <strong>Tax:</strong> $48.99<br>
                <strong>Total:</strong> $526.99<br>
            </p>
        </div>
    </div>
    <div class="order-details__actions">
        <button class="button button--primary">Back to Orders</button>
    </div>
</form>
<form class="order-details">
  <h1 class="order-details__title">{{title}}</h1>
  {{#each orders}}
  {{> @order}}
  {{/each}}
  <div class="order-details__full-info">
    <div class="order-details__billing-info">
      <div class="order-details__label">Billing Information</div>
      <p class="order-details__card">
        {{#each billing.card}}
        {{this}}<br>
        {{/each}}
      </p>
      <p class="order-details__address">
        {{#each billing.address}}
        {{this}}<br>
        {{/each}}
      </p>
    </div>
    <div class="order-details__shipping-info">
      <div class="order-details__label">Shipping Address</div>
      <p class="order-details__address">
        {{#each shipping}}
        {{this}}<br>
        {{/each}}
      </p>
    </div>
    <div class="order-details__amount-info">
      <div class="order-details__label">Amount</div>
      <p class="order-details__amount">
        {{#each amount}}
        <strong>{{label}}:</strong> {{value}}<br>
        {{/each}}
      </p>
    </div>
  </div>
  <div class="order-details__actions">
    <button class="button button--primary">Back to Orders</button>
  </div>
</form>
{
  "pageCss": [
    "account"
  ],
  "title": "Order Details",
  "orders": [
    {
      "deliveredText": "Delivered",
      "trackLink": {
        "path": "#",
        "label": "Track your Delivery"
      },
      "details": true,
      "order": {
        "date": "1/10/2017",
        "number": "W1509569021134",
        "delivery": null,
        "products": [
          {
            "name": "PEAHI",
            "summary": "Polarized men's classic sunglasses",
            "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
            "category": "Wrap",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-half",
              "star-empty"
            ],
            "vip": null,
            "tax": "Inkl. MWST",
            "variants": [
              {
                "id": "202-02",
                "name": "Gloss Black",
                "color": "#000",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$149.00",
                "salePrice": "$229.00",
                "url": "#202-02",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "202-02",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "B202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$189.00",
                "salePrice": "$219.00",
                "url": "#B202-2M",
                "status": null,
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "B202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-10",
                "name": "Dark Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-10",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-10",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-2M",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71",
                  "inactive": true,
                  "material": "mauipure"
                }
              },
              {
                "id": "H202-2M-2",
                "name": "Matte Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-2M-2",
                "status": null,
                "stock": "Out of Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-2M-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "H202-70-2",
                "name": "Redfish",
                "color": "#7d4a07",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#H202-70-2",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H202-70-2",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "HT202-71-2",
                "name": "MahiMahi",
                "color": "#218b16",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
                  "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
                  "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HT202-71-2",
                "status": "New",
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "HT202-71-2",
                  "inactive": true,
                  "material": "mauipure"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 2,
            "total": "$298.00"
          },
          {
            "name": "WATERWAYS",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-empty",
              "star-empty",
              "star-empty"
            ],
            "vip": {
              "cardValue": "30%",
              "originalPrice": "$319.00"
            },
            "tax": "Inkl. MWST",
            "variants": [
              {
                "id": "HTS267-15C",
                "name": "Olive Stripe",
                "color": "#808000",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$219.00",
                "salePrice": null,
                "url": "#HTS267-15C",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui HT™",
                "lensId": "mauiht",
                "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "HTS267-15C",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "HS267-10M",
                "name": "Matte Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$229.00",
                "salePrice": null,
                "url": "#HS267-10M",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "HS267-10M",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "GS267-02MR",
                "name": "Matte Black Rubber",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$239.00",
                "salePrice": null,
                "url": "#GS267-02MR",
                "status": "New",
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "GS267-02MR",
                  "inactive": true,
                  "material": "superthin"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 3,
            "total": "$657.00"
          },
          {
            "name": "KAWIKA",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-half",
              "star-empty"
            ],
            "vip": {
              "cardValue": "30%",
              "originalPrice": "$319.00"
            },
            "tax": null,
            "variants": [
              {
                "id": "H257-16C",
                "name": "Tortoise with Antique Gold",
                "color": "#e0d468",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$299.00",
                "salePrice": null,
                "url": "#H257-16C",
                "status": "New",
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "H257-16C",
                  "inactive": null,
                  "material": "mauipure"
                }
              },
              {
                "id": "B257-05CR",
                "name": "Crystal",
                "color": "#fff; border: 1px solid #dedede",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#B257-05CR",
                "status": "New",
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "B257-05CR",
                  "inactive": true,
                  "material": "mauipure"
                }
              },
              {
                "id": "257-17C",
                "name": "Black Gloss with Antique Pewter",
                "color": "#808080",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#257-17C",
                "status": "New",
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "MauiPure",
                "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
                "lensDetailData": {
                  "product": "257-17C",
                  "inactive": true,
                  "material": "mauipure"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 1,
            "total": "$299.00"
          },
          {
            "name": "VOYAGER",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-full",
              "star-full",
              "star-empty"
            ],
            "vip": null,
            "tax": null,
            "variants": [
              {
                "id": "H178-10",
                "name": "Tortoise",
                "color": "#303032",
                "orderMonth": "12",
                "orderYear": "2017",
                "locationCategory": "Online Retailer",
                "purchaseLocation": "Dicks.com",
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$219.00",
                "salePrice": null,
                "url": "#H178-10",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "H178-10",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "178-02",
                "name": "Gloss Black",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$219.00",
                "salePrice": null,
                "url": "#178-02",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "178-02",
                  "inactive": true,
                  "material": "superthin"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 1,
            "total": "$219.00"
          },
          {
            "name": "LEIA",
            "summary": null,
            "description": null,
            "category": "Classic",
            "rating": [
              "star-full",
              "star-full",
              "star-half",
              "star-empty",
              "star-empty"
            ],
            "vip": null,
            "tax": null,
            "variants": [
              {
                "id": "RS708-26D",
                "name": "Brown Feathered",
                "color": "#543a10",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/RS708-26D_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": true,
                "price": "$299.00",
                "salePrice": null,
                "url": "#RS708-26D",
                "status": null,
                "stock": "In Stock",
                "lens": "Maui Rose®",
                "lensId": "mauirose",
                "lensFull": "Maui Rose® - Subtle rose tone is the most comfortable on the eyes.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "RS708-26D",
                  "inactive": null,
                  "material": "superthin"
                }
              },
              {
                "id": "HS708-10L",
                "name": "Tokyo Tortoise",
                "color": "#303032",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/HS708-10L_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#HS708-10L",
                "status": null,
                "stock": "In Stock",
                "lens": "HCL® Bronze",
                "lensId": "hclbronze",
                "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "HS708-10L",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "GS708-03D",
                "name": "Blue with Rootbeer",
                "color": "#5353df",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/GS708-03D_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#GS708-03D",
                "status": null,
                "stock": "In Stock",
                "lens": "Neutral Grey",
                "lensId": "neutralgrey",
                "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "GS708-03D",
                  "inactive": true,
                  "material": "superthin"
                }
              },
              {
                "id": "B708-02",
                "name": "Black Gloss",
                "color": "#000",
                "orderMonth": null,
                "orderYear": null,
                "locationCategory": null,
                "purchaseLocation": null,
                "images": {
                  "front": "https://s7d2.scene7.com/is/image/mauijim/B708-02_front?$config1800$",
                  "angle": "https://s7d2.scene7.com/is/image/mauijim/B708-02_quarter?$config1800$",
                  "side": "https://s7d2.scene7.com/is/image/mauijim/B708-02_side?$config1800$"
                },
                "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
                "swatchImage": null,
                "active": null,
                "price": "$299.00",
                "salePrice": null,
                "url": "#B708-02",
                "status": null,
                "stock": "In Stock",
                "lens": "Blue Hawaii",
                "lensId": "bluehawaii",
                "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
                "lensMaterial": "SuperThin Glass",
                "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
                "lensDetailData": {
                  "product": "B708-02",
                  "inactive": true,
                  "material": "superthin"
                }
              }
            ],
            "callToAction": null,
            "mauijim": null,
            "zeal": null,
            "excludeVariants": null,
            "mymaui": "true",
            "prescription": null,
            "qty": 2,
            "total": "$598.00"
          }
        ]
      }
    }
  ],
  "billing": {
    "card": [
      "American Express",
      "John Doe",
      "****-****-**12-3456",
      "10/2018"
    ],
    "address": [
      "John Doe",
      "One Aloha Lane",
      "Peoria, IL 61615",
      "United States"
    ]
  },
  "shipping": [
    "John Doe",
    "One Aloha Lane",
    "Peoria, IL 61615",
    "United States"
  ],
  "amount": [
    {
      "label": "Subtotal (3)",
      "value": "$1096.00"
    },
    {
      "label": "Gift Bag (1)",
      "value": "$3.99"
    },
    {
      "label": "Delivery",
      "value": "$0.00"
    },
    {
      "label": "Tax",
      "value": "$48.99"
    },
    {
      "label": "Total",
      "value": "$526.99"
    }
  ]
}
  • Content:
    .order-details {
    
    
      .order {
        padding-bottom: 20px;
        border-bottom: 1px solid $color-light;
      }
    
      .order__order-shipping {
        margin-top: 0;
      }
    
      .order__item-info {
        display: inline;
    
        &:nth-last-child(2)::after {
          border: 0;
          content: '';
        }
    
        &:last-child {
          display: block;
        }
      }
    
      .order__item-line-item {
        display: block;
        padding-right: 0;
        padding-left: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        .order__order-summary {
          @include clearfix;
    
          span {
            display: block;
            width: 33%;
            margin: 0;
            float: left;
          }
    
          strong {
            display: block;
          }
        }
    
        .order__item-image-wrapper {
          margin-top: 47px;
          margin-right: 0;
        }
    
        .order__item-summary,
        .order__item-line-item {
          width: auto;
          margin-left: 115px;
        }
    
        // Show labels here, but not in order history.
        .order__item-info {
          display: block;
    
          &:not(:last-child)::after {
            border: 0;
            content: '';
          }
    
          strong {
            display: inline;
          }
        }
    
        .order {
          padding-bottom: 0;
          border-bottom: 0;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .order__order-summary {
          font-size: 1.9rem;
          line-height: 2.3rem;
    
          strong {
            font-size: 1.4rem;
            line-height: 2.0rem;
          }
        }
    
        .order__item {
          display: flex;
          justify-content: space-between;
        }
    
        .order__item-image-wrapper,
        .order__item-summary,
        .order__item-line-item {
          width: auto;
          max-height: none;
          margin: 0;
          float: none;
        }
    
        .order__item-image-wrapper {
          display: flex;
          flex-grow: 2;
          align-items: center;
        }
    
        .order__item-summary {
          flex-grow: 4;
          width: 30%;
          padding-right: 20px;
          box-sizing: border-box;
        }
    
        .order__item-line-item {
          flex-grow: 3;
          padding-top: 33px;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    }
    
    .order-details__title {
      margin-top: 5px;
      margin-bottom: 20px;
      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;
      }
    }
    
    .order-details__full-info {
      margin-top: 40px;
      padding: 10px;
      background: $color-lighter;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      p {
        margin-top: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        margin-top: 10px;
      }
    }
    
    .order-details__label {
      color: $color-darkest;
      font-weight: bold;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 10px;
      }
    }
    
    .order-details__billing-info,
    .order-details__shipping-info,
    .order-details__amount-info {
      @include breakpoint($breakpoint-md) {
        width: 50%;
        float: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 33%;
      }
    }
    
    .order-details__actions {
      margin-top: 20px;
    }
    
  • URL: /components/raw/order-details/order-details.scss
  • Filesystem Path: src/components/02-components/orders/order-details/order-details.scss
  • Size: 3.1 KB
  • Handle: @order-details
  • Preview:
  • Filesystem Path: src/components/02-components/orders/order-details/order-details.html
  • References (1): @order

There are no notes for this item.