Bundle Pack

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="bundle-pack__wrapper">
    <div class="bundle-pack__title">
        <strong>Koop samen met voordeel!</strong> <br />
    </div>

    <div class="bundle-pack__content-wrapper">
        <div class="bundle-pack__list bundle-pack__list--wide">
            <div class="bundle-pack__list--item bundle-pack__list--item--wide bundle-pack__list--item--discount-applied bundle-pack__list--item--main">
                <div class="catalog-item " tabindex="0">

                    <div class="catalog-item__image">
                        <a href="#" class="" tabindex="-1">
                            <div class="lazyload-wrapper catalog-item__image-wrapper">
                                <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
                            </div>

                        </a>
                    </div>
                    <div class="catalog-item__content">
                        <h2 class="catalog-item__title">
                            <a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
                        </h2>

                        <div class="catalog-item__price">
                            <div class="price  ">
                                <span class="price__value price__value--special ">
                                    <ins aria-label="On sale at: €109,95">

                                        €

                                        109,95

                                    </ins>
                                </span>
                                <span class="price__value price__value--old ">
                                    <del aria-label="Price reduced from: €129,95">
                                        €
                                        129,95

                                    </del>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="catalog-item__actions">
                        <button class="button button--icon" type="button" aria-label="click to do something">

                            <svg class="icon button__icon" role="img">
                                <title>Compare</title>
                                <use xlink:href="/images/icons-sprite.svg#compare"></use>
                            </svg>

                        </button>

                    </div>
                </div>

            </div>
            <span class="bundle-pack__plus">+</span>

            <div class="bundle-pack__items--item bundle-pack__item--wide 
            ">
                <div class="bundle-pack__items--top">
                    <input type="checkbox" class="bundle-pack__items--checkbox" id="checkboxBundle" name="checkboxBundle" checked="" />
                    <label class="bundle-pack__items--label" for="checkboxBundle"></label>
                </div>

                <div class="catalog-item " tabindex="0">

                    <div class="catalog-item__image">
                        <a href="#" class="" tabindex="-1">
                            <div class="lazyload-wrapper catalog-item__image-wrapper">
                                <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/UFC_SCHEENBESCHERMERS.jpg" alt="image alt text">
                            </div>

                        </a>
                    </div>
                    <div class="catalog-item__content">
                        <h2 class="catalog-item__title">
                            <a href="">UFC Scheenbeschermers</a>
                        </h2>

                        <div class="catalog-item__price">
                            <div class="price  ">
                                <span class="price__value price__value--special ">
                                    <ins aria-label="On sale at: €109,95">

                                        €

                                        109,95

                                    </ins>
                                </span>
                                <span class="price__value price__value--old ">
                                    <del aria-label="Price reduced from: €129,95">
                                        €
                                        129,95

                                    </del>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="catalog-item__actions">
                        <button class="button button--icon" type="button" aria-label="click to do something">

                            <svg class="icon button__icon" role="img">
                                <title>Compare</title>
                                <use xlink:href="/images/icons-sprite.svg#compare"></use>
                            </svg>

                        </button>

                    </div>
                </div>

                <div class="bundle-pack__items--alternative">
                    <a href="#" class="bundle-pack__items--alternative--link">
                        Kies alternatief
                    </a>
                </div>
            </div>

            <div class="bundle-pack__items--item bundle-pack__item--wide
            ">
                <div class="bundle-pack__items--top">
                    <input type="checkbox" class="bundle-pack__items--checkbox" id="checkboxBundle" name="checkboxBundle" checked="" />
                    <label class="bundle-pack__items--label" for="checkboxBundle"></label>
                </div>
                <div class="catalog-item " tabindex="0">

                    <div class="catalog-item__image">
                        <a href="#" class="" tabindex="-1">
                            <div class="lazyload-wrapper catalog-item__image-wrapper">
                                <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/UFC_BITJE.jpg" alt="image alt text">
                            </div>

                        </a>
                    </div>
                    <div class="catalog-item__content">
                        <h2 class="catalog-item__title">
                            <a href="">UFC Bitje</a>
                        </h2>

                        <div class="catalog-item__price">
                            <div class="price  ">
                                <span class="price__value price__value--special ">
                                    <ins aria-label="On sale at: €109,95">

                                        €

                                        109,95

                                    </ins>
                                </span>
                                <span class="price__value price__value--old ">
                                    <del aria-label="Price reduced from: €129,95">
                                        €
                                        129,95

                                    </del>
                                </span>
                            </div>

                        </div>
                    </div>

                    <div class="catalog-item__actions">
                        <button class="button button--icon" type="button" aria-label="click to do something">

                            <svg class="icon button__icon" role="img">
                                <title>Compare</title>
                                <use xlink:href="/images/icons-sprite.svg#compare"></use>
                            </svg>

                        </button>

                    </div>
                </div>

                <div class="bundle-pack__items--alternative">
                    <a href="#" class="bundle-pack__items--alternative--link">
                        Kies alternatief
                    </a>
                </div>
            </div>

        </div>

        <span class="bundle-pack__equal">=</span>
        <div class="bundle-pack__summary-content">

            <div class="bundle-pack__price-wrapper">
                <div class="bundle-pack__discount bundle-pack__discount--summary">
                    <span class="amount" data-amrelated-js="bundle-price-discount">
                        10% korting
                    </span>

                    <div class="price  ">
                        <span class="price__value price__value--special ">
                            <ins aria-label="On sale at: €109,95">

                                €

                                109,95

                            </ins>
                        </span>
                        <span class="price__value price__value--old ">
                            <del aria-label="Price reduced from: €129,95">
                                €
                                129,95

                            </del>
                        </span>
                    </div>

                </div>

                <div class="bundle-pack__usps">
                    <div class="bundle-pack__usps--left">
                        op bundels
                    </div>

                    <div class="bundle-pack__usps--right">
                        <div class="bundle-pack__usps--icon">
                            <svg class="icon brief-info__icon" role="img">
                                <title>USP Check</title>
                                <use xlink:href="/images/icons-sprite.svg#usp-check"></use>
                            </svg>

                        </div>
                        <div class="bundle-pack__usps--title">
                            Gratis bezorgd
                        </div>
                    </div>
                </div>
            </div>

            <div class="bundle-pack__addtocart-wrapper">
                <button class="button product-view__add-to-cart-btn" type="button">
                    In winkelwagen
                    <svg class="icon button__icon" role="img">
                        <title>custom-cart</title>
                        <use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
                    </svg>

                </button>

            </div>

        </div>
    </div>
