<div role="dialog" aria-hidden="true" id="addReview addReview" data-modal="addReview addReview" class="modal review review--add" tabindex="-1" aria-labelledby="addReview" aria-describedby="addReview">
<div role="document" class="modal__content review--add-content" tabindex="0">
<div class="review--add__heading">
<h3 class="review--add__title">
SCHRIJF UW EIGEN REVIEW
</h3>
<span class="review--add__title-product">
UFC MMA GLOVES ZONDER DUIM - ZWART/WIT
</span>
</div>
<div class="review--add__main-block">
<div class="review--add__image-block">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="/images/product/UFC_MMA_GLOVES.png" alt="">
</div>
</div>
<div class="review--add__rating-block">
<fieldset class="fieldset review__rating-fieldset" aria-labelledby="rating-field-label">
<div class="row">
<legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
Prijs
</legend>
<div class="rating rating--rate review__rating-stars" role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_1" class="rating__star rating__star--rate " aria-label="Rate option, 1 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_2" class="rating__star rating__star--rate " aria-label="Rate option, 2 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_3" class="rating__star rating__star--rate " aria-label="Rate option, 3 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_4" class="rating__star rating__star--rate " aria-label="Rate option, 4 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_5" class="rating__star rating__star--rate " aria-label="Rate option, 5 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
</div>
</div>
</div>
</fieldset>
<script src="/components/raw/rating/rating-rate.js"></script>
<fieldset class="fieldset review__rating-fieldset review__rating-fieldset--second" aria-labelledby="rating-field-label">
<div class="row">
<legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
Kwaliteit
</legend>
<div class="rating rating--rate review__rating-stars" role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_1" class="rating__star rating__star--rate " aria-label="Rate option, 1 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_2" class="rating__star rating__star--rate " aria-label="Rate option, 2 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_3" class="rating__star rating__star--rate " aria-label="Rate option, 3 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_4" class="rating__star rating__star--rate " aria-label="Rate option, 4 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_5" class="rating__star rating__star--rate " aria-label="Rate option, 5 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
</div>
</div>
</div>
</fieldset>
<script src="/components/raw/rating/rating-rate.js"></script>
<fieldset class="fieldset review__rating-fieldset review__rating-fieldset--last" aria-labelledby="rating-field-label">
<div class="row">
<legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
Pasvorm
</legend>
<div class="rating rating--rate review__rating-stars" role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_1" class="rating__star rating__star--rate " aria-label="Rate option, 1 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_2" class="rating__star rating__star--rate " aria-label="Rate option, 2 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_3" class="rating__star rating__star--rate " aria-label="Rate option, 3 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_4" class="rating__star rating__star--rate " aria-label="Rate option, 4 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_5" class="rating__star rating__star--rate " aria-label="Rate option, 5 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
</div>
</div>
</div>
</fieldset>
<script src="/components/raw/rating/rating-rate.js"></script>
</div>
</div>
<fieldset class="fieldset review__fieldset">
<div class="row">
<div class="col-xs-12">
<div class="input review__field">
<span class="form-check" aria-label="form-check-review-nickname">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
" for="review-nickname">
</label>
<input class="input__field " id="review-nickname" name="review-nickname" type="text" placeholder="Naam..." autocomplete="name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="input review__field">
<span class="form-check" aria-label="form-check-review-summary">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
" for="review-summary">
</label>
<input class="input__field " id="review-summary" name="review-summary" type="text" placeholder="Korte omschrijving..." autocomplete="off">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="input review__field">
<label class="input__label " for="review-text">
</label>
<textarea class="input__field input__field--textarea " id="review-text" name="review-text" placeholder="Uw beoordeling..." autocomplete="off"></textarea>
</div>
</div>
</div>
<div class="review__placeReview-btn">
<button class="button review__submit-btn modal__js-close-button" type="button" aria-label="close modal button, click to close the modal">
Plaats Review
</button>
</div>
</fieldset>
</div>
</div>
<div role="dialog"
aria-hidden="true"
id="{{ modal.id }} addReview"
data-modal="{{ modal.id }} addReview"
class="modal {{ modal.class }}"
tabindex="-1"
{{{ modal.attributes }}}
>
<div role="document"
class="modal__content {{ modalContent.class }}"
tabindex="0"
>
<div class="review--add__heading">
<h3 class="review--add__title">
{{ addTitle }}
</h3>
<span class="review--add__title-product">
{{ productTitle }}
</span>
</div>
<div class="review--add__main-block">
<div class="review--add__image-block">
{{ render '@image' productImage }}
</div>
<div class="review--add__rating-block">
{{ render '@rating--rate' ratePrice merge=true }}
{{ render '@rating--rate' rateQuality merge=true }}
{{ render '@rating--rate' rateFit merge=true }}
</div>
</div>
<fieldset class="fieldset review__fieldset">
<div class="row">
<div class="col-xs-12">
{{ render '@input' nickname }}
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{ render '@input' summary}}
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{ render '@input--textarea' textReview }}
</div>
</div>
<div class="review__placeReview-btn">
{{ render '@button' submitReview merge=true }}
</div>
</fieldset>
</div>
</div>
{
"modalContent": {
"class": "review--add-content"
},
"modal": {
"class": "review review--add",
"id": "addReview",
"attributes": "aria-labelledby=\"addReview\" aria-describedby=\"addReview\""
},
"trigger": true,
"addReviewTrigger": {
"buttonModalTrigger": {
"tag": "button",
"class": "modal-trigger review__summary-add",
"attributes": "data-modal-trigger=\"addReview\" type=\"button\"",
"icon": {
"id": "plus",
"title": "Plus",
"class": "button__icon review__summary-add--icon"
},
"text": "Review plaatsen"
}
},
"script": false,
"rating": {
"ariaLabel": "Average rating 72%",
"star": {
"attributes": "style=\"width: 72%\""
},
"class": "review__rating"
},
"author": "Klaas Akkerman",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
"date": "08-06-2020",
"addTitle": "SCHRIJF UW EIGEN REVIEW",
"productTitle": "UFC MMA GLOVES ZONDER DUIM - ZWART/WIT",
"productImage": {
"dataSrc": "/images/product/UFC_MMA_GLOVES.png"
},
"ratePrice": {
"ratingClass": "review__rating-stars",
"fieldsetClass": "review__rating-fieldset",
"legendClass": "review__rating-legend",
"legendTitle": "Prijs"
},
"rateQuality": {
"ratingClass": "review__rating-stars",
"fieldsetClass": "review__rating-fieldset review__rating-fieldset--second",
"legendClass": "review__rating-legend",
"legendTitle": "Kwaliteit"
},
"rateFit": {
"ratingClass": "review__rating-stars",
"fieldsetClass": "review__rating-fieldset review__rating-fieldset--last",
"legendClass": "review__rating-legend",
"legendTitle": "Pasvorm"
},
"nickname": {
"class": "review__field",
"field": {
"attributes": "autocomplete=\"name\"",
"id": "review-nickname",
"name": "review-nickname",
"type": "text",
"placeholder": "Naam..."
}
},
"summary": {
"class": "review__field",
"field": {
"attributes": "autocomplete=\"off\"",
"id": "review-summary",
"name": "review-summary",
"type": "text",
"placeholder": "Korte omschrijving..."
}
},
"textReview": {
"class": "review__field",
"field": {
"attributes": "autocomplete=\"off\"",
"id": "review-text",
"name": "review-text",
"type": "text",
"placeholder": "Uw beoordeling..."
}
},
"submitReview": {
"class": "review__submit-btn modal__js-close-button",
"text": "Plaats Review",
"attributes": "type=\"button\" aria-label=\"close modal button, click to close the modal\""
}
}
.review {
width: 100%;
@include mq($screen-m) {
display: flex;
flex-flow: row nowrap;
padding: $spacer--3 $spacer--075;
}
&--add {
@include mq($screen-m) {
display: block;
}
&__heading {
padding: $spacer--1;
}
&__title {
font-family: $font-family-evogria;
font-style: normal;
font-weight: normal;
font-size: $font-size-large;
text-transform: uppercase;
color: #343434;
margin: 0;
}
&__title-product {
font-family: $font-family-saira;
font-style: normal;
font-weight: normal;
font-size: $font-size-medium;
color: #a7a7a7;
}
&__main-block {
background-color: #ecf5f4;
border-radius: 5px;
padding: $spacer--1;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
&__rating-block {
background-color: $white;
border-radius: $border-radius;
padding: $spacer--075;
flex: 1 0 60%;
}
&__product-image {
flex: 0 1 40%;
padding-right: $spacer--2;
}
&__rating {
display: grid;
grid-template-columns: 30% 70%;
border-bottom: 1px solid $gray-light;
&:last-child {
border: 0;
}
}
}
&--summary {
@include mq($screen-m) {
display: flex;
justify-content: flex-end;
}
.rating {
margin-right: $spacer;
}
}
&__details {
width: 100%;
&:first-child {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
&:last-child {
margin-top: $spacer--2;
}
@include mq($screen-m) {
&:first-child {
display: block;
width: 20%;
margin-right: $spacer--large;
}
&:last-child {
width: 80%;
margin-top: 0;
}
}
}
&__heading {
display: flex;
justify-content: space-between;
letter-spacing: 1px;
}
&__title {
font-size: $font-size-large;
font-weight: $font-weight-base;
font-family: $font-family-evogria;
text-transform: uppercase;
color: #a6a6a6;
}
&__title-product {
display: block;
margin: $spacer--05 0;
text-transform: none;
font-weight: bold;
}
&__content {
font-size: $font-size-base;
font-family: $font-family-saira;
font-weight: $font-weight-base;
margin-top: $spacer--15;
line-height: 165%;
& span {
color: $gray;
}
& p {
color: $gray-light;
}
}
&__date {
display: block;
color: #b4b4b4;
font-size: $font-size-base;
font-family: $font-family-saira;
}
&__field {
margin: 0;
padding: $spacer--1;
position: relative;
& .input__field {
opacity: 0.5;
font-family: $font-family-saira;
padding-right: 3rem;
+ svg.icon,
+ .mage-error + svg.icon {
display: none;
fill: #09cfc4;
}
&.valid + svg.icon,
&.valid + .mage-error + svg.icon {
position: absolute;
display: block;
top: 1.57rem;
right: 1rem;
}
}
}
&__placeReview-btn {
display: flex;
justify-content: flex-end;
margin-top: $spacer--15;
padding: 0;
}
&__submit-btn {
width: 50%;
border-radius: $border-radius;
}
&__required-info {
margin-top: $spacer--large;
font-size: $font-size-small;
}
&__summary-handle {
@include mq($screen-m) {
display: flex;
flex-basis: 100%;
}
}
&__amount {
&-qty {
font-family: $font-family-saira;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: rgba(52, 52, 52, 0.75);
@include mq($screen-m) {
font-size: $font-size-large;
}
}
}
&__summary-add {
background: $white;
border-radius: $border-radius--small;
font-family: $font-family-saira;
font-weight: $font-weight-base;
font-size: $font-size-small;
color: #a6a6a6;
padding: 0 $spacer--125;
height: 40px;
display: flex;
flex-direction: row-reverse;
&:hover {
background: $red;
color: $white;
& .review__summary-add--icon {
fill: $white;
}
}
@include mq($screen-m) {
font-size: $font-size-medium;
}
&--icon {
fill: #a6a6a6;
height: 16px;
width: 16px;
margin-right: $spacer--05;
@include mq($screen-m) {
margin-right: $spacer--125;
height: 18px;
width: 18px;
}
}
}
&__summary-rating {
display: flex;
align-items: flex-end;
align-self: baseline;
justify-content: space-between;
flex-direction: row;
flex-basis: 100%;
@include mq($screen-m) {
flex-basis: 20%;
flex-direction: column;
align-items: flex-start;
align-self: center;
}
}
&__summary-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-basis: 100%;
margin-top: $spacer--075;
@include mq($screen-m) {
flex-basis: 80%;
margin-top: 0;
}
}
&__summary-amount {
display: flex;
@include mq($screen-m) {
justify-content: flex-start;
flex-basis: 50%;
}
}
&__summary-add-review {
display: flex;
@include mq($screen-m) {
flex-basis: 50%;
justify-content: flex-end;
}
}
&__rating-fieldset {
border-bottom: 1px solid $gray-lighter;
padding-bottom: $spacer--1;
&--second {
margin-top: $spacer--1;
}
&--last {
margin-top: $spacer--1;
padding: 0;
border: none;
}
& .row {
justify-content: space-between;
padding: 0 $spacer--075;
}
}
&__rating-legend {
font-family: $font-family-saira;
font-weight: $font-weight-semibold;
font-size: $font-size-large;
display: flex;
align-items: center;
margin-bottom: 0;
}
&__rating-stars {
margin: 0;
}
&__modal {
&.modal-popup {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.6);
&._show {
display: block;
}
.modal-inner-wrap {
max-width: 650px;
border-radius: $border-radius--large;
padding: 15px;
}
.modal-header {
justify-content: space-between;
align-items: center;
padding-top: $spacer--1;
padding-bottom: $spacer--1;
.heading--page {
margin: 0;
}
.modal__close-button {
background: transparent;
.icon {
fill: $gray-light;
}
}
}
.content {
.review {
&--add {
padding: 0;
&__main-block {
margin-bottom: 0;
}
&__heading {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
}
&__field {
padding: $spacer--1 0 0;
}
}
}
.modal-footer {
display: none;
}
@include mq(false, $screen-m) {
.modal-inner-wrap {
width: 95%;
}
.modal-header,
.modal-content {
padding-left: $spacer--05;
padding-right: $spacer--05;
}
.review {
&--add__main-block {
padding: $spacer--05;
}
&--add__product-image {
display: none;
}
&--add__rating {
grid-template-columns: 25% 75%;
}
}
}
}
}
}
There are no notes for this item.