<div class="product-price js-product-price" data-product-id="202-02">
    <div class="product-price__inner">
        <span class="product-price__value">$149.00</span>

        <span class="product-price__sale">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="B202-2M">
    <div class="product-price__inner">
        <span class="product-price__value">$189.00</span>

        <span class="product-price__sale">$219.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="H202-10">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="H202-2M">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="H202-70">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="HT202-71">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="H202-2M-2">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">Out of Stock</span>
        </div>
    </div>
    <button class="button button--primary button--disabled product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="H202-70-2">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
<div class="product-price js-product-price js-hidden" data-product-id="HT202-71-2">
    <div class="product-price__inner">
        <span class="product-price__value">$229.00</span>

        <div class="product-price__details">
            <span class="product-price__tax">Inkl. MWST</span>
            <span class="product-price__inventory">In Stock</span>
        </div>
    </div>
    <button class="button button--primary product-price__add-button">Add to Cart</button>

</div>
{{#each product.variants}}
<div class="product-price js-product-price{{#unless active}} js-hidden{{/unless}}" data-product-id="{{id}}">
  <div class="product-price__inner">
    <span class="product-price__value">{{price}}</span>
    {{#if ../zeal}}{{#if salePrice}}
    <span class="product-price__sale">{{salePrice}}</span>
    {{/if}}{{/if}}
    <div class="product-price__details">
      {{#if ../product.tax}}
      <span class="product-price__tax">{{../product.tax}}</span>
      {{else}}
      <span class="product-price__inventory">{{stock}}</span>
      {{/if}}
      {{#if ../product.tax}}
      <span class="product-price__inventory">{{stock}}</span>
      {{/if}}
    </div>
  </div>
  {{#if (equals stock "In Stock")}}
  {{render '@buttons--primary' ../inStockButton merge=true}}
  {{else}}
  {{render '@buttons--primary' ../outOfStockButton merge=true}}
  {{/if}}
</div>
{{/each}}
{
  "pageCss": [
    "products"
  ],
  "product": {
    "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-half",
      "star-empty",
      "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": "New",
        "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": "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-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": "New",
        "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,
        "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": 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-2",
          "inactive": true,
          "material": "mauipure"
        }
      }
    ],
    "callToAction": null,
    "mauijim": null,
    "zeal": null,
    "excludeVariants": null,
    "mymaui": "true",
    "prescription": null
  },
  "inStockButton": {
    "buttonValue": "Add to Cart",
    "classes": [
      "product-price__add-button"
    ]
  },
  "outOfStockButton": {
    "buttonValue": "Add to Cart",
    "classes": [
      "button--disabled",
      "product-price__add-button"
    ]
  },
  "zeal": true
}
  • Content:
    .product-price__inner {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 1px;
    }
    
    .product-price__details {
      width: 100%;
      text-align: right;
    }
    
    .product-price__value {
      display: block;
      padding-top: 1px;
      color: $color-medium-dark;
      font-size: 2.7rem;
    }
    
    .product-price__sale {
      margin: 0 0 4px 8px;
      color: $color-error;
      text-decoration: line-through;
    }
    
    .product-price__tax {
      display: block;
      margin-bottom: 5px;
      color: $color-medium-dark;
      font-size: 1.2rem;
    }
    
    .product-price__inventory {
      display: block;
      padding-bottom: 3px;
      color: $color-darkest;
      font-size: 1.4rem;
    }
    
    .product-price__add-button {
      width: 100%;
      line-height: 5.0rem;
    
      @include breakpoint($breakpoint-sm-only) {
        padding: 0;
      }
    
      @include breakpoint($breakpoint-md) {
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 300px;
      }
    }
    
  • URL: /components/raw/product-price/product-price.scss
  • Filesystem Path: src/components/02-components/product-price/product-price.scss
  • Size: 914 Bytes

There are no notes for this item.