<dialog class="minicart-content js--popup " data-popup="popup-minicart" role="alertdialog">
<div class="minicart-content__bar"></div>
<div class="minicart-content__wrapper">
<div class="minicart-content__total">
<div class="minicart-content__total-text">
2 producten in winkelwagen
</div>
<div class="minicart-content__total-close">
<svg class="icon minicart-content__total-close__icon js--popup__close-button" role="img">
<title>close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</div>
</div>
<div class="minicart-content__products-list">
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
UFC MMA Handschoenen zonder duim
</a>
</h3>
<p class="minicart-product__description">
Deze leren wedstrijdhandschoenen van UFC zijn de enige handschoenen die gedragen mogen worden door de UFC vechters in Octagon!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
< class="dropdown-list__label " aria-expanded="false" aria-controls="see-details-1">
</>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
€ 109,95
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
Venum (Kick)bokshandschoenen Contender 2.0
</a>
</h3>
<p class="minicart-product__description">
Dit zijn de nieuwe bestsellers onder de kickboxhandschoenen van Venum! Betaalbare (kick)bokshandschoenen van Venum, zonder concessies aan kwaliteit!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label minicart-product__attributes-button" aria-expanded="false" aria-controls="see-details" aria-controls="see-details">
Bekijk Details
<svg class="icon dropdown-list__icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="see-details" class="dropdown-list__content minicart-product__attributes-button" aria-hidden="true">
<dl class="list list--description minicart-product__attributes-list">
<dt class="list__label">Maat</dt>
<dd class="list__value">12 oz</dd>
<dt class="list__label">Kleur</dt>
<dd class="list__value">Zwart/Grijs-Wit</dd>
</dl>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
44,95
</div>
</div>
</div>
</div>
</div>
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
Totaal
</div>
<div class="minicart-content__summary-value">
€ 219,90
</div>
</div>
<div class="minicart-content__actions">
<div class="row">
<div class="col-xs-7">
<button class="button button minicart-content__actions--button minicart-content__actions--button-showcart" type="button">
Bekijk en bewerk Winkelwagen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
<div class="col-xs-5">
<button class="button button minicart-content__actions--button minicart-content__actions--button-checkout" type="button">
Ga naar afrekenen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</dialog>
<dialog class="minicart-content js--popup {{ class }}" {{{ attributes }}} data-popup="popup-minicart" role="alertdialog">
<div class="minicart-content__bar"></div>
<div class="minicart-content__wrapper">
<div class="minicart-content__total">
<div class="minicart-content__total-text">
{{ counter}}
</div>
<div class="minicart-content__total-close">
{{ render '@icon' closeButton }}
</div>
</div>
<div class="minicart-content__products-list">
{{#each products}}
{{ render '@minicart-product' this merge=true }}
{{/each}}
</div>
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
{{ total }}
</div>
<div class="minicart-content__summary-value">
{{ price }}
</div>
</div>
<div class="minicart-content__actions">
<div class="row">
<div class="col-xs-7">
{{ render '@button--icon' showcartButton }}
</div>
<div class="col-xs-5">
{{ render '@button--icon' checkoutButton }}
</div>
</div>
</div>
</div>
</dialog>
{
"total": "Totaal",
"counter": "2 producten in winkelwagen",
"price": "€ 219,90",
"closeButton": {
"id": "close",
"title": "close",
"class": "minicart-content__total-close__icon js--popup__close-button"
},
"showcartButton": {
"tag": "button",
"class": "button minicart-content__actions--button minicart-content__actions--button-showcart",
"attributes": "type=\"button\"",
"text": "Bekijk en bewerk Winkelwagen",
"link": "/showcart",
"icon": {
"id": "angle-right",
"title": "Arrow right",
"class": "button__icon minicart-content__actions--button-icon"
}
},
"checkoutButton": {
"tag": "button",
"class": "button minicart-content__actions--button minicart-content__actions--button-checkout",
"attributes": "type=\"button\"",
"text": "Ga naar afrekenen",
"link": "/checkout",
"icon": {
"id": "angle-right",
"title": "Arrow right",
"class": "button__icon minicart-content__actions--button-icon"
}
},
"products": [
{
"productQty": {
"field": {
"id": "mini-qty-1"
}
},
"attributes": {
"id": "test-1",
"dropdowns": [
{
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"see-details-1\"",
"id": "see-details-1"
}
]
}
},
{
"productImage": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/VENUM-CONTENDER2.jpg",
"alt": "Venum (Kick)bokshandschoenen Contender 2.0"
},
"productName": "Venum (Kick)bokshandschoenen Contender 2.0",
"productDescription": "Dit zijn de nieuwe bestsellers onder de kickboxhandschoenen van Venum! Betaalbare (kick)bokshandschoenen van Venum, zonder concessies aan kwaliteit!",
"productPrice": "44,95",
"productQty": {
"field": {
"id": "mini-qty-2"
}
},
"updateQty": {
"tag": "button",
"text": "Bijwerken",
"class": "button--secondary minicart-product__update",
"attributes": "type=\"button\""
},
"attributes": {
"class": "minicart-product__attributes",
"dropdowns": [
{
"itemTag": "button",
"class": "minicart-product__attributes-button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"see-details\"",
"title": "Bekijk Details",
"id": "see-details",
"collapse": {
"id": "angle-down",
"title": "Arrow down",
"class": "dropdown-list__icon"
},
"contentElement": "list--description",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "minicart-product__attributes-list",
"elements": [
{
"label": "Maat",
"value": "12 oz"
},
{
"label": "Kleur",
"value": "Zwart/Grijs-Wit"
}
]
}
}
]
}
}
]
}
$minicart-content__font-size : $font-size-base !default;
$minicart-content__font-family : $font-family-saira;
$minicart-content__border : 1px solid $gray-lighter !default;
$minicart-content__top-bar-height : 4px !default;
$minicart-content__top-bar-width : 100% !default;
$minicart-content__top-bar-borderradius : 4px 4px 0 0 !default;
$minicart-content__top-bar-background : $red !default;
$minicart-content__total-text-color : $gray-font !default;
$minicart-content__total-text-font-size : $font-size-base !default;
$minicart-content__closeIcon-size : 20px !default;
$minicart-content__closeIcon-color : $gray !default;
$minicart-content__summary-font-weight : $font-weight-bold !default;
$minicart-content__summary-color : $color-primary !default;
$minicart-content__summary-margin : 20px 2px !default;
$minicart-content__actions-icon-size : 17px !default;
$minicart-content__actions--button-font-family : $font-family-evogria !default;
$minicart-content__actions--button-font-style : italic !default;
$minicart-content__actions--button-font-weight : normal !default;
$minicart-content__actions--button-font-size : 13px !default;
$minicart-content__actions--button-text-transform : uppercase !default;
$minicart-content__actions--button-width : 100% !default;
$minicart-content__actions--button-showcart-background : #ededed !default;
$minicart-content__actions--button-showcart-color : rgba(37, 37, 37, 0.35) !default;
$minicart-content__actions--button-checkout-background : $color-success !default;
$minicart-content__actions--button-checkout-background-hover : $color-success-hover !default;
$minicart-content__actions--button-checkout-color : $white !default;
$minicart-content__products-list-margin : $spacer 0 0 0 !default;
.minicart-content {
top: -4px;
background-color: transparent;
padding: 0;
border: 0;
border-radius: 0 0 $border-radius $border-radius;
height: auto !important; // sass-lint:disable-line no-important
max-height: calc(100vh - 90px);
width: 100%;
font-size: $minicart-content__font-size;
font-family: $minicart-content__font-family;
box-shadow: 0 4px 6px 0 rgba(51, 51, 51, 0.3);
z-index: 2;
@include mq($screen-l) {
max-height: calc(100vh - 120px);
}
&:not([open]) {
display: none;
}
&[open] {
display: block;
}
&__bar {
height: $minicart-content__top-bar-height;
width: $minicart-content__top-bar-width;
background-color: $minicart-content__top-bar-background;
border-radius: $minicart-content__top-bar-borderradius;
position: relative;
}
&__wrapper {
background-color: $white;
padding: $spacer--medium;
border-radius: 0 0 $border-radius $border-radius;
}
&__total {
display: flex;
justify-content: space-between;
align-items: center;
align-self: flex-start;
flex-wrap: nowrap;
&-text {
color: $minicart-content__total-text-color;
font-size: $minicart-content__total-text-font-size;
}
&-close {
cursor: pointer;
position: absolute;
right: $spacer--medium;
&__icon {
fill: $minicart-content__closeIcon-color;
width: $minicart-content__closeIcon-size;
height: $minicart-content__closeIcon-size;
}
}
}
&__summary {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: $minicart-content__summary-margin;
&-label {
display: flex;
justify-content: flex-start;
}
&-value {
display: flex;
justify-content: flex-end;
font-weight: $minicart-content__summary-font-weight;
font-family: $minicart-content__font-family;
color: $minicart-content__summary-color;
}
}
&__actions {
&--button {
font-family: $minicart-content__actions--button-font-family;
font-style: $minicart-content__actions--button-font-style;
font-weight: $minicart-content__actions--button-font-weight;
font-size: $minicart-content__actions--button-font-size;
text-transform: $minicart-content__actions--button-text-transform;
width: $minicart-content__actions--button-width;
position: relative;
display: flex;
justify-content: flex-start;
padding: 0 2.5rem 0 0.5rem;
&-showcart {
background-color: $minicart-content__actions--button-showcart-background;
color: $minicart-content__actions--button-showcart-color;
fill: $minicart-content__actions--button-showcart-color;
}
&-checkout {
background-color: $minicart-content__actions--button-checkout-background;
color: $minicart-content__actions--button-checkout-color;
fill: $minicart-content__actions--button-checkout-color;
&:hover {
background-color: $minicart-content__actions--button-checkout-background-hover;
}
span {
margin-left: $spacer--1;
}
}
&-icon {
width: $minicart-content__actions-icon-size;
height: $minicart-content__actions-icon-size;
fill: inherit;
position: absolute;
right: 10px;
}
}
}
&__products-list {
margin: $minicart-content__products-list-margin;
border-bottom: $minicart-content__border;
}
}
.popup--active {
.minicart-content {
display: block;
position: absolute;
}
}
There are no notes for this item.