<button class="button button--primary button--add-to-cart" data-variant-202-02-enabled="true" data-variant-B202-2M-enabled="true" data-variant-H202-10-enabled="true" data-variant-H202-2M-enabled="true" data-variant-H202-70-enabled="true" data-variant-HT202-71-enabled="true"
    data-variant-H202-2M-2-enabled="false" data-variant-H202-70-2-enabled="true" data-variant-HT202-71-2-enabled="true" aria-disabled="true">Add to Cart</button>
<button class="button button--primary button--add-to-cart"
  {{#each variants}}{{#if (equals this.stock "In Stock")}}data-variant-{{this.sku}}-enabled="true" {{else}}
  data-variant-{{this.sku}}-enabled="false" {{/if}}{{/each}}
  aria-disabled="{{#if (equals variants.0.stock "In Stock")}}true{{else}}false{{/if}}">Add to Cart</button>
{
  "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": "5.0",
  "vip": false,
  "tax": "Inkl. MWST",
  "variants": [
    {
      "sku": "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": false,
      "active": true,
      "price": "$149.00",
      "originalPrice": "$229.00",
      "url": "#undefined",
      "status": "New",
      "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": null,
        "inactive": false,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$189.00",
      "originalPrice": "$219.00",
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": "New",
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "mauipure"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": "New",
      "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": null,
        "inactive": true,
        "material": "superthin"
      }
    },
    {
      "sku": "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": false,
      "active": false,
      "price": "$229.00",
      "originalPrice": null,
      "url": "#undefined",
      "status": false,
      "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": null,
        "inactive": true,
        "material": "mauipure"
      }
    }
  ],
  "callToAction": false,
  "mauijim": false,
  "zeal": false,
  "excludeVariants": false,
  "mymaui": true,
  "prescription": true
}
  • Content:
    .button--primary {
      &[aria-disabled='true'] {
        background-color: #e2e2e2;
        color: #fff;
        pointer-events: none;
      }
    }
    
    .button--add-to-cart {
      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/pdp-add-to-cart-button/pdp-add-to-cart-button.scss
  • Filesystem Path: src/components/01-elements/pdp-elements/pdp-add-to-cart-button/pdp-add-to-cart-button.scss
  • Size: 393 Bytes

There are no notes for this item.