<div class="product-grid-item " tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<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>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
<{{{ tag }}} class="product-grid-item {{ class }}" tabindex="0">
<a
href="#"
class="product-grid-item__link"
tabindex="-1"
>
{{#if productBadges}}
{{ render '@badges' productBadges }}
{{/if}}
{{ render '@image' image merge=true }}
</a>
<section class="product-grid-item__details">
{{#if rating }}
{{ render '@rating--secondary' rating merge=true }}
{{/if }}
<h2 class="product-grid-item__name">
<a
href="#"
class="product-grid-item__name-link"
>
{{ name }}
</a>
</h2>
{{#if swatches}}
<div class="swatch__container swatch__container--catalog">
{{ render '@swatch--color' }}
</div>
{{/if}}
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price {{ price.class }}">
{{ render (component price.name) price.context }}
</div>
<div class="product-grid-item__actions {{ secondaryActions.class }}">
<div class="product-grid-item__secondary-action">
{{#if secondaryActions.wishlist }}
{{
render '@button--icon'
secondaryActions.wishlist
merge=true
}}
{{/if}}
{{#if secondaryActions.compare }}
{{
render '@button--icon'
secondaryActions.compare
merge=true
}}
{{/if}}
</div>
{{#if secondaryActions.addToCart }}
<form action="#" class="product-grid-item__primary-action">
{{
render '@button--add-to'
secondaryActions.addToCart
merge=true
}}
</form>
{{/if}}
</div>
</div>
</section>
</{{{ tag }}}>
{
"tag": "div",
"class": "",
"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\""
}
}
}
$product-grid-item__width : 100% !default;
$product-grid-item__padding : 0 !default;
$product-grid-item__border : $form-element-border-width solid $gray-light !default;
$product-grid-item__border\@medium : $form-element-border-width solid $gray-lightest !default;
$product-grid-item__border-hover : $form-element-border-width solid $gray !default;
$product-grid-item__border-hover\@medium : $form-element-border-width solid $gray-light !default;
$product-grid-item__transition : $transition-base !default;
$product-grid-item__badges-top-position : $spacer--medium !default;
$product-grid-item__badges-left-position : 0 !default;
$product-grid-item__badges-z-index : $z-index-low !default;
$product-grid-item__image-margin : 0 auto !default;
$product-grid-item__image-width : auto !default;
$product-grid-item__image-width--lazyload : 100% !default;
$product-grid-item__image-height--lazyload : auto !default;
$product-grid-item__image-height : auto !default;
$product-grid-item__image-bg-hover : $black !default;
$product-grid-item__imgae-layout-color-hover : rgba($black, 0.2) !default;
$product-grid-item__details-padding : 0 $spacer !default;
$product-grid-item__details-padding\@xl : 0 $spacer !default;
$product-grid-item__details-margin : $spacer 0 $spacer--medium !default;
$product-grid-item__details-border : 0 !default;
$product-grid-item__details-border-width : 0 !default;
$product-grid-item__name-color : $font-color-base !default;
$product-grid-item__name-color-hover : $font-color-base !default;
$product-grid-item__name-font-size : $font-size-base !default;
$product-grid-item__name-font-size\@medium : $font-size-medium !default;
$product-grid-item__name-font-weight : $font-weight-normal !default;
$product-grid-item__name-line-height : 1.5 !default;
$product-grid-item__name-text-decoration : none !default;
$product-grid-item__name-text-decoration-hover : none !default;
$product-grid-item__name-margin : 0 0 $spacer !default;
$product-grid-item__name-height : 65px !default;
$product-grid-item__name-height\@small : 45px !default;
$product-grid-item__rating-margin-bottom : $spacer !default;
$product-grid-item__rating-height : $spacer--medium !default;
$product-grid-item__price-label-font-weight : $font-weight-normal !default;
$product-grid-item__price-old-font-size : $font-size-base !default;
$product-grid-item__price-old-font-size\@medium : $font-size-medium !default;
$product-grid-item__price-value-font-size--between : $font-size-medium !default;
$product-grid-item__price-min-height : 44px !default;
$product-gird-item__primary-margin : 0 0 0 $spacer !default;
$product-grid-item__action-wishlist-background : transparent !default;
$product-grid-item__IE-margin : 0 $spacer $spacer--medium $spacer !default;
$product-grid-item__IE-width : calc(50% - #{$spacer--medium} - 1px) !default;
$product-grid-item__IE-width\@medium : calc(100% / 3 - #{$spacer--medium} - 1px) !default;
// wishlist variant
$product-grid-item__action-margin--wishlist : $spacer 0 0 0 !default;
$product-grid-item__comment-input-width--wishlist : 100% !default;
$product-grid-item__comment-margin--wishlist : 0 0 $spacer 0 !default;
$product-grid-item__comment-margin--wishlist\@medium : 0 0 $spacer--medium 0 !default;
$product-grid-item__qty-input-width--wishlist : 72px !default;
$product-grid-item__qty-input-width--wishlist\@xl : 60px !default;
$product-grid-item__qty-button-size--wishlist : 48px !default;
$product-grid-item__qty-input-border-width--wishlist : 1px !default;
$product-grid-item__qty-input-border-width--wishlist\@xl : 1px 0 !default;
$product-grid-item__qty-width--wishlist : 100% !default;
$product-grid-item__qty-width--wishlist\@medium : 80px !default;
$product-grid-item__qty-width--wishlist\@xl : 156px !default;
$product-grid-item__primary-action-width--wishlist : 100% !default;
$product-grid-item__primary-action-margin--wishlist : $spacer 0 0 0 !default;
$product-grid-item__primary-action-margin--wishlist\@medium : $spacer--medium 0 0 0 !default;
$product-grid-item__primary-action-button-padding--wishlist : 0 $spacer--semi-medium !default;
$product-grid-item__secondary-action-width--wishlist : 100% !default;
$product-grid-item__secondary-action-width--wishlist\@medium: calc(100% - #{$product-grid-item__qty-width--wishlist\@medium}) !default;
$product-grid-item__secondary-action-width--wishlist\@xl : calc(100% - #{$product-grid-item__qty-width--wishlist\@xl}) !default;
$product-grid-item__tocompare-background-color : $gray-lighter !default;
// Slider item variant
$product-grid-item__image-wrapper-width--slider-item : 100% !default;
// EE Version
$product-grid-item-ee__actions-width : 100% !default;
$product-grid-item-ee__tocart-width : 48px !default;
$product-grid-item-ee__tocart-height : 48px !default;
$product-grid-item-ee__requisition-margin : 0 $spacer 0 0 !default;
$product-grid-item-ee__multiwishlist-width : 48px !default;
$product-grid-item-ee__multiwishlist-margin : 0 $spacer !default;
$product-grid-item-ee__dropdown-list-content-width : 180px !default;
$product-grid-item-ee__dropdown-list-content-width\@medium : 210px !default;
$product-grid-item-slider__dropdown-list-content-top : auto !default;
$product-grid-item-slider__dropdown-list-content-bottom : 100% !default;
$product-grid-item-ee__dropdown-list-label-width : 48px !default;
$product-grid-item-ee__dropdown-list-label-height : 48px !default;
@import 'product-grid-item-variables';
.product-grid-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: $product-grid-item__width;
border: $product-grid-item__border;
padding: $product-grid-item__padding;
z-index: 0 !important; //sass-lint:disable-line no-important
@include mq($screen-m) {
border: $product-grid-item__border\@medium;
}
&:hover {
border: $product-grid-item__border-hover;
@include mq($screen-m) {
border: $product-grid-item__border-hover\@medium;
}
}
@include isIE() {
margin: $product-grid-item__IE-margin;
width: $product-grid-item__IE-width;
@include mq($screen-m) {
width: $product-grid-item__IE-width\@medium;
}
}
&--wishlist {
.quantity-update__input {
width: $product-grid-item__qty-input-width--wishlist;
height: $product-grid-item__qty-button-size--wishlist;
border-width: $product-grid-item__qty-input-border-width--wishlist;
@include mq($screen-xl) {
border-width: $product-grid-item__qty-input-border-width--wishlist\@xl;
width: $product-grid-item__qty-input-width--wishlist\@xl;
}
}
.quantity-update__button {
width: $product-grid-item__qty-button-size--wishlist;
height: $product-grid-item__qty-button-size--wishlist;
display: none;
@include mq($screen-xl) {
display: flex;
}
}
.product-grid-item__primary-action {
width: $product-grid-item__primary-action-width--wishlist;
margin: $product-grid-item__primary-action-margin--wishlist;
@include mq($screen-m) {
margin: $product-grid-item__primary-action-margin--wishlist\@medium;
}
.button {
width: $product-grid-item__primary-action-width--wishlist;
padding: $product-grid-item__primary-action-button-padding--wishlist;
}
}
.product-grid-item__secondary-action {
display: flex;
justify-content: space-around;
width: $product-grid-item__secondary-action-width--wishlist;
@include mq($screen-m) {
width: $product-grid-item__secondary-action-width--wishlist\@medium;
align-items: flex-end;
}
@include mq($screen-xl) {
width: $product-grid-item__secondary-action-width--wishlist\@xl;
}
}
}
&--slider-item {
.product-grid-item__link {
flex: 0;
}
.product-grid-item__details {
flex: 1;
}
.product-grid-item__details-bottom {
margin-top: auto;
}
@include isIE() {
display: block;
width: 100%;
}
.product-grid-item__image-wrapper {
.image {
width: $product-grid-item__image-wrapper-width--slider-item;
position: absolute;
@include isIE() {
width: auto;
}
}
.lazyload,
.lazyloading {
width: $product-grid-item__image-wrapper-width--slider-item;
}
}
.product-grid-item__price {
&--full-width {
@include mq($screen-m) {
width: 100%;
}
}
}
.product-grid-item__actions {
&--zero-width {
@include mq($screen-m) {
width: 0;
}
}
}
}
&__badges {
top: $product-grid-item__badges-top-position;
left: $product-grid-item__badges-left-position;
z-index: $product-grid-item__badges-z-index;
}
&__link {
position: relative;
display: flex;
flex-flow: column nowrap;
justify-content: center;
flex: 1 1 auto;
align-items: center;
align-self: stretch;
&:after {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
transition: $product-grid-item__transition;
}
}
&__image-wrapper {
position: relative;
transition: $product-grid-item__transition;
width: 100%;
.product-image-container {
width: auto !important; // sass-lint:disable-line no-important
position: unset !important; // sass-lint:disable-line no-important
}
.image {
margin: $product-grid-item__image-margin;
width: $product-grid-item__image-width;
height: $product-grid-item__image-height;
transition: $product-grid-item__transition;
}
.lazyload,
.lazyloading {
width: $product-grid-item__image-width--lazyload;
height: $product-grid-item__image-height--lazyload;
}
}
&__name {
min-height: $product-grid-item__name-height;
margin: $product-grid-item__name-margin;
font-weight: $product-grid-item__name-font-weight;
font-size: $product-grid-item__name-font-size;
text-transform: $product-grid-item__name-text-decoration;
width: 100%;
@include mq($screen-s) {
min-height: $product-grid-item__name-height\@small;
}
@include mq($screen-m) {
font-size: $product-grid-item__name-font-size\@medium;
}
@include mq($screen-l) {
width: 100%;
}
}
&__name-link {
display: block;
color: $product-grid-item__name-color;
text-decoration: none;
line-height: $product-grid-item__name-line-height;
&:hover {
text-decoration: $product-grid-item__name-text-decoration-hover;
color: $product-grid-item__name-color-hover;
}
}
&__rating {
margin-bottom: $product-grid-item__rating-margin-bottom;
height: $product-grid-item__rating-height;
}
&__price {
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
min-height: $product-grid-item__price-min-height;
margin-bottom: 15px;
@include mq($screen-m) {
width: 50%;
margin-bottom: 0;
}
.price-label {
font-weight: $product-grid-item__price-label-font-weight;
}
.price__value:not(.price__value--between) {
display: flex;
flex-flow: column nowrap;
justify-content: center;
white-space: nowrap;
}
}
&__details {
padding: $product-grid-item__details-padding;
margin: $product-grid-item__details-margin;
flex-grow: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
border: $product-grid-item__details-border;
border-width: $product-grid-item__details-border-width;
@include mq($screen-xl) {
padding: $product-grid-item__details-padding\@xl;
}
.product-grid-item__stock-status--out-of-stock {
display: none;
}
}
&__details-bottom {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
@include mq($screen-m) {
flex-flow: row wrap;
}
}
&__actions {
display: flex;
align-items: flex-end;
justify-content: flex-end;
width: 100%;
@include mq($screen-m) {
width: 50%;
}
.tocompare {
display: none;
}
&--ee {
justify-content: space-between;
width: $product-grid-item-ee__actions-width;
&.product-grid-item__actions--slider {
.dropdown-list__content {
bottom: $product-grid-item-slider__dropdown-list-content-bottom;
top: $product-grid-item-slider__dropdown-list-content-top;
}
}
.tocart {
width: $product-grid-item-ee__tocart-width;
height: $product-grid-item-ee__tocart-height;
}
.product-grid-item {
&__secondary-action {
display: flex;
align-items: center;
.button {
justify-content: center;
order: 1;
&__text {
display: none;
}
}
.block-requisition-list {
margin: $product-grid-item-ee__requisition-margin;
order: 3;
}
}
}
.button--wishlist {
display: none;
}
.product-view {
&__update-wishlist {
display: none;
}
&__multiwishlist {
width: $product-grid-item-ee__multiwishlist-width;
margin: $product-grid-item-ee__multiwishlist-margin;
order: 2;
}
}
.dropdown-list {
&__content {
width: $product-grid-item-ee__dropdown-list-content-width;
@include mq($screen-m) {
width: $product-grid-item-ee__dropdown-list-content-width\@medium;
}
}
&__icon {
display: none;
}
&__label {
width: $product-grid-item-ee__dropdown-list-label-width;
height: $product-grid-item-ee__dropdown-list-label-height;
}
&__item {
position: relative;
}
}
}
}
&__primary-action {
margin: $product-gird-item__primary-margin;
.button--add-to {
@include mq($screen-m) {
@include add-to-button(block);
}
}
}
// elements from product-grid-item--wishlist variant
&__wishlist-action {
margin: $product-grid-item__action-margin--wishlist;
@include mq($screen-m) {
display: flex;
flex-flow: row wrap;
}
}
&__wishlist-comment {
width: $product-grid-item__comment-input-width--wishlist;
margin: $product-grid-item__comment-margin--wishlist;
@include mq($screen-m) {
margin: $product-grid-item__comment-margin--wishlist\@medium;
}
}
&__wishlist-qty {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
width: $product-grid-item__qty-width--wishlist;
@include mq($screen-m) {
flex-direction: column;
align-items: flex-start;
width: $product-grid-item__qty-width--wishlist\@medium;
}
@include mq($screen-xl) {
width: $product-grid-item__qty-width--wishlist\@xl;
}
}
.add-to-wishlist {
@extend .button--icon-fill;
position: absolute;
top: 0;
right: 0;
background: $product-grid-item__action-wishlist-background;
&:before {
display: none;
}
&.button--icon-filled {
@include button-fill-bg();
}
}
.button--tocompare {
background-color: $product-grid-item__tocompare-background-color;
display: none;
}
}
There are no notes for this item.