<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 class="price {{ class }} {{{ attributes }}}">
{{#if specialPrice }}
<span class="price__value price__value--special {{ specialPriceClass }}">
<ins aria-label="On sale at: {{#if prefix.text}}{{prefix.text}}{{/if}}{{specialPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
{{prefix.tag}}
{{prefix.text}}
{{prefix.closingTag}}
{{specialPrice}}
{{suffix.tag}}
{{suffix.text}}
{{suffix.closingTag}}
</ins>
</span>
<span class="price__value price__value--old {{ oldPriceClass }}">
<del aria-label="Price reduced from: {{#if prefix.text}}{{prefix.text}}{{/if}}{{regularPrice}}{{#if suffix.text}}{{suffix.text}}{{/if}}">
{{#if prefix.tag}}
<{{prefix.tag}}>
{{/if}}
{{prefix.text}}
{{#if prefix.tag}}
</{{tag}}>
{{/if}}
{{regularPrice}}
{{#if suffix.tag}}
<{{suffix.tag}}>
{{/if}}
{{suffix.text}}
{{#if suffix.tag}}
</{{suffix.tag}}>
{{/if}}
</del>
</span>
{{else}}
<span class="price__value {{ regularPriceClass }}">
{{prefix.tag}}
{{prefix.text}}
{{prefix.closingTag}}
{{regularPrice}}
{{suffix.tag}}
{{suffix.text}}
{{suffix.closingTag}}
</span>
{{/if}}
</div>
{
"regularPrice": "129,95",
"specialPrice": "109,95",
"prefix": {
"tag": "",
"text": "€",
"closingTag": ""
},
"suffix": {
"tag": "",
"text": "",
"closingTag": ""
},
"oldPriceClass": "",
"regularPriceClass": "",
"specialPriceClass": ""
}
$price__spacing : $spacer !default;
$price__font-family : $font-family-saira !default;
$price__font-style : normal !default;
$price__font-weight : $font-weight-semibold !default;
$price__font-weight--old : $font-weight-normal !default;
$price__font-weight--special : $font-weight-semibold !default;
$price__font-size : 20px !default;
$price__font-size--old : 14px !default;
$price__color : $red !default;
$price__color--special : $red !default;
$price__color--old : rgba(227, 6, 19, 0.5) !default;
$secondary-price__color : $white !default;
$secondary-price__color--special : $white !default;
$secondary-price__color--old : rgba(255, 255, 255, 0.5) !default;
.price {
&-box,
&__value {
font-family: $price__font-family;
font-size: $price__font-size;
font-weight: $price__font-weight;
color: $price__color;
& .old-price,
&--old {
color: $price__color--old;
font-weight: $price__font-weight--old;
font-size: $price__font-size--old;
text-decoration: line-through;
margin-right: $price__spacing;
}
&--special {
color: $price__color--special;
font-weight: $price__font-weight--special;
& > ins {
text-decoration: none;
}
}
&--between {
display: block;
&:last-child {
margin-top: $price__spacing;
}
}
}
& .normal-price {
& .price-container.price-final_price {
& .price-label {
margin-bottom: 5px;
}
& .price-wrapper {
& span.price {
color: $price__color--special;
font-weight: $price__font-weight--special;
}
}
}
}
&-label {
display: none;
}
&__text {
font-weight: $price__font-weight--old;
}
&-final_price {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
}
.catalog-item__price--black,
.catalog-item__price--red {
.price {
&__value {
color: $secondary-price__color;
&--old {
color: $secondary-price__color--old;
}
&--special {
color: $secondary-price__color--special;
}
}
}
}
There are no notes for this item.