<!-- Error rendering component -->
<!-- Could not render component '@badge--new' - component not found. -->
<!-- Error: Could not render component '@badge--new' - component not found.
at Object.render (/opt/build/repo/node_modules/@frctl/handlebars/src/helpers/render.js:25:19)
at Object.helperWrapper (/opt/build/repo/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/opt/build/repo/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at eval (eval at createFunctionContext (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:9:122)
at Object.prog (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
at Object.prepareAndResolveMarkers (/opt/build/repo/node_modules/promised-handlebars/index.js:92:17)
at Object.fn (/opt/build/repo/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.<anonymous> (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/helpers/if.js:29:22)
at Object.helperWrapper (/opt/build/repo/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/opt/build/repo/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at Object.eval [as main] (eval at createFunctionContext (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:47)
at main (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
at ret (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
at ret (/opt/build/repo/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21) -->
<div class="catalog-item {{ modifierClass }}" tabindex="0">
{{#if badge}}
{{ render (component badge.name) badge.context }}
{{/if}}
<div class="catalog-item__image">
<a
href="#"
class=""
tabindex="-1"
>
{{ render '@image' image merge=true }}
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">{{ title.text }}</a>
</h2>
<div class="catalog-item__price">
{{ render '@price--with-special-price' price }}
</div>
</div>
<div class="catalog-item__actions">
{{ render '@button--icon' primaryAction }}
</div>
</div>
{
"image": {
"dataSrc": "/images/product/UFC_MMA_GLOVES.png"
},
"primaryAction": {
"tag": "button",
"text": "<span class=\"catalog-item__cart-text\"></span>",
"class": "button--icon button--plus catalog-item__primary-action",
"icon": {
"id": "plus",
"title": "Plus",
"class": "icons__single-icon button__icon"
},
"attributes": "type=\"button\" aria-label=\"Add to Cart\""
},
"title": {
"text": "UFC MMA Handschoenen zonder duim - Zwart/Wit"
},
"modifierClass": "catalog-item--black",
"badge": {
"name": "badge--new",
"context": {
"class": "badge",
"text": "Uitgelicht"
}
},
"price": {
"regularPrice": "189,95",
"specialPrice": "129,95",
"prefix": {
"tag": "",
"text": "€"
},
"suffix": {
"tag": "",
"text": ""
}
}
}
.catalog-item {
position: relative;
padding: $spacer--1;
background-color: #fff;
display: flex;
flex-direction: column;
margin-bottom: $spacer--1;
border-radius: 4px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
height: calc(100% - 1rem);
&__image {
margin: 0 auto;
width: auto;
height: auto;
padding: 0;
border-radius: 4px 4px 0 0;
}
&__content {
justify-self: flex-end;
margin-top: auto;
padding: 0 $spacer--1 $spacer--1;
}
&__title {
height: 46px;
overflow: hidden;
& .link {
font-size: 16px;
font-weight: bold;
font-family: $font-family-saira;
}
}
&__actions {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
}
&--fixed-width {
width: 230px;
margin-bottom: 1rem;
@include mq($screen-m) {
margin-bottom: 0;
}
}
&--black {
background-color: $black;
& .link {
color: $white;
}
& .price__value {
color: $white;
}
}
}
There are no notes for this item.