<div class="modal-wrapper js-modal" id="product-add">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--product-add modal--mobile-overlay">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

      </button>
            <span class="modal__title">Added to Your Cart</span>
            <div class="modal__content">
                <form class="product-add">
                    <div class="product-add__items">
                        <div class="product-add__item ">
                            <div class="product-add__item-image-wrapper">
                                <img class="product-add__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;160">
                            </div>
                            <div class="product-add__item-wrapper">
                                <p class="product-add__name">Gloss Black</p>
                            </div>
                            <span class="product-add__item-info product-add__item-info--qty"><strong>Qty:</strong>&nbsp;1</span>
                            <span class="product-add__item-info"><strong>Frame:</strong> Gloss Black</span>
                            <span class="product-add__item-info"><strong>Lens:</strong> Neutral Grey</span>
                            <span class="product-add__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                            <p class="product-add__price">$149.00</p>
                        </div>
                    </div>
                    <div class="product-add__actions">
                        <button class="button button--primary">Go to Shopping Cart</button>

                        <button class="button button--outlined">Continue Shopping</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}} modal--mobile-overlay">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <span class="modal__title">{{title}}</span>
      {{/if}}
      <div class="modal__content">
        {{#if description}}
        <p class="modal__description">{{description}}</p>
        {{/if}}
        <form class="product-add">
          <div class="product-add__items">
          {{#each products}}
          <div class="product-add__item {{#if multiple}}product-add__item--multiple{{/if}}">
            <div class="product-add__item-image-wrapper">
              <img class="product-add__item-image" src="{{productImage variants.0.images.front 160}}">
            </div>
            <div class="product-add__item-wrapper">
              <p class="product-add__name">{{variants.0.name}}</p>
              {{#if sku}}
              <span class="product-add__item-info"><strong>SKU:</strong> {{variants.0.id}}</span>
              {{/if}}
            </div>
            {{#if qty}}
            <span class="product-add__item-info product-add__item-info--qty"><strong>Qty:</strong>&nbsp;{{qty}}</span>
            {{/if}}
            {{#if details}}
            <span class="product-add__item-info"><strong>Frame:</strong> {{variants.0.name}}</span>
            <span class="product-add__item-info"><strong>Lens:</strong> {{variants.0.lens}}</span>
            <span class="product-add__item-info"><strong>Lens Material:</strong> {{variants.0.lensMaterial}}</span>
            <p class="product-add__price">{{variants.0.price}}</p>
            {{/if}}
          </div>
          {{/each}}
          </div>
          {{#if actions}}
          <div class="product-add__actions">
            {{#each actions}}
              {{render (dynamicVariant 'buttons' type) this merge=true}}
            {{/each}}
          </div>
          {{/if}}
        </form>
      </div>
    </div>
  </div>
</div>
{
  "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,
          "prescription": "true",
          "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": "New",
          "prescription": "true",
          "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,
          "prescription": "true",
          "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,
          "prescription": "true",
          "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,
          "prescription": "true",
          "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": "New",
          "prescription": "false",
          "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,
          "prescription": "true",
          "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": null,
          "prescription": "true",
          "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",
          "prescription": "true",
          "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": true,
      "sku": null,
      "qty": 1,
      "details": true
    }
  ],
  "modal": true,
  "id": "product-add",
  "title": "Added to Your Cart",
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Go to Shopping Cart"
    },
    {
      "type": "outlined",
      "buttonValue": "Continue Shopping"
    }
  ]
}
  • Content:
    $min-height: 568px;
    
    .modal.modal--product-add {
      .modal__inner {
        max-width: 40rem;
        padding-bottom: 0;
      }
    
      .modal__content {
        padding-bottom: 0;
      }
    }
    
    .product-add__item {
      &--multiple {
        display: flex;
        margin-bottom: 2.5rem;
      }
    }
    
    .product-add__item-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
    
    .product-add__item-image-wrapper {
      flex: 1;
    }
    
    .product-add__items {
      max-height: 15rem;
      overflow-y: scroll;
    
      @media (min-height: $min-height) {
        max-height: 30rem;
      }
    }
    
    .product-add__item-image {
      display: block;
      margin: 0 auto;
    }
    
    .product-add__name {
      margin: .5rem 0 2rem;
      font-weight: $font-weight-bold;
      text-align: center;
    }
    
    .product-add__item-info {
      display: block;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      &--qty {
        margin-top: -1rem;
        margin-bottom: 1rem;
        text-align: center;
      }
    }
    
    // This is necessary because of the scoping we do in b2b.scss.
    // To-do: Find a better way to accomplish this.
    .product-add__item--multiple {
      .product-add__name {
        flex: 2;
        margin-top: 0;
        margin-bottom: .5rem;
        text-align: left;
        text-transform: uppercase;
      }
    
      .product-add__item-info {
        flex: 1;
        margin: 0;
      }
    
      .product-add__item-info--qty {
        flex: 0;
      }
    }
    
    .product-add__price {
      margin: 3rem 0 4rem;
      color: $shopping-cart-item-price-color;
      font-size: 2.7rem;
      text-align: center;
    }
    
    .product-add__actions {
      margin: 0 0 1rem;
      text-align: center;
    
      @media (min-height: $min-height) {
        margin-bottom: 2rem;
      }
    
      .button {
        width: 100%;
      }
    
      .button--plain-text {
        color: $color-error;
      }
    
      .button--outlined {
        display: none;
        margin-top: 2rem;
    
        @media (min-height: $min-height) {
          display: block;
        }
      }
    }
    
  • URL: /components/raw/product-add/product-add.scss
  • Filesystem Path: src/components/01-elements/modals/product-add/product-add.scss
  • Size: 1.8 KB

There are no notes for this item.