</div>


        <div class="bundle-pack__wrapper">
    <div class="bundle-pack__title">
        <strong>{{ BuyTitle }}</strong> <br />
        {{!-- <span class=""> {{ mainTitle }} </span> --}}
    </div>

    <div class="bundle-pack__content-wrapper">
        <div class="bundle-pack__list bundle-pack__list--wide">
            <div class="bundle-pack__list--item bundle-pack__list--item--wide bundle-pack__list--item--discount-applied bundle-pack__list--item--main">
                {{ render '@catalog-item' mainProduct }}
            </div>
            <span class="bundle-pack__plus">+</span>
            
            {{!-- <div class="bundle-pack__items bundle-pack__items-selected"> --}}

            <div class="bundle-pack__items--item bundle-pack__item--wide 
            {{!-- IF checkbox = CHECKED add this class
            IT IS NOT WORKING YET --}}
                {{#if checkboxCheck }}
                    bundle-pack__item--selected
                {{/if}}
            ">
                <div class="bundle-pack__items--top">
                    <input type="checkbox" 
                            class="bundle-pack__items--checkbox"
                            id="checkboxBundle"
                            name="checkboxBundle"
                            checked="{{ checkboxCheck }}"
                    />
                    <label class="bundle-pack__items--label" for="checkboxBundle"></label>
                </div>

                {{ render '@catalog-item' bundleItem1 }}

                <div class="bundle-pack__items--alternative">
                    <a href="{{ alternativeLink }}" class="bundle-pack__items--alternative--link">
                        {{ alternativeLabel }}
                    </a>
                </div>
            </div>

            {{!-- <span class="bundle-pack__plus"></span> --}}

            <div class="bundle-pack__items--item bundle-pack__item--wide
            {{!-- IF checkbox = CHECKED add this class
            IT IS NOT WORKING YET --}}
                {{#if checkboxCheck }}
                    bundle-pack__item--selected
                {{/if}}
            ">
                <div class="bundle-pack__items--top">
                    <input type="checkbox" 
                            class="bundle-pack__items--checkbox"
                            id="checkboxBundle"
                            name="checkboxBundle"
                            checked="{{ checkboxCheck }}"
                    />
                    <label class="bundle-pack__items--label" for="checkboxBundle"></label>
                </div>
                {{ render '@catalog-item' bundleItem2 }}

                <div class="bundle-pack__items--alternative">
                    <a href="{{ alternativeLink }}" class="bundle-pack__items--alternative--link">
                        {{ alternativeLabel }}
                    </a>
                </div>
            </div>

            {{!-- </div> --}}
        </div>

        <span class="bundle-pack__equal">=</span>
        <div class="bundle-pack__summary-content">
            {{!-- <div class="bundle-pack__summary--description">
                {{ summaryDescription }}
            </div> --}}

            <div class="bundle-pack__price-wrapper">
                <div class="bundle-pack__discount bundle-pack__discount--summary">
                    <span class="amount" data-amrelated-js="bundle-price-discount">
                        {{ totalDiscount }} {{ totalSave }}
                    </span> 
              
                    {{ render (component price.content) price.contentContext }}
                </div>

                <div class="bundle-pack__usps">
                    <div class="bundle-pack__usps--left">
                        {{ uspLeft }}
                    </div>

                    <div class="bundle-pack__usps--right">
                        <div class="bundle-pack__usps--icon">
                            {{ render '@icon' uspRight.icon }}
                        </div>
                        <div class="bundle-pack__usps--title">
                            {{ uspRight.title.text }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="bundle-pack__addtocart-wrapper">
                {{ render '@button--icon' addToCartBtn }}
            </div>

           
        </div>
    </div>
</div>


        
            
            {
  "tag": "div",
  "BuyTitle": "Koop samen met voordeel!",
  "mainTitle": "de UFC MMA Set",
  "mainDiscount": "10%",
  "mainImage": "/images/product/UFC_MMA_GLOVES.png",
  "priceLabel": "vanaf",
  "totalSave": "korting",
  "totalDiscount": "10%",
  "finalPrice": "€ 250,85",
  "summaryDescription": "Selecteer deze UFC MMA set en krijg 10% bundel korting!",
  "alternativeLink": "#",
  "alternativeLabel": "Kies alternatief",
  "price": {
    "content": "price--with-special-price"
  },
  "mainProduct": {
    "type": "product",
    "color": "white",
    "overflow": "",
    "TagOverflow": "",
    "tag": "div",
    "image": {
      "wrapperClass": "catalog-item__image-wrapper",
      "dataSrc": "/images/product/UFC_MMA_GLOVES.png"
    },
    "title": {
      "tag": "h2",
      "text": "UFC MMA Handschoenen zonder duim - Zwart/Wit",
      "class": "catalog-item__name",
      "linkClass": "catalog-item__name-link catalog-item__name-link--red"
    },
    "primaryAction": false
  },
  "bundleItem1": {
    "type": "product",
    "color": "white",
    "overflow": "",
    "TagOverflow": "",
    "tag": "div",
    "bundle": true,
    "discount": "10%",
    "checkboxCheck": true,
    "image": {
      "wrapperClass": "catalog-item__image-wrapper",
      "dataSrc": "/images/product/UFC_SCHEENBESCHERMERS.jpg"
    },
    "title": {
      "tag": "h2",
      "text": "UFC Scheenbeschermers",
      "class": "catalog-item__name",
      "linkClass": "catalog-item__name-link catalog-item__name-link--red"
    }
  },
  "bundleItem2": {
    "type": "product",
    "color": "white",
    "overflow": "",
    "TagOverflow": "",
    "tag": "div",
    "bundle": true,
    "discount": "10%",
    "checkboxCheck": false,
    "image": {
      "wrapperClass": "catalog-item__image-wrapper",
      "dataSrc": "/images/product/UFC_BITJE.jpg"
    },
    "title": {
      "tag": "h2",
      "text": "UFC Bitje",
      "class": "catalog-item__name",
      "linkClass": "catalog-item__name-link catalog-item__name-link--red"
    }
  },
  "addToCartBtn": {
    "tag": "button",
    "class": "product-view__add-to-cart-btn",
    "attributes": "type=\"button\"",
    "icon": {
      "id": "custom-cart",
      "title": "custom-cart",
      "class": "button__icon"
    },
    "text": "In winkelwagen"
  },
  "uspLeft": "op bundels",
  "uspRight": {
    "icon": {
      "id": "usp-check",
      "title": "USP Check",
      "class": "brief-info__icon"
    },
    "title": {
      "class": "",
      "tag": "span",
      "text": "Gratis bezorgd"
    }
  }
}

File:

Content:


                                .bundle-pack {
    &__wrapper {
        padding: 25px 0;
    }

    &__title {
        font-size: 25px;
        margin: 25px 0;
        font-family: $font-family-saira;
    }

    &__content-wrapper {
        display: grid;
        grid-gap: 16px;

        grid-template-areas:
        "list" 
        "icon"
        "summary";
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        
        @include mq($screen-m) {
            grid-template-areas:
            "list list" 
            "icon summary";
            grid-template-columns: 18px 1fr;
        }

        @include mq($screen-l) {
            grid-template-areas:
            "list icon summary";
            grid-template-columns: calc(70% - 24px) 18px calc(30% - 42px);
        }
      
    }

    &__list {
        grid-area: list;
        
        display: grid;
        grid-gap: 16px;
        grid-template-areas:
        "mainProduct"
        "icon"
        "bundleProducts"
        "bundleProducts";
        grid-template-columns: 1fr;

        @include mq($screen-m) {
            grid-template-areas:
            "mainProduct icon bundleProducts bundleProducts";
            grid-template-columns: 1fr 18px 1fr 1fr;
        }

        &--wide {
            flex-wrap: nowrap;
        }

        &--item {
            grid-area: mainProduct;
            width: 100%;
            align-self: center;

            &--main {
                height: 100%;
            }
        }

        & .catalog-item {
            &__wrapper {
                height: 100%;
                justify-content: center;
            }

            &__image {
                max-width: 150px;
                align-self: center;

                & .image {
                    padding: 16px 0;
                }
            }
            &__info {
                align-self: center;
                text-align: center;
            }
        }
    }

    &__items {
        grid-area: bundleProducts;

        &--item {
            width: 100%;
            position: relative;        
            opacity: 0.5;
        }

        &--top {
            position: absolute;
            right: 16px;
            top: 16px;
            z-index: 2;
        }

        &--checkbox {
            z-index: 2;
            box-sizing: border-box;
            cursor: pointer;
            width: 20px;
            height: 20px;            
        }

        &--alternative {
            display: none; //choosing an alternative is not possible with current bundle extention, but if it is possible it will be amazing to use

            position: absolute;
            bottom: 18px;
            left: 66px;
            z-index: 2;

            &--link {
                font-family: $font-family-saira;
                color: $gray;
    
                &:hover {
                    color: $blue;
                }
            }
        }
    }

    &__item {
        &--selected {
            opacity: 1;
        }
    }

    &__plus,
    &__equal {
        grid-area: icon;

        font-size: 34px;
        color: $red;
        align-self: center;
        margin: 0 auto;
        
    }

    &__summary-content {
        grid-area: summary;
        align-self: center;
        padding: 8px;

       
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        @include mq($screen-m) {
            flex-direction: row;
        }

        @include mq($screen-l) {
            flex-direction: column;
        }

        &--description {
            color: $gray-font;
        }
    }

    &__price-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        
        @include mq($screen-m) {
            flex-basis: 55%;
        }

        @include mq($screen-l) {
            flex-basis: 100%;
        }

        & .main.price {
            font-size: $font-size-extra-large;
            font-family: $font-family-roboto-condensed;
            font-weight: bolder;
            color: $black;
        }

        & .price {
            display: flex;
            flex-direction: row-reverse;
        }

        & .price-box, 
        .price__value {
            font-size: 14px;
        }
    }

    &__discount {
        border-radius: $border-radius;
        color: $red;
        font-family: $font-family-saira;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    &__usps {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-family: $font-family-saira;

        &--icon {
            width: 18px;
            height: 18px;
            margin-right: $spacer;
        }

        &--right {
            display: flex;
        }
    }

    &__addtocart-wrapper {
        width: 100%;
        margin-top: 8px;

        @include mq($screen-m) {
            flex-basis: 40%;
        }

        @include mq($screen-l) {
            flex-basis: 100%;
        }

        & .action.primary {
            text-align: center;
            background: $red;
            color: $white;
            height: 40px;
        }
    }

    
}

URL: /components/raw/bundle-pack/_bundle-pack.scss
Filesystem Path: build/components/03-modules/bundle-pack/_bundle-pack.scss
Size: 5.3 KB

Handle: @bundle-pack
Preview:
- With layout
- Component only
Filesystem Path: build/components/03-modules/bundle-pack/bundle-pack.hbs
References (3): @catalog-item, @icon, @button--icon
Referenced by (2): @product-view, @product-view--simple

There are no notes for this item.