<div class="category-grid-item" tabindex="0">
<a href="https://snurky.test/beenbreukpakket.html" title="Beenbreuk pakket Lenen
" class="category-grid-item__link" tabindex="0" aria-label="Beenbreuk pakket Lenen">
<picture class="category-grid-item__image image">
<img src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Beenbreuk pakket Lenen
">
</picture>
<div class="category-grid-item__content">
<div class="badge badge--top-left">
<span class="badge__text">Lenen
</span>
</div>
<h3 class="category-grid-item__text">
Beenbreuk pakket Lenen
</h3>
<span class="category-grid-item__icon">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
</span>
</div>
</a>
</div>
<div class="category-grid-item" tabindex="0">
<a href="https://snurky.test/beenbreukpakket.html" title="Beenbreuk pakket Lenen
" class="category-grid-item__link" tabindex="0" aria-label="Beenbreuk pakket Lenen">
<picture class="category-grid-item__image image">
<img src="/images/catalog-grid-item/bedlegerig-pakket.jpeg" alt="Beenbreuk pakket Lenen
">
</picture>
<div class="category-grid-item__content">
<div class="badge badge--top-left">
<span class="badge__text">Lenen
</span>
</div>
<h3 class="category-grid-item__text">
Beenbreuk pakket Lenen
</h3>
<span class="category-grid-item__icon">
{{
render '@button--icon'
secondaryActions.wishlist
merge=true
}}
</span>
</div>
</a>
</div>
{
"tag": "div",
"class": "product-grid-item--wishlist",
"swatches": true,
"productBadges": {
"class": "product-grid-item__badges",
"badges": [
{
"contentElement": "badge",
"contentContext": {
"text": "-15%"
}
},
{
"contentElement": "badge--new",
"contentContext": {
"text": "New"
}
}
]
},
"image": {
"wrapperClass": "product-grid-item__image-wrapper",
"dataSrc": "/images/product/product-368_552.jpg"
},
"name": "Long product name can have maximum 50 caractere...",
"price": {
"name": "price",
"context": {
"regularPrice": "1 400",
"specialPrice": "",
"prefix": {
"tag": "",
"text": "$"
},
"suffix": {
"tag": "",
"text": ""
}
}
},
"rating": {
"class": "product-grid-item__rating rating--secondary"
},
"secondaryActions": {
"wishlist": {
"tag": "button",
"class": "add-to-wishlist",
"icon": {
"id": "heart",
"title": "Heart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to Wish List\""
},
"compare": {
"tag": "button",
"class": "",
"icon": {
"id": "compare",
"title": "Compare",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to compare\""
},
"addToCart": {
"tag": "button",
"class": "button--add-to",
"icon": {
"id": "shopping-cart",
"title": "Add to cart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"submit\" aria-label=\"Add to cart\""
},
"edit": {
"tag": "a",
"class": "",
"icon": {
"id": "edit",
"title": "edit",
"class": "button__icon",
"hidden": true
},
"attributes": "href=\"#\" aria-label=\"Edit product\""
},
"remove": {
"tag": "button",
"class": "",
"icon": {
"id": "remove",
"title": "Remove",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Remove product from wishlist\""
}
},
"wisthlistComment": {
"class": "product-grid-item__wishlist-comment",
"label": {
"text": "Comment",
"hidden": true
},
"field": {
"id": "wishlist-comment-product-1",
"name": "wishlist-comment-product-1",
"placeholder": "Comment",
"type": "text"
}
},
"wishlistQtyLabel": {
"text": "Quantity:",
"for": "qty-product-1"
},
"wishlistQtyUpdate": {
"input": {
"id": "qty-product-1",
"name": "qty-product-1"
}
},
"wishlistAddToCart": {
"tag": "button",
"class": "",
"text": "Add to cart",
"attributes": "type=\"button\""
}
}
$category-grid-item--border-radius : 0 !default;
$category-grid-item__image--border-radius : 5px !default;
$category-grid-item--padding : 10px !default;
$category-grid-item__content--margin : 10px 0 0 !default;
@import "category-grid-item-variables";
.category-grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: $category-grid-item--border-radius;
padding: $category-grid-item--padding;
a {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
border-radius: $category-grid-item--border-radius;
}
&__image.image {
width: 100%;
height: auto;
position: relative;
border-radius: $category-grid-item--border-radius;
img {
border-radius: $category-grid-item__image--border-radius $category-grid-item__image--border-radius 0 0;
}
}
&__content {
width: 100%;
display: flex;
align-items: center;
margin: $category-grid-item__content--margin;
justify-content: space-between;
}
&__text {
margin: 0;
}
}
There are no notes for this item.