<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
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">
€ 109,95
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
{{ render '@image' productImage }}
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
{{ productName }}
</a>
</h3>
<p class="minicart-product__description">
{{ productDescription }}
</p>
{{#if configurable }}
{{ render '@dropdown-list' attributes }}
{{/if}}
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
{{ render '@quantity-update' }}
</div>
<div class="minicart-product__price">
{{ productPrice }}
</div>
</div>
</div>
</div>
{
"productImage": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/UFC_MMA_GLOVES.png",
"alt": "UFC MMA Handschoenen zonder duim"
},
"productName": "UFC MMA Handschoenen zonder duim",
"productDescription": "Deze leren wedstrijdhandschoenen van UFC zijn de enige handschoenen die gedragen mogen worden door de UFC vechters in Octagon!",
"productPrice": "€ 109,95",
"productQty": {
"class": "input--inline minicart-product__input",
"label": {
"class": "minicart-product__label",
"text": "",
"hidden": false
},
"field": {
"attributes": "aria-label=\"Change the quantity\" min=\"1\"",
"class": "minicart-product__field",
"id": "mini-qty",
"name": "mini-qty",
"placeholder": "2",
"type": "text"
}
},
"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": "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": "XL"
},
{
"label": "Kleur",
"value": "Zwart/Wit"
}
]
}
}
]
},
"configurable": true
}
$minicart-product__font-family : $font-family-saira;
$minicart-product__padding : $spacer--medium 0 $spacer !default;
$minicart-product__border : 1px solid $gray-lighter !default;
$minicart-product__spacer : $spacer !default;
$minicart-product__image-width : 75px !default;
$minicart-product__info-padding : 0 0 0 $spacer--medium !default;
$minicart-product__name-line-height : 1.15 !default;
$minicart-product__name-font-size : 20px !default;
$minicart-product__name-font-weight : $font-weight-bold !default;
$minicart-product__name-font-family : $font-family-saira;
$minicart-product__description-color : rgba(0, 0, 0, 0.5) !default;
$minicart-product__description-font-size : $font-size-base !default;
$minicart-product__link-text-decoration : none !default;
$minicart-product__update-width : 90px !default;
$minicart-product__update-height : 32px !default;
$minicart-product__update-padding : 0 $spacer !default;
$minicart-product__update-margin : 0 0 $spacer 0 !default;
$minicart-product__input-padding : $spacer 0 !default;
$minicart-product__input-margin : 0 !default;
$minicart-product__attributes-button-margin : 0 !default;
$minicart-product__attributes-button-padding : 0 !default;
$minicart-product__attributes-button-color : $gray-font !default;
$minicart-product__attributes-button-color-hover : $red !default;
$minicart-product__attributes-button-bg-color : $white !default;
$minicart-product__attributes-button-font-family : $font-family-saira !default;
$minicart-product__attributes-button-font-size : $font-size-small !default;
$minicart-product__attributes-list-padding : $spacer 0 0 0 !default;
$minicart-product__attributes-list-color : $gray-dark !default;
$minicart-product__attributes-list-icon-margin : 0 0 0 $spacer !default;
$minicart-product__price-color : $gray-font !default;
$minicart-product__price-font-weight : $font-weight-bold !default;
$minicart-product__price-margin : 0 20px !default;
$minicart-product__icon-size : 12px !default;
.minicart-product {
font-family: $minicart-product__font-family;
display: flex;
width: 100%;
flex-flow: row nowrap;
padding: $minicart-product__padding;
border-bottom: $minicart-product__border;
&:last-child {
border-bottom: none;
}
&__image {
width: $minicart-product__image-width;
img {
width: $minicart-product__image-width;
max-width: $minicart-product__image-width;
height: auto;
}
}
&__info {
display: flex;
flex-flow: row wrap;
width: 100%;
padding: $minicart-product__info-padding;
}
&__name {
margin-bottom: $minicart-product__spacer;
line-height: $minicart-product__name-line-height;
font-size: 14px;
font-weight: $minicart-product__name-font-weight;
font-family: $minicart-product__name-font-family;
word-break: break-all;
@include mq($screen-m) {
font-size: $minicart-product__name-font-size;
}
}
&__description {
font-family: $minicart-product__font-family;
color: $minicart-product__description-color;
font-size: $minicart-product__description-font-size;
}
&__link {
text-decoration: $minicart-product__link-text-decoration;
font-family: $minicart-product__font-family;
}
&__attributes {
margin-bottom: $minicart-product__spacer;
}
&__attributes-button {
display: flex;
align-items: center;
margin: $minicart-product__attributes-button-margin;
padding: $minicart-product__attributes-button-padding;
font-family: $minicart-product__attributes-button-font-family;
font-size: $minicart-product__attributes-button-font-size;
.dropdown-list__icon {
position: static;
margin: $minicart-product__attributes-list-icon-margin;
fill: $minicart-product__attributes-button-color;
height: $minicart-product__icon-size;
width: $minicart-product__icon-size;
&:focus,
&:hover {
fill: $minicart-product__attributes-button-bg-color;
}
}
&.dropdown-list__label {
color: $minicart-product__attributes-button-color;
background-color: $minicart-product__attributes-button-bg-color;
&:focus,
&:hover {
color: $minicart-product__attributes-button-color-hover;
background-color: $minicart-product__attributes-button-bg-color;
}
}
}
&__attributes-list {
padding: $minicart-product__attributes-list-padding;
color: $minicart-product__attributes-list-color;
}
&__price {
width: 100%;
font-weight: $minicart-product__price-font-weight;
color: $minicart-product__price-color;
display: flex;
align-items: center;
margin: $minicart-product__price-margin;
}
&__bottom {
display: flex;
flex-direction: row;
width: 100%;
}
&__update {
display: none;
height: $minicart-product__update-height;
width: $minicart-product__update-width;
padding: $minicart-product__update-padding;
margin: $minicart-product__update-margin;
}
&__label {
display: none;
}
&__input {
padding: $minicart-product__input-padding;
margin: $minicart-product__input-margin;
}
}
.checkout-products {
&__title-icon {
display: none;
}
}
There are no notes for this item